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


type DialogDeleteType = {
    openDialog: boolean;
    setOpenDialog: any;
    onSubmit?: void;
    id: number|undefined;
    path: string; 
}

export default function DialogDeleteFileLog({id, path,  setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
    const style1 = {
        color: '#919EAB',
        width: '30%'
    }
    const style2 = {
        width: '70%'
    }
    const marginBottom2 = {
        marginBottom: 2,
    }

    const handleCloseDialog = () => {
        setOpenDialog(false);
        resetForm();
    }

    const [isReasonSelected, setIsReasonSelected] = useState(false);
   
    const reasons = [
        { value: 'Wrong Setting', label: 'Wrong Setting' },
        { value: 'Hospital Request', label: 'Hospital Request' }
    ];
    const [formData, setFormData] = useState({
        path: path,
        reason: null
    });

    const resetForm = () => {
        setFormData({
            reason: null,
            path: path
        });
    };

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

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

    };

    const handleSubmit = () => {
        if (isReasonSelected && formData.reason !== '') {
            console.log(formData)
            axios
            .post(`customer-service/request/${id}/delete_file`, formData)
            .then((response) => {
                enqueueSnackbar('File LOG has Deleted', { variant: 'success' });
                setOpenDialog(false);
                window.location.reload()
            })
            .catch(({ response }) => {
                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
            });
        } else {
            setIsReasonSelected(false);
            alert('Silakan pilih alasan sebelum menghapus data.');
        }
        
    }


    const getContent = () => (
        <Stack spacing={1} marginTop={2}>
            <Typography variant="subtitle2" marginBottom={4}>Are you sure to delete this file Final LOG ?</Typography>
            <br/>
            <Grid item xs={12} md={12} marginTop={2}>
                <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>
            </Grid>
            <DialogActions>
                <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
                <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
            </DialogActions>
        </Stack>
    );


    return (
        <MuiDialog
          title={{name: "Delete File Final LOG"}}
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          content={getContent()}
          maxWidth="xs"
        />
      );
}