aso/frontend/dashboard/src/pages/CustomerService/Request/Components/DialogConfirmation.tsx

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


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

export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
    const navigate = useNavigate();

    const [formData, setFormData] = useState({
        status: approve || '',
        no_identitas: requestLog?.no_identitas,
        keterangan: '',
        hak_kamar_pasien: '',
        penempatan_kamar: '',
    });

    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 handleSubmit = () => {
        axios
            .put(`customer-service/request/${requestLog?.id}`, formData)
            .then((response) => {
                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
                setOpenDialog(false);
                navigate('/custormer-service/request')
            })
            .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 resetForm = () => {
        setFormData({
            status: approve,
            no_identitas: requestLog?.no_identitas ?? '',
            keterangan: '',
            hak_kamar_pasien: '',
            penempatan_kamar: '',
        });
    };

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

    const handleNumericInput = (input: any) => {
        const numericInput = input.replace(/\D/g, '');
        return numericInput;
    };

    const handleKeyPress = (e:any) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            // Menghentikan default "Enter" (tidak membuat baris baru)
            e.preventDefault();

            // Menambahkan karakter baris baru
            handleChange('keterangan', `${formData.keterangan}\n`);
        }
    };
    

    const getContent = () => (
        <Stack spacing={1} marginTop={2}>
            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this request ?</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>No Identitas</Typography>
                            <TextField
                                label="No Identitas"
                                variant="outlined"
                                fullWidth
                                value={formData.no_identitas}
                                onChange={(e) => handleChange('no_identitas', handleNumericInput(e.target.value))}
                            />
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Keterangan</Typography>
                            <TextareaAutosize
                                aria-label="Keterangan"
                                minRows={3}
                                placeholder="Masukkan keterangan..."
                                value={formData.keterangan}
                                onChange={(e) => handleChange('keterangan', e.target.value)}
                                onKeyDown={handleKeyPress}
                                style={{
                                    width: '100%',
                                    padding: '8px',
                                    border: '1px solid #ced4da',
                                    borderRadius: '4px',
                                    fontSize: '14px',
                                }}
                            />
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Hak Kamar Pasien</Typography>
                            <TextField
                                label="Hak Kamar Pasien"
                                variant="outlined"
                                fullWidth
                                value={formData.hak_kamar_pasien}
                                onChange={(e) => handleChange('hak_kamar_pasien', e.target.value)}
                            />
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Penempatan Kamar</Typography>
                            <TextField
                                label="Penempatan Kamar"
                                variant="outlined"
                                fullWidth
                                value={formData.penempatan_kamar}
                                onChange={(e) => handleChange('penempatan_kamar', e.target.value)}
                            />
                        </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"
        />
      );
}