import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { useEffect, useState } from 'react';
import { Box, Grid } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
import { useForm } from 'react-hook-form';
import { FormProvider } from '@/components/hook-form';
import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';

/**
 * Custom Style
 * =====================================================
 */
const BootstrapDialog = styled(Dialog)(({ theme }) => ({

}));

/**
 * Utils, Types, Functions
 * ============================================
 */
import palette from '@/theme/palette';
import { BenefitConfigurationListType } from '../Model/Types';
import { editBenefitConfiguration } from '../Model/Functions';

/**
 * Props
 * =====================================================
 */
type Props = {
    data?: BenefitConfigurationListType,
    isOpen: boolean,
    handleCancleProp: () => void,
    handleSuccessProp: () => void,
};

export default function BenefitConfigurationDialog({ ...props }: Props) {

    // setup form
    // ====================================
    const defaultValues: BenefitConfigurationListType = {
        claim_service_benefits_id: 0,
        benefit_name: '',
        amount_incurred: 0,
        amount_approved: 0,
        amount_not_approved: 0,
        excess_paid: 0,
    };

    const validationSchema = Yup.object().shape({
        amount_incurred     : Yup.string().typeError('').required(''),
        amount_approved     : Yup.string().typeError('').required(''),
        amount_not_approved : Yup.string().typeError('').required(''),
        excess_paid         : Yup.string().typeError('').required(''),
    });

    const methods = useForm<any>({
        resolver: yupResolver(validationSchema),
        defaultValues
    });

    const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;

    console.log(errors);
    console.log(watch());

    // Submit Form
    // =====================================
    const submitHandler = async (data: BenefitConfigurationListType) => {
        let response = await editBenefitConfiguration(data);

        if (response == true) {
            props.handleSuccessProp()
            props.handleCancleProp()
        }
    }

    // Set Value Form
    // =====================================
    useEffect(() => {
        setValue('claim_service_benefits_id', props.data?.claim_service_benefits_id)
        setValue('amount_incurred', props.data?.amount_incurred)
        setValue('amount_approved', props.data?.amount_approved)
        setValue('amount_not_approved', props.data?.amount_not_approved)
        setValue('excess_paid', props.data?.excess_paid)
    }, [props.data])

    return (
        <Dialog
            onClose={props.handleCancleProp}
            aria-labelledby="customized-dialog-title"
            open={props.isOpen}
            maxWidth={'md'}
        >
            <FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
            <DialogTitle sx={{ m: 0, p: 2, background: palette.light.primary.main, color: palette.light.grey[0], display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} id="customized-dialog-title">
                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
                    Client Benefit Configuration
                </Typography>

                <IconButton
                    aria-label="close"
                    onClick={props.handleCancleProp}
                    sx={{color: (theme) => theme.palette.grey[0]}}
                >
                    <CloseIcon />
                </IconButton>
            </DialogTitle>

            <DialogContent sx={{ p: '0px' }}>
                <Box sx={{ py: '24px', px: '32px'}}>
                    <Box sx={{ p: '24px', border: '1px solid rgba(0,0,0,0.125)', borderRadius: '12px'}}>
                        <Grid container spacing={3}>
                            {/* Benefit Name */}
                            <Grid item xs={12}>
                                <Typography variant="body2" sx={{ fontWeight: 'bold'}}>
                                    {props.data?.benefit_name}
                                </Typography>
                            </Grid>

                            <Grid item xs={12}>
                                <Grid container spacing={3}>
                                    <Grid item xs={3}>
                                        <Grid container spacing={2}>
                                            <Grid item xs={12}>
                                                <Typography variant="body2" component="div">
                                                    Amount Incurred*
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                                <RHFTextFieldMoney
                                                    id="amount_incurred"
                                                    name='amount_incurred'
                                                    placeholder='Amount Incurred'
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={3}>
                                        <Grid container spacing={2}>
                                            <Grid item xs={12}>
                                                <Typography variant="body2" component="div">
                                                    Amount Approved*
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                                <RHFTextFieldMoney
                                                    id="amount_approved"
                                                    name='amount_approved'
                                                    placeholder='Amount Approved'
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={3}>
                                        <Grid container spacing={2}>
                                            <Grid item xs={12}>
                                                <Typography variant="body2" component="div">
                                                    Amount Not Approved*
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                                <RHFTextFieldMoney
                                                    id="amount_not_approved"
                                                    name='amount_not_approved'
                                                    placeholder='Amount Not Approved'
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={3}>
                                        <Grid container spacing={2}>
                                            <Grid item xs={12}>
                                                <Typography variant="body2" component="div">
                                                    Excess Paid*
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
                                                <RHFTextFieldMoney
                                                    id="excess_paid"
                                                    name='excess_paid'
                                                    placeholder='Excess Paid'
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Box>
                </Box>
            </DialogContent>

            <DialogActions>
                <Button variant='outlined' onClick={props.handleCancleProp} aria-label="close">
                    Cancle
                </Button>
                <LoadingButton disabled={!isDirty} type="submit" variant="contained" loading={isSubmitting}>
                    Save Changes
                </LoadingButton>
            </DialogActions>
            </FormProvider>
        </Dialog>
    );
}