import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
import {useTranslations} from "next-intl";
import useRequest from "@/lib/app/hooks/useRequest";
import useRole from "@/lib/app/hooks/useRole";
import {log} from "next/dist/server/typescript/utils";

const PositionAndRole = ({formik}) => {
    const t = useTranslations();
    const requestServer = useRequest()
    const {roleList, isLoadingRoleList, errorRoleList} = useRole();

    return (
        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
            <Grid item xs={12} sm={6}>
                <TextField
                    name="position"
                    label={t("ExpertMangement.text_field_position")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.position}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.position && !!formik.errors.position}
                    helperText={formik.touched.position && formik.errors.position ? formik.errors.position : null}
                    sx={{width: "100%"}}
                />
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl
                    error={formik.touched.roles && !!formik.errors.roles}
                    sx={{width: "100%", mt: 2}}
                    size="small"
                >
                    <InputLabel>{t("ExpertMangement.text_field_roles")}</InputLabel>
                    <Select
                        name="roles"
                        label={t("ExpertMangement.text_field_roles")}
                        disabled={isLoadingRoleList || errorRoleList}
                        value={isLoadingRoleList || errorRoleList ? "" : formik.values.roles}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        fullWidth
                        inputProps={{
                            "data-testid": "input-role-id"
                        }}
                        data-testid="select-box"
                        SelectDisplayProps={{"data-testid": 'option-opener-role'}}
                        variant="outlined"
                    >
                        {isLoadingRoleList ? (
                            <MenuItem>
                                {t("ExpertMangement.text_field_loading_roles_list")}
                            </MenuItem>
                        ) : errorRoleList ? (
                            <MenuItem>
                                {t("ExpertMangement.text_field_error_fetching_roles")}
                            </MenuItem>
                        ) : (
                            roleList.map((item) => (
                                <MenuItem key={item.id} value={item.id}>
                                    {item.name_fa}
                                </MenuItem>
                            ))
                        )}
                    </Select>
                    <FormHelperText>
                        {formik.touched.roles && formik.errors.roles ? formik.errors.roles : ""}
                    </FormHelperText>
                </FormControl>
            </Grid>
        </Grid>
    )
}
export default PositionAndRole