import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";


type DialogConfirmationType = {
    openDialog: boolean;
    setOpenDialog: any;
    onSubmit?: void;
    approve: string;
    requestLog: DetailFinalLogType|undefined; 
}

export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {

    const navigate = useNavigate();
    const [formData, setFormData] = useState({
        discharge_date: requestLog?.discharge_date,
        id: requestLog?.id,
        status: approve || '',
        catatan: '',
        icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.value, label: diagnosis.label })) : []
    });
    
    const [icdOptions, setIcdOptions] = useState([
        { value: '-', label: '-' }
    ]);

    const [searchIcd, setSearchIcd] = useState('');

    useEffect(() => {
        // Update formData setiap kali approve berubah
        setFormData(prevData => ({
          ...prevData,
          status: approve || '',
        }));
    }, [approve]);

    const handleChange = (field, value) => {
        setFormData((prevData) => ({
            ...prevData,
            [field]: value,
        }));
    };

    const handleApprove = () => {
        setFormData((prevData) => ({
            ...prevData,
            status: approve,
        }));
        handleSubmit();
    };

    const handleSearch = (search) => {
        setSearchIcd(search);
        axios.get('diagnosis?search=' + search)
            .then((response) => {
                setIcdOptions(response.data.data);
            })
            .catch((error) => {
                console.error('Error fetching ICD options:', error);
            });
    }

    const handleSubmit = () => {
        axios
            .post(`customer-service/request/final-log`, formData)
            .then((response) => {
                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
                setOpenDialog(false);
                if (requestLog?.service_type === 'Inpatient') {
                    navigate('/case_management/inpatient_monitoring');
                } else {
                    navigate('/custormer-service/final-log');
                }
            })
            .catch(({ response }) => {
                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
            });
    }

    const style1 = {
        color: '#919EAB',
        width: '30%'
    };
    const style2 = {
        width: '70%'
    };
    const marginBottom1 = {
        marginBottom: 1,
    };
    const marginBottom2 = {
        marginBottom: 2,
    };
    const handleCloseDialog = () => {
        setOpenDialog(false);
    };

    const getContent = () => (
        <Stack spacing={1} marginTop={2}>
            <Typography variant="subtitle2">Are you sure to {approve === 'approved' ? 'approve' : 'decline'} this final log?</Typography>
            <Grid item xs={12} md={12} marginTop={4}>
                <Card sx={{ padding: 2, marginTop: 2 }}>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Member Of Type</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.type_of_member}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
                    </Stack>
                </Card>

                <Card sx={{ padding: 2, marginTop: 2 }}>
                    <Stack direction='row' spacing={2} sx={marginBottom2}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
                        <TextField
                            label="Discharge Date"
                            variant="outlined"
                            fullWidth
                            type="date"
                            value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
                            onChange={(e) => handleChange('discharge_date', e.target.value)}
                        />
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom2}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
                        <TextField
                            label="Catatan"
                            variant="outlined"
                            fullWidth
                            value={formData.catatan}
                            onChange={(e) => handleChange('catatan', e.target.value)}
                        />
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom2}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
                        <Autocomplete
                            multiple
                            options={icdOptions}
                            getOptionLabel={(option) => option.label}
                            fullWidth
                            value={formData.icdCodes}
                            onChange={(e, newValues) => handleChange('icdCodes', newValues)}
                            inputValue={searchIcd}
                            onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                    label="Diagnosis ICD - X"
                                    variant="outlined"
                                />
                            )}
                        />
                    </Stack>
                </Card>
            </Grid>
            <DialogActions>
                <Button variant="outlined" sx={{ color: '#212B36', borderColor: '#919EAB52' }} onClick={handleCloseDialog}>Cancel</Button>

                {approve === 'approved' ? (
                    <Button color="primary" variant="contained" onClick={handleApprove}>Approve</Button>
                ) : (
                    <Button color="error" variant="contained" onClick={handleApprove}>Decline</Button>
                )}
            </DialogActions>
        </Stack>
    );

    return (
        <MuiDialog
            title={{ name: "Confirmation" }}
            openDialog={openDialog}
            setOpenDialog={setOpenDialog}
            content={getContent()}
            maxWidth="xl"
        />
    );
}