user-front/src/core/components/PlateNumber.jsx

import {Box, Button, Drawer, FormHelperText, Stack, TextField} 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, disabled}) => {
    const t = useTranslations();
    const [plateDrawer, setPlateDrawer] = useState(false);
    const isErrorPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4)
    const isTouched = (formik.touched.plate_part1 || formik.touched.plate_part3 || formik.touched.plate_part4)
    return (
        <>
            <Stack direction={'row'}
                   sx={{
                       border: 1,
                       overflow: 'hidden',
                       borderColor: (isTouched && isErrorPlate) ? 'error.main' : 'divider',
                       borderRadius: 1
                   }}>
                <TextField
                    name={'plate_part4'}
                    type={'tel'}
                    value={formik.values.plate_part4}
                    disabled={disabled}
                    size={'small'}
                    placeholder={'xx'} sx={{flexGrow: 2, "& fieldset": {border: 'none'}}}
                    inputProps={{sx: {textAlign: 'center'}}}
                    onChange={(event) => event.target.value.length <= 2 ? formik.setFieldValue("plate_part4", event.target.value) : null}
                    onBlur={formik.handleBlur}
                    error={formik.touched.plate_part4 && Boolean(formik.errors.plate_part4)}
                />
                <TextField
                    name={'plate_part3'}
                    type={'tel'}
                    value={formik.values.plate_part3}
                    size={'small'}
                    disabled={disabled}
                    placeholder={'xxx'}
                    sx={{
                        flexGrow: 3,
                        borderLeft: 1,
                        borderRadius: 0,
                        borderColor: 'divider',
                        "& fieldset": {border: 'none'}
                    }}
                    inputProps={{sx: {textAlign: 'center'}}}
                    onChange={(event) => event.target.value.length <= 3 ? formik.setFieldValue("plate_part3", event.target.value) : null}
                    onBlur={formik.handleBlur}
                    error={formik.touched.plate_part3 && Boolean(formik.errors.plate_part3)}
                />
                <Box sx={{flexGrow: 1}}>
                    <Button
                        onClick={() => setPlateDrawer(true)}
                        sx={{height: '100%', borderRadius: 0, borderColor: 'divider'}}
                        size={'small'}
                        data-selected-word={formik.values.plate_part2}
                        disabled={disabled}
                        fullWidth
                    >
                        {plate_words.find(p => p.value === formik.values.plate_part2).name}
                    </Button>
                </Box>
                <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={() => {
                                    formik.setFieldValue("plate_part2", item.value)
                                    setPlateDrawer(false);
                                }}
                                sx={{
                                    width: "fit-content"
                                }}
                                variant="contained"
                            >
                                {item.name}
                            </Button>
                        ))}
                    </Box>
                </Drawer>
                <TextField
                    name={'plate_part1'}
                    type={'tel'}
                    disabled={disabled}
                    value={formik.values.plate_part1}
                    size={'small'}
                    placeholder={'xx'}
                    sx={{flexGrow: 2, "& fieldset": {border: 'none'}}}
                    inputProps={{sx: {textAlign: 'center'}}}
                    onChange={(event) => event.target.value.length <= 2 ? formik.setFieldValue("plate_part1", event.target.value) : null}
                    onBlur={formik.handleBlur}
                    error={true}
                />
                <Stack sx={{width: 24, borderLeft: 1, borderColor: 'divider'}}>
                    <Box sx={{flexGrow: 1, bgcolor: '#1ebc1e'}}></Box>
                    <Box sx={{flexGrow: 1, bgcolor: 'white'}}></Box>
                    <Box sx={{flexGrow: 1, bgcolor: '#f52121'}}></Box>
                </Stack>
            </Stack>
            <FormHelperText
                error={(isTouched && isErrorPlate)}>{(isTouched && isErrorPlate) ? `${t("LoanRequest.error_message_plate_number")}` : null}</FormHelperText>
        </>

    )
}
export default PlateNumber