import * as Yup from 'yup';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton, Grid } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { ReactElement } from 'react';
import Iconify from './Iconify';
import { Card } from '@mui/material';
import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from './hook-form';
import { Button } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';

// ----------------------------------------------------------------------

type DataContent = {
    code: string;
    name: string;
    id: number;
    status: string
};

type MuiDialogProps = {
  title?: {
    name?: string;
    icon?: string;
  };
  openDialog: boolean;
  setOpenDialog: Function;
  content?: ReactElement;
  maxWidth?: string;
  data?: DataContent | undefined;
  description: string;
};

type FormValuesProps = {
  value: string;
  active: boolean;
};


// ----------------------------------------------------------------------

const DialogUpdateStatus = ({ title, openDialog, setOpenDialog, data, maxWidth, content }: MuiDialogProps) => {
    const NewCorporateSchema = Yup.object().shape({
        reason: Yup.string().required('Corporate Status is required'),
    });

    const methods = useForm<FormValuesProps>({
      resolver: yupResolver(NewCorporateSchema),
    });

    const {
        reset,
        handleSubmit,
        formState: { isSubmitting },
    } = methods;


    useEffect(() => {
    if (openDialog === false) {
        reset();
    }
    }, [openDialog, reset]);

    const handleClose = () => {
        setOpenDialog(false);
    };

    const handleUpdate = (id: number, status: number) => {
         axios
        .put(`/corporates/${id}/activation`, {
          // service_code: service.service_code,
          active: status,
        })
        .then((res) => {
            handleClose()
            window.location.reload();
        })
        .catch((error) => {
          // console.log('asdasd', error.response.data.message)
          enqueueSnackbar(
            error.response.data.message ?? error.message ?? 'Failed Processing Request',
            { variant: 'error' }
          );
        });
    }
    let maxWidthDialog = 'md';

    if (maxWidth) {
        maxWidthDialog = maxWidth;
    }

    const onSubmit = async (row : any) => {
        console.log('test')
    };

  return (
    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={'sm'}>
      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
        <Stack direction="row" alignItems="center" justifyContent="space-between">
          {title?.icon ? (
            <Stack direction="row">
              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
              <Typography variant="h6">{title?.name}</Typography>
            </Stack>
          ) : (
            <Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
          )}
          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </Stack>
      </DialogTitle>
      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
        
            {/* <Stack paddingX={2} paddingY={2}>
                <Typography variant='subtitle1'>{description}</Typography>
            </Stack>
            <Card>
                <Grid container paddingX={2} paddingY={2}>
                    <Grid item xs={4} md={4}>
                        <Typography variant='inherit'>Code</Typography>
                    </Grid>
                    <Grid item xs={8}>
                        <Typography variant='subtitle1'>{data?.code}</Typography>
                    </Grid>
                    <Grid item xs={4} md={4} marginTop={2}>
                        <Typography variant='inherit'>Corporate Name</Typography>
                    </Grid>
                    <Grid item xs={8} marginTop={2}>
                        <Typography variant='subtitle1'>{data?.name}</Typography>
                    </Grid>
                </Grid>
            </Card>

            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
                Reason for update*
            </Typography>
            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
                <RHFSelect
                    name="reason"
                    label="Reason for update"
                    >
                    <option value=""></option>
                    <option value="Agreement changed">Agreement changed</option>
                    <option value="Endorsement">Endorsement</option>
                    <option value="Renewal">Renewal</option>
                    <option value="Worng Setting">Worng Setting</option>
                </RHFSelect>
            </FormProvider>
            <Stack
              alignItems="center"
              justifyContent="flex-end"
              direction={{ xs: 'column', md: 'row' }}
              spacing={2}
              marginTop={5}
            >
            <Stack direction="row" spacing={1}>
            <Button
                sx={{
                boxShadow: 'none',
                }}
                variant="outlined"
                size="medium"
                fullWidth={true}
                onClick={() => setOpenDialog(false)}
            >
                Cancel
            </Button>

            {data?.status == 1 ?  
            <Button
                sx={{
                    boxShadow: 'none',
                }}
                variant="contained"
                size="medium"
                fullWidth={true}
                color='error'
                onClick={() => handleUpdate(data?.id, 0)}
            >
                Inactive
            </Button>
            : <Button
                sx={{
                    boxShadow: 'none',
                }}
                variant="contained"
                size="medium"
                fullWidth={true}
                color='success'
                onClick={() => handleUpdate(data?.id, 1)}
            >
                Active
            </Button> }
            </Stack>
        </Stack> */}
        {content}
            
      </DialogContent>
    </Dialog>
  );
};

export default DialogUpdateStatus;
