import MuiDialog from "@/components/MuiDialog";
import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { replace } from "lodash";
import { ClaimListType } from "../Model/Types";
import Label from "@/components/Label";


type DialogConfirmationType = {
    openDialog: boolean;
    setOpenDialog: any;
    onSubmit?: void;
    row: ClaimListType;
}

export default function DialogConfirmation({ setOpenDialog, openDialog, row} : DialogConfirmationType ) {

    const navigate = useNavigate();
    const handleSubmit = () => {
        axios
            .post(`case_management/daily_monitoring/detail/${row.code}/update-status`)
            .then((response) => {
                enqueueSnackbar('Close Monitoring Success', { variant: 'success' });
                setOpenDialog(false);
                navigate(`/case_management/daily_monitoring/${row.member_id}/claims`, { replace: true })
                window.location.reload();
            })
            .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 handleCloseDialog = () => {
        setOpenDialog(false);
    }

    const getContent = () => (
        <Stack spacing={1} marginTop={2}>
            <Typography variant="subtitle2">Are you sure to closed this monitoring ?</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>Name</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{row.name}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Code</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{row.code}</Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Admision Date</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom> <Label variant="ghost">{fDate(row.admission_date)}</Label></Typography>
                        </Stack>
                    </Card>
                </Grid>
                <DialogActions>
                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
                    <Button color="primary"  variant="contained" onClick={handleSubmit}>Yes</Button>
                 
                    
                </DialogActions>
        </Stack>
      );


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