import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
import {useTranslations} from "next-intl";

const PersonalInfo = ({formik}) => {
    const t = useTranslations();

    const genderList = [
        {id: 1, name_en: "male", name_fa: "مرد"},
        {id: 2, name_en: "female", name_fa: "زن"}
    ]

    return (
        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
            <Grid item xs={12} sm={6} md={4}>
                <TextField
                    name="full_name"
                    label={t("ExpertMangement.text_field_full_name")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.full_name}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.full_name && !!formik.errors.full_name}
                    helperText={formik.touched.full_name && formik.errors.full_name ? formik.errors.full_name : null}
                    sx={{width: "100%"}}
                />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
                <TextField
                    name="national_id"
                    label={t("ExpertMangement.text_field_national_id")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.national_id}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.national_id && !!formik.errors.national_id}
                    helperText={formik.touched.national_id && formik.errors.national_id ? formik.errors.national_id : null}
                    sx={{width: "100%"}}
                />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
                <TextField
                    name="phone_number"
                    label={t("ExpertMangement.text_field_phone_number")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.phone_number}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.phone_number && !!formik.errors.phone_number}
                    helperText={formik.touched.phone_number && formik.errors.phone_number ? formik.errors.phone_number : null}
                    sx={{width: "100%"}}
                />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
                <TextField
                    name="email"
                    label={t("ExpertMangement.text_field_email")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.email}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.email && !!formik.errors.email}
                    helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
                    sx={{width: "100%"}}
                />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
                <TextField
                    name="telephone_id"
                    label={t("ExpertMangement.text_field_telephone_id")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.telephone_id}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.telephone_id && !!formik.errors.telephone_id}
                    helperText={formik.touched.telephone_id && formik.errors.telephone_id ? formik.errors.telephone_id : null}
                    sx={{width: "100%"}}
                />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
                <FormControl
                    error={formik.touched.gender && !!formik.errors.gender}
                    sx={{width: "100%", mt: 2}}
                    size="small"
                >
                    <InputLabel>{t("ExpertMangement.text_field_gender")}</InputLabel>
                    <Select
                        name="gender"
                        label={t("ExpertMangement.text_field_gender")}
                        value={formik.values.gender}
                        onChange={(e) => {
                            formik.setFieldValue("gender", e.target.value);
                        }}
                        inputProps={{
                            "data-testid": "input-gender"
                        }}
                        data-testid="select-box"
                        SelectDisplayProps={{"data-testid": 'option-opener-gender'}}
                        onBlur={formik.handleBlur}
                        fullWidth
                        variant="outlined"
                    >
                        {(
                            genderList.map((item) => (
                                <MenuItem key={item.id} value={item.name_en}>
                                    {item.name_fa}
                                </MenuItem>
                            ))
                        )}
                    </Select>
                    <FormHelperText>
                        {formik.touched.gender && formik.errors.gender ? formik.errors.gender : ""}
                    </FormHelperText>
                </FormControl>
            </Grid>
        </Grid>
    )
}
export default PersonalInfo