import BaseButton from '@/components/ui-kit/BaseButton';
import BaseInput from '@/components/ui-kit/BaseInput';
import BaseModal from '@/components/ui-kit/BaseModal';
import BaseReactSelect from '@/components/ui-kit/BaseReactSelect';
import { staff_requests } from '@/data/staff/staff.requests';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { notifyUnknownError } from '@/services/notification';
import { Box, Grid, Stack, Typography, styled } from '@mui/material';
import React, { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';

const StyledBox = styled(Box)`
    .title {
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 28px;
    }

    .label {
        color: #5d5850;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 8px;
    }
`;

type Props = {
    onClose: () => void;
    open: boolean;
    onSuccess: () => void;
};

const CreateStaffModal = ({ onClose, open, onSuccess }: Props) => {
    const t = useMyTranslation();
    const [loading, setLoading] = useState(false);

    const {
        register,
        control,
        handleSubmit,
        formState: { errors },
    } = useForm<{
        username: string;
        password: string;
        fullName: string;
        role: string;
        phone: string;
        address: string;
    }>({
        defaultValues: {
            role: 'CHINA_WORKER',
        },
    });

    const onSubmit = handleSubmit(async values => {
        try {
            setLoading(true);
            await staff_requests.create({ ...values });
            onSuccess();
        } catch (error) {
            notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    });

    const ROLES = [
        {
            label: 'CHINA_WORKER',
            value: 'CHINA_WORKER',
        },
        {
            label: 'UZB_WORKER',
            value: 'UZB_WORKER',
        },
        // {
        //     label: 'ADMIN',
        //     value: 'ADMIN',
        // },
    ];

    return (
        <BaseModal maxWidth='600px' onClose={onClose} open={open}>
            <StyledBox component={'form'} onSubmit={onSubmit}>
                <Typography className='title'>{t('create_staff')}</Typography>

                <Grid container spacing={3} mb={3}>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('fullName')}</Typography>
                        <BaseInput
                            error={!!errors.fullName}
                            mainBorderColor='#D8D8D8'
                            {...register('fullName', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('role')}</Typography>
                        <Controller
                            name='role'
                            control={control}
                            render={({ field, fieldState, formState }) => {
                                return (
                                    <BaseReactSelect
                                        value={ROLES.find(p => p.value === field.value)}
                                        onChange={(newValue: any) => {
                                            field.onChange(newValue.value);
                                        }}
                                        onBlur={field.onBlur}
                                        name={field.name}
                                        options={ROLES}
                                    />
                                );
                            }}
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('username')}</Typography>
                        <BaseInput
                            error={!!errors.username}
                            mainBorderColor='#D8D8D8'
                            {...register('username', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('password')}</Typography>
                        <BaseInput
                            error={!!errors.password}
                            mainBorderColor='#D8D8D8'
                            {...register('password', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('address')}</Typography>
                        <BaseInput
                            error={!!errors.address}
                            mainBorderColor='#D8D8D8'
                            {...register('address', { required: true })}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={6}>
                        <Typography className='label'>{t('phone')}</Typography>
                        <BaseInput
                            error={!!errors.phone}
                            type='number'
                            mainBorderColor='#D8D8D8'
                            {...register('phone', { required: true })}
                            fullWidth
                        />
                    </Grid>
                </Grid>

                <Stack direction={'row'} justifyContent={'flex-start'} alignItems={'center'} spacing={3}>
                    <BaseButton colorVariant='blue' type='submit' loading={loading}>
                        {t('create')}
                    </BaseButton>
                    <BaseButton variant='outlined' type='button' colorVariant='blue-outlined' disabled={loading} onClick={onClose}>
                        {t('cancel')}
                    </BaseButton>
                </Stack>
            </StyledBox>
        </BaseModal>
    );
};

export default CreateStaffModal;
