import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { recipeApi } from '../services/api';
import {
  Container,
  Typography,
  Tooltip,
  List,
  ListItem,
  ListItemText,
  ListItemSecondaryAction,
  IconButton,
  Checkbox,
  Fab,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
  Box,
  FormControlLabel,
  FormGroup,
  MenuItem,
  Select,
  FormControl,
  InputLabel
} from '@mui/material';
import {
  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
  SoupKitchen as SoupKitchenIcon
} from '@mui/icons-material';
import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types';
import { useMessage } from '../components/MessageContext';

const RecipeList: React.FC = () => {
  const navigate = useNavigate();
  // 料理リストの料理名を格納する配列

  const { showErrorMessage } = useMessage();

  // すべての料理リスト
  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>();

  const openRecipeById = (recipeId: number) => {
    navigate('/addRecipe/' + recipeId);
  }
  
  const fetchAllRecipes = async () => {
    try {
      const recipes = await recipeApi.getAllRecipes();
      setAllRecipes(recipes);
    } catch (error) {
      showErrorMessage("レシピの取得に失敗しました。");
      // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
    }
  };

  // コンポーネントマウント時にタスク一覧を取得
  useEffect(() => {
    fetchAllRecipes();
  }, []);

  return (
    <Container>
      <Box>
        <div>
          <h1 style={{ fontSize: "40px", textAlign: "center" }}>料理リスト</h1>
        </div>
        <div style={{
          border: '3px solid black', borderRadius: '8px', height: '500px',
          overflowY: 'auto', padding: '20px'
        }}>
          {/* <List> */}
          {/* 料理一覧をマップして各タスクをリストアイテムとして表示 */}
          {!allRecipes
          ? <p>読み込み中...</p>
          : allRecipes.map((recipe, index) => (
            <FormGroup>
              <Button
                // <ListItem 
                key={recipe.recipeId}
                sx={{
                  bgcolor: 'background.paper',
                  mb: 1,
                  borderRadius: 1,
                  boxShadow: 1,
                  fontSize: '40px'
                }}
                onClick={() => openRecipeById(recipe.recipeId)}
              >
                {recipe.recipeName}
              </Button>
            </FormGroup>
            // </ListItem>
          ))}
          {/* </List> */}
        </div>
        <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px" }}>
          <Button variant='contained' sx={{
            width: "60%", height: "60px",
            fontSize: "32px", left: "50%", transform: 'translateX(-50%)'
          }}
            color="primary"
            onClick={() => navigate('/AddRecipe')}
          >
            新しい料理を追加
          </Button>
        </div>
      </Box>

    </Container>
  );
};

export default RecipeList;