import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography, Select } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack, MenuItem } 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;
    requestLog: DetailFinalLogType|undefined; 
}

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

    const navigate = useNavigate();
    const [formData, setFormData] = useState({
        billing_no: requestLog?.billing_no,
        invoice_no: requestLog?.invoice_no,
        discharge_date: requestLog?.discharge_date,
        id: requestLog?.id,
        catatan: requestLog?.catatan,
        icdCodes:  requestLog?.diagnosis,
        reason: requestLog?.reason,
        type_of_member: requestLog?.type_of_member
    });

    const [error, setError] = useState(false);
    
    const [icdOptions, setIcdOptions] = useState([
        { value: '-', label: '-' }
    ]);

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

    useEffect(() => {
       // Ambil data dari API dan atur opsi ICD
        axios.get('diagnosis')
            .then((response) => {
                setIcdOptions(response.data.data);
            })
            .catch((error) => {
                console.error('Error fetching ICD options:', error);
            });
        
    }, []); // useEffect dijalankan hanya sekali saat komponen dimount
    
    useEffect(() => {
        setFormData({
            discharge_date: requestLog?.discharge_date|| '',
            billing_no: requestLog?.billing_no|| '',
            invoice_no: requestLog?.invoice_no|| '',
            id: requestLog?.id|| 0,
            catatan: requestLog?.catatan|| '',
            icdCodes: requestLog?.diagnosis|| [],
            reason: requestLog?.reason|| '',
            type_of_member: requestLog?.type_of_member|| '',
        });
    }, [requestLog]);


    const handleChange = (field, value) => {
        setFormData((prevData) => ({
            ...prevData,
            [field]: value,
        }));
        if (field === 'reason') {
            setIsReasonSelected(!!value);
        }

    };

    const handleApprove = () => {
        setFormData((prevData) => ({
            ...prevData,
        }));
        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 = () => {
        if (formData.type_of_member == "" && requestLog?.corporate_id == 5) {
            setError(true);
            alert('Silakan pilih Type Of Member sebelum mengirimkan data.');
        } 
        else if (isReasonSelected && formData.reason !== '') {
            axios
                .post(`customer-service/request/final-log`, formData)
                .then((response) => {
                    enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
                    setOpenDialog(false);
                    navigate('/custormer-service/final-log/detail/' + requestLog?.id)
                    window.location.reload()
                })
                .catch(({ response }) => {
                    enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
                });
        } else {
            setIsReasonSelected(false);
            alert('Silakan pilih alasan sebelum mengirimkan data.');
        }
    }
    
    const style1 = {
        color: '#919EAB',
        width: '30%'
    }
    const style2 = {
        width: '70%'
    }
    const marginBottom1 = {
        marginBottom: 1,
    }
    const marginBottom2 = {
        marginBottom: 2,
    }

    const resetForm = () => {
        setFormData({
            discharge_date: requestLog?.discharge_date ?? '',
            id: requestLog?.id ?? 0,
            billing_no: requestLog?.billing_no ?? '',
            invoice_no: requestLog?.invoice_no ?? '',
            catatan: requestLog?.catatan ?? '',
            icdCodes: requestLog?.diagnosis ?? [],
            reason: requestLog?.reason ?? '', 
            type_of_member: requestLog?.type_of_member ?? '',
        });
    };
    const [isReasonSelected, setIsReasonSelected] = useState(true);
    
    const handleCloseDialog = () => {
        setOpenDialog(false);
        resetForm();
    }

    const reasons = [
        { value: 'agreement', label: 'Agreement changed' },
        { value: 'endorsement', label: 'Endorsement' },
        { value: 'renewal', label: 'Renewal' },
        { value: 'wrong_setting', label: 'Wrong Setting' },
        // Add more options as needed
    ];

//    console.log(formData.type_of_member)

    const getContent = () => (
        <Stack spacing={1} marginTop={2}>
            <Typography variant="subtitle2">Are you sure to edit 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>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>Invoice Provider</Typography>
                            <TextField
                                label="Invoice Provider"
                                variant="outlined"
                                fullWidth
                                value={formData.invoice_no}
                                onChange={(e) => handleChange('invoice_no', e.target.value)}
                            />
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
                            <TextField
                                label="Billing Number"
                                variant="outlined"
                                fullWidth
                                value={formData.billing_no}
                                onChange={(e) => handleChange('billing_no', e.target.value)}
                            />
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Type Of Member*</Typography>
                            <Select
                                fullWidth
                                value={formData.type_of_member}
                                onChange={(e) => handleChange('type_of_member', e.target.value)}
                                variant="outlined"
                                displayEmpty
                                required
                                error={error}
                            >
                                <MenuItem value="" disabled>
                                    Type Member
                                </MenuItem>
                                <MenuItem value="OMT">OMT</MenuItem>
                                <MenuItem value="Non OMT">Non OMT</MenuItem>
                            </Select>
                        </Stack>
                        <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>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
                            <Autocomplete
                                options={reasons}
                                getOptionLabel={(option) => option.label}
                                fullWidth
                                value={reasons.find((r) => r.value == formData.reason) || null} // Use find to match the default value
                                onChange={(e, newValue) => handleChange('reason', newValue?.value)}
                                renderInput={(params) => (
                                    <TextField
                                        {...params}
                                        label="Reason"
                                        variant="outlined"
                                        required
                                        error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
                                        helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}

                                    />
                                )}
                            />
                        </Stack>
                    </Card>
                </Grid>
                <DialogActions>
                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
                    <Button color="primary"  variant="contained" onClick={() => handleApprove()}>Update</Button>
                </DialogActions>
        </Stack>
      );


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