import { SubmitHandler, useForm } from 'react-hook-form';
import RoleService from '../../services/RoleService';
import { Box, Button, Modal, Select, TextField, Typography } from '@mui/material';
import { ICompany } from '../../interfaces/documents';
import { useCompanies } from '../../hooks/swrHooks';

interface Props {
    open: boolean;
    setOpen: (state: boolean) => void;
}

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    boxShadow: 24,
    borderRadius: 2,
    p: 4,
    display: "flex",
    flexDirection: "column",
    gap: "8px"
}

export default function CreateCompanyModal({
    open,
    setOpen
}: Props) {
    const { companies } = useCompanies()

    const { register, handleSubmit, formState: { errors } } = useForm<ICompany>({
        defaultValues: {
            name: '',
            fullname: '',
            description: '',
        }
    })

    const onSubmit: SubmitHandler<ICompany> = async (data) => {
        try {
            await RoleService.createRole(data)
        } catch (error) {
            console.error(error)
        }
    }

    return (
        <Modal
            open={open}
            onClose={() => setOpen(false)}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <form onSubmit={handleSubmit(onSubmit)}>

                <Box sx={style}>
                    <Typography variant="h6" component="h6" gutterBottom>
                        Создание компании
                    </Typography>

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Наименование"
                        required
                        {...register('name', { required: 'Наименование обязательно' })}
                        error={!!errors.name}
                        helperText={errors.name?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Полное наименование"
                        required
                        {...register('fullname', { required: 'Полное наименование обязательно' })}
                        error={!!errors.fullname}
                        helperText={errors.fullname?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Описание"
                        {...register('description')}
                        error={!!errors.description}
                        helperText={errors.description?.message}
                    />

                    {companies}

                    <Select
                        label="owner_id"
                        {...register('owner_id', { required: '' })}
                        error={!!errors.owner_id}
                    >
                        {/* {companies &&
                            companies.map((item, index) => {
                                <MenuItem>
                                    {index}
                                </MenuItem>
                            })
                        } */}
                    </Select>

                    <Box sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        gap: "8px"
                    }}>
                        <Button type="submit" variant="contained" color="primary">
                            Добавить роль
                        </Button>

                        <Button type="button" variant="outlined" color="primary" onClick={() => setOpen(false)}>
                            Отмена
                        </Button>
                    </Box>
                </Box>
            </form>
        </Modal>
    )
}