joint_exc/frontend/src/components/AddByRecipeDialog.tsx

import React, { useEffect, useState } from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    Box,
} from '@mui/material';

import { toBuyApi } from '../services/api';
import { recipeApi } from '../services/api';

import CloseIcon from '@mui/icons-material/Close';
import { RecipeDetailWithId, StuffNameAndAmount } from '../types/types';

const AddByRecipeDialog =  ({
    openDialog,
    setOpenDialog,
    recipeId,
    numOfPeople,
    setNumOfPeaple,
    checked,
    setChecked
}: {
    openDialog: boolean,
    setOpenDialog: (open: boolean) => void,
    recipeId: number,
    numOfPeople: number,
    setNumOfPeaple: (num: number) => void,
    checked: boolean,
    setChecked: (checked: boolean) => void
}) => {
    const [recipe, setRecipe] = useState<RecipeDetailWithId>();
    
    
    useEffect(() => {
        console.log("called AddByRecipeDialog useEffect recipeId: ", recipeId);
        if (recipeId) {
            const fetchRecipe = async () => {
                console.log("Fetching recipe with ID:", recipeId);
                setRecipe(await recipeApi.getById(recipeId));
            };
            fetchRecipe();
        }
    }, [recipeId]);

    return (
        recipe ? 
        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}>
            <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>

                買うものリストへ追加
                <CloseIcon
                    onClick={() => setOpenDialog(false)}
                    sx={{
                        cursor: 'pointer',
                        color: (theme) => theme.palette.grey[500],
                    }}
                />
            </DialogTitle>
            <DialogContent dividers sx={{ padding: 2 }}>
                <div>
                    <strong>レシピ名:</strong> {recipe.recipeName}
                </div>
                <div>
                    ({recipe.maxServings}人分在庫あり)
                </div>
                <div>
                    <strong>材料（1人前）:</strong>
                    <ul>
                        {recipe.stuffAndAmountArray.map((item, index) => (
                            <li key={index}>
                                {item.stuffName} - {item.amount}個
                            </li>
                        ))}
                    </ul>
                </div>
                
                {/* 在庫との差分を取るかのチェックボックス */}
                <div>
                    <label>
                        <input
                            type="checkbox"
                            checked={checked}
                            onChange={(e) => setChecked(e.target.checked)}
                        />
                        在庫との差分を取る
                    </label>
                </div>

                {/* レシピを追加する人数分を入力 */}
                <div>
                    <strong>人数:</strong>
                    <input
                        type="number"
                        min="1"
                        defaultValue={1}
                        onChange={(e) => {
                            setNumOfPeaple(parseInt(e.target.value, 10));
                        }}
                    />
                </div>

                {/* 買うものリストに追加するボタン */}
                <Box sx={{ mt: 2 }}>
                    <Button
                        variant="contained"
                        color="primary"
                        onClick={() => {
                                    toBuyApi.addByRecipe(recipe.recipeId, numOfPeople, checked);
                                    setOpenDialog(false);
                        }}
                    >
                    </Button>
                </Box>
            </DialogContent>

        </Dialog>
        : <></>
    );
}

export default AddByRecipeDialog;