import MuiDialog from "@/components/MuiDialog";
import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import { useFieldArray, useForm } from 'react-hook-form';
import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';

import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { LoadingButton } from '@mui/lab';
import AddIcon from '@mui/icons-material/Add';




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

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

    interface FormValuesProps extends Partial<DetailFinalLogType> {
        taxes: boolean;
        inStock: boolean;
    }

    const onSubmit = async (data: DetailFinalLogType) => {
        
        reset();
    }

    const methods = useForm<DetailFinalLogType>();
    const {
        reset,
        watch,
        control,
        setValue,
        getValues,
        setError,
        handleSubmit,
        resetField,
        formState: { isSubmitting },
    } = methods;

    const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})

    const getContent = () => (
        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
        <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
            <Grid container spacing={2}>
                {/* Location */}
                <Grid item xs={12}>
                    <Typography variant='subtitle1' marginBottom={1}>Location*</Typography>
                    <RHFTextField name="location" label="Location" required placeholder='Location' />
                </Grid>

                {/* Dokter */}
                <Grid item xs={12}>
                    <Typography variant='subtitle1' marginBottom={1}>Doctor*</Typography>
                    <RHFTextField name="doctor" label="Doctor" required placeholder='Doctor' />
                </Grid>

                <Grid item xs={12}>
                    <Typography variant='subtitle1' marginBottom={1}>Medical Record Number*</Typography>
                    <RHFTextField name="medical_record_number" label="Medical Record Number" required placeholder='Medical Record Number' />
                </Grid>

                <Grid item xs={12}>
                    <Typography variant='subtitle1' marginBottom={1}>Symptoms*</Typography>
                    <RHFTextField name="symptoms" label="Symptoms" placeholder='Symptoms' required/>
                </Grid>

                <Grid item xs={12}>
                    <Typography variant='subtitle1' marginBottom={1}>Sign*</Typography>
                    <RHFTextField name="sign" label="Sign" placeholder='Sign' required />
                </Grid>

                <Grid item xs={10.8}>
                    <Typography variant='subtitle1'>Diagnosis*</Typography>
                </Grid>
                
                <Grid item xs={1} justifyContent={'flex-end'}>
                    {/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
                        <Typography variant="button" display="block">Diagnosis</Typography>
                    </Button>
                </Grid>


                <Grid item xs={12}>
                    <RHFTextField name="Diagnosis" label="Diagnosis" placeholder='Diagnosis' required />
                </Grid>

                <Grid item xs={10.7}>
                    <Typography variant='subtitle1'>Examination and Result*</Typography>
                </Grid>
                
                <Grid item xs={1} justifyContent={'flex-end'}>
                    {/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
                        <Typography variant="button" display="block">Examination</Typography>
                    </Button>
                </Grid>

                <Grid item xs={6}>
                    <RHFTextField name="examination" label="Examination" placeholder='Examination' required />
                </Grid>
                <Grid item xs={6}>
                    <RHFTextField name="result" label="Result" placeholder='Result' required />
                </Grid>

                <Grid item xs={12}>
                    <Typography variant='subtitle1' marginBottom={1}>Invoice*</Typography>
                    <RHFTextField name="invoice" label="Invoice" placeholder='Invoice' required/>
                </Grid>
            </Grid>
        </Stack>

        <Stack direction="row" spacing={2}>
            <Grid container item xs={12} md={12} justifyContent="flex-end">
            <Button variant="outlined" color='primary' >Cancel</Button>
            <LoadingButton
                type="submit"
                variant="contained"
                size="medium"
                loading={isSubmitting}
                sx={{marginLeft:2}}
            >
                <Typography variant="subtitle2"> Save</Typography>
            </LoadingButton>
            </Grid>
        </Stack>
    </FormProvider>
    );

    


    return (
        <MuiDialog
          title={{name: "Add History of Hospital Care"}}
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          content={getContent()}
          maxWidth="xl"
        />
      );
}