import { useState } from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    TextField,
    Button,
    Box,
} from '@mui/material';
import { NewStock } from '../types/types';
import BuyExpDateSelect from './BuyExpDateSelect';
/*import DatePicker, { registerLocale } from 'react-datepicker';
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/

/*// 日付をyyyy-MM-dd形式で返す関数
const formatDateLocal = (date: Date) => {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
};*/

// 日本語ロケールを登録
//registerLocale('ja', ja);

const BuyDialog = ({
    openDialog,
    setOpenDialog,
    stuffName,
    newStock,
    setNewStock,
    onSubmit,
}: {
    openDialog: boolean,
    setOpenDialog: (open: boolean) => void,
    stuffName: string,
    newStock: NewStock,
    setNewStock: (tobuy: NewStock) => void,
    onSubmit: () => void,
}) => {

    return (


        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
        >
            <DialogTitle>在庫登録</DialogTitle>
            <DialogContent>
                <Box sx={{ pt: 1 }}>
                    {/* 材料名表示 */}
                    <TextField
                        margin="dense"
                        label="材料名"
                        fullWidth
                        value={stuffName}
                        disabled
                        sx={{ marginBottom: 2, marginTop: 2 }}
                    />

                    {/* 価格入力フィールド */}
                    <TextField
                        autoFocus
                        margin="dense"
                        label="価格"
                        fullWidth
                        value={newStock.price}
                        onChange={(e) => {
                            const value = e.target.value;
                            if (/^\d*$/.test(value)) {
                                setNewStock({ ...newStock, price: value })
                            };
                        }}
                        sx={{ marginBottom: 2 }}
                    />

                    {/* 価格入力フィールド */}
                    <TextField
                        autoFocus
                        margin="dense"
                        label="購入数量"
                        fullWidth
                        value={newStock.amount}
                        onChange={(e) => {
                            const value = e.target.value;
                            if (/^\d*$/.test(value)) {
                                setNewStock({ ...newStock, amount: value })
                            };
                        }}
                        sx={{ marginBottom: 2 }}
                    />

                    {/* 購入日・賞味期限入力 */}
                    <BuyExpDateSelect newStock={newStock} setNewStock={({buyDate, expDate}) => setNewStock({...newStock, buyDate, expDate}) } />

                    {/* 購入店舗入力フィールド  */}
                    <TextField
                        margin="dense"
                        label="店舗"
                        value={newStock.shop}
                        onChange={(e) => setNewStock({ ...newStock, shop: e.target.value })}
                        fullWidth
                    />
                </Box>
            </DialogContent>
            <DialogActions>
                <Button onClick={() => setOpenDialog(false)}>キャンセル</Button>
                <Button onClick={() => { onSubmit() }} variant="contained">登録</Button>
            </DialogActions>
        </Dialog>

    )
}

export default BuyDialog;