import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import AccessibleIcon from '@mui/icons-material/Accessible';
import {useState} from "react";

const plate_words = [
    {
        id: 1,
        value: "الف",
        name: "الف"
    },
    {
        id: 2,
        value: "ب",
        name: "ب"
    },
    {
        id: 3,
        value: "پ",
        name: "پ"
    },
    {
        id: 4,
        value: "ت",
        name: "ت"
    },
    {
        id: 5,
        value: "ث",
        name: "ث"
    },
    {
        id: 6,
        value: "ج",
        name: "ج"
    },
    {
        id: 7,
        value: "د",
        name: "د"
    },
    {
        id: 8,
        value: "ز",
        name: "ز"
    },
    {
        id: 9,
        value: "س",
        name: "س"
    },
    {
        id: 10,
        value: "ش",
        name: "ش"
    },
    {
        id: 11,
        value: "ص",
        name: "ص"
    },
    {
        id: 12,
        value: "ط",
        name: "ط"
    },
    {
        id: 13,
        value: "ع",
        name: "ع"
    },
    {
        id: 14,
        value: "ف",
        name: "ف"
    },
    {
        id: 15,
        value: "ق",
        name: "ق"
    },
    {
        id: 16,
        value: "ک",
        name: "گ"
    },
    {
        id: 17,
        value: "ل",
        name: "ل"
    },
    {
        id: 18,
        value: "م",
        name: "م"
    },
    {
        id: 19,
        value: "ن",
        name: "ن"
    },
    {
        id: 20,
        value: "و",
        name: "و"
    },
    {
        id: 21,
        value: "ه",
        name: "ه"
    },
    {
        id: 22,
        value: "ی",
        name: "ی"
    },
    {
        id: 23,
        value: "*",
        name: <AccessibleIcon/>
    },
]
const PlateNumber = ({formik}) => {
    const t = useTranslations();
    const [plateDrawer, setPlateDrawer] = useState(false);
    const [selectedWordName, setSelectedWordName] = useState("الف");
    const [selectedWordValue, setSelectedWordValue] = useState("");

    return (
        <>
            <Box sx={{
                display: "flex",
                width: "fit-content",
                flexDirection: "row",
                alignItems: "end",
                justifyContent: "end",
                gap: 0.75
            }}>
                <Box sx={{display: "flex", flexDirection: "column", textAlign: "center"}}>
                    <Typography variant="caption" sx={{fontWeight: 500}}>
                        ایران
                    </Typography>
                    <TextField
                        sx={{width: "50px"}}
                        name="plate_part4"
                        variant="outlined"
                        size="small"
                        type='number'
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("plate_part4")}
                    />
                </Box>
                <Box>
                    <TextField
                        sx={{width: "70px"}}
                        name="plate_part3"
                        variant="outlined"
                        size="small"
                        type='number'
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("plate_part3")}
                    />
                </Box>
                <Box>
                    {/*<TextField*/}
                    {/*    sx={{width: "50px"}}*/}
                    {/*    name="plate_part2"*/}
                    {/*    variant="outlined"*/}
                    {/*    type={'number'}*/}
                    {/*    size="small"*/}
                    {/*    onChange={formik.handleChange}*/}
                    {/*    onBlur={formik.handleBlur("plate_part1")}*/}
                    {/*/>*/}
                    <Button onClick={() => setPlateDrawer(true)}
                            sx={{
                                borderColor: "divider",
                                fontSize: "16px"
                            }}
                            variant="outlined"
                            data-selected-word={selectedWordValue}
                    >{selectedWordName}</Button>
                    <Drawer
                        anchor={"bottom"}
                        open={plateDrawer}
                        onClose={() => setPlateDrawer(false)}
                    >
                        <Box sx={{
                            display: "flex",
                            flexWrap: "wrap",
                            mx: "auto",
                            my: 2,
                            gap: 2,
                            width: "60%",
                            justifyContent: "center"
                        }}>
                            {plate_words.map((item) => (
                                <Button
                                    key={item.id}
                                    onClick={() => {
                                        setSelectedWordName(item.name);
                                        setSelectedWordValue(item.value);
                                        setPlateDrawer(false);
                                    }}
                                    sx={{
                                        width: "fit-content"
                                    }}
                                    variant="contained"
                                >
                                    {item.name}
                                </Button>
                            ))}
                        </Box>
                    </Drawer>
                </Box>
                <Box>
                    <TextField
                        sx={{width: "50px"}}
                        name="plate_part1"
                        variant="outlined"
                        type='number'
                        size="small"
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("plate_part1")}
                    />
                </Box>
            </Box>
            <FormHelperText>{t("error_message_plate_number")}</FormHelperText>
        </>

    )
}
export default PlateNumber