import * as Yup from 'yup';
import { useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { yupResolver } from '@hookform/resolvers/yup';
import { Controller, useForm } from 'react-hook-form';
import React, { useEffect, useMemo, useState } from 'react';
import axios from '../../utils/axios';
import { FormProvider, RHFTextField } from '../../components/hook-form';
import {
  Autocomplete,
  Button,
  Grid,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableRow,
  TextField,
  Typography,
  useTheme,
  List,
  ListItem,
  IconButton,
  ListItemAvatar,
  Avatar,
  ListItemText,
} from '@mui/material';
import Iconify from '../../components/Iconify';
import { LoadingButton } from '@mui/lab';
import { fCurrency } from '../../utils/formatNumber';
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
import { Add, DeleteOutline } from '@mui/icons-material';

type Props = {
  isEdit: boolean;
  currentClaim?: any;
};

export default function ClaimForm({ isEdit, currentClaim }: Props) {
  const navigate = useNavigate();

  const { enqueueSnackbar } = useSnackbar();

  const NewCorporateSchema = Yup.object().shape({
    name: Yup.string().required('Name is required'),
    code: Yup.string().required('Corporate Code is required'),
    active: Yup.boolean().required('Corporate Status is required'),
    // file: Yup.boolean().required('Corporate Status is required'),
  });

  const defaultValues = useMemo(
    () => ({
      member: currentClaim?.member || {},
      member_id: currentClaim?.member_id || null,
      diagnosis_id: currentClaim?.diagnosis_id || null,
      total_claim: currentClaim?.total_claim || 0,
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [currentClaim]
  );

  const methods = useForm<any>({
    resolver: yupResolver(NewCorporateSchema),
    defaultValues,
  });
  const {
    reset,
    watch,
    control,
    setValue,
    getValues,
    setError,
    handleSubmit,
    formState: { isSubmitting },
  } = methods;

  const values = watch();

  const [isCheckingLimit, setIsCheckingLimit] = useState(false);
  const [isEligible, setIsEligible] = useState(false);
  const [memberBenefits, setMemberBenefits] = useState([]);
  const [diagnosisOption, setDiagnosisOption] = useState([]);
  const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
  const [member, setMember] = useState({})

  
  useEffect(() => {
    console.log('defaultValues', defaultValues);
    if (isEdit && currentClaim) {
      reset(defaultValues);
      setMember(defaultValues.member)
    }
    if (!isEdit) {
      reset(defaultValues);
      setMember(defaultValues.member)
    }
  }, [isEdit, currentClaim]);

  const fileSelected = (event, type) => {
    const files = event.target.files;
    const currentFiles = getValues(`uploaded_files.${type}`) ?? [];

    setValue(`uploaded_files.${type}`, [...currentFiles, ...files]);

    console.log('currentFiles', getValues('uploaded_files'));
  };

  const memberSelected = (member) => {
    setMember(member)
  };

  const checkLimit = async () => {
    console.log('CHECKING LIMIT');
  };

  const onSubmit = async (data: any) => {
    try {
      if (!isEdit) {
        const response = await axios.post('/claims', data);
      } else {
        const response = await axios.put('/claims/' + currentClaim?.id ?? '', data);
      }
      reset();
      enqueueSnackbar(
        !isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
        { variant: 'success' }
      );
      navigate('/claims');
    } catch (error: any) {
      if (error && error.response.status === 422) {
        for (const [key, value] of Object.entries(error.response.data.errors)) {
          setError(key, { message: value[0] });
          enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
        }
      } else {
        enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
      }
    }

    const ascent = document?.querySelector('ascent');
    if (ascent != null) {
      ascent.innerHTML = '';
    }
  };

  function generate(files, element: React.ReactElement) {
    return files.map((value) =>
      React.cloneElement(element, {
        key: value,
      })
    );
  }

  const headStyle = {};
  return (
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
      <Stack spacing={3}>
        <Typography variant="h6">Member</Typography>

        <Stack spacing={2} direction="row">
          <Grid item xs={12}>
            <RHFTextField
              name="member_id"
              label="Member"
              variant="outlined"
              fullWidth
              value={member?.name || ''}
              InputProps={{
                readOnly: true,
              }}
              onClick={() => {
                if (!isEdit) setIsMemberDialogOpen(true);
                if (isEdit) enqueueSnackbar('Cannot Change Member', { variant: 'error' });
              }}
            />
          </Grid>
          {/* <Grid item xs={2}>
                    <Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
                      setIsMemberDialogOpen(true)
                    }}>
                      {member ? 'Change' : 'Search'}
                    </Button>
                  </Grid> */}
        </Stack>

        {member?.id && (
          <Stack>
            <Grid container spacing={2}>
              <Grid item xs={12} md={6}>
                <Table border="light-700">
                  <TableBody>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Name
                      </TableCell>
                      <TableCell align="left">{member?.full_name}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        DOB
                      </TableCell>
                      <TableCell align="left">
                        {member?.birth_date} ({member?.age + ' years'})
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Marital Status
                      </TableCell>
                      <TableCell align="left">{member?.marital_status}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Record Type
                      </TableCell>
                      <TableCell align="left">{member?.record_type}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Principal ID
                      </TableCell>
                      <TableCell align="left">
                        {member?.principal_id} (
                        {member?.relation_with_principal})
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </Grid>
              <Grid item xs={12} md={6}>
                <Table border="light-700">
                  <TableBody>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Plan
                      </TableCell>
                      <TableCell align="left">{member?.current_plan?.code}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Active
                      </TableCell>
                      <TableCell align="left">
                        {member?.current_plan?.start} -{' '}
                        {member?.current_plan?.end} (Active)
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Corporate Limit
                      </TableCell>
                      <TableCell align="left">
                        {fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell style={headStyle} align="left">
                        Plan Usage
                      </TableCell>
                      <TableCell align="left">
                        {fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </Grid>
            </Grid>
          </Stack>
        )}

        <Controller
          name="benefit"
          control={control}
          render={({ field: { onChange, value } }) => (
            <Autocomplete
              options={memberBenefits}
              getOptionLabel={(option) =>
                option ? `#${option.id} (${option.code}) ${option.description}` : ''
              }
              value={value || ''}
              onChange={(event: any, newValue: any) => {
                setValue('benefit_id', newValue?.id);
                onChange(newValue);
              }}
              renderInput={(params) => (
                <TextField
                  name="benefit"
                  {...params}
                  label="Benefit"
                  variant="outlined"
                  fullWidth
                  // onKeyPress={(event) => {
                  //   if (event.key === 'Enter')
                  //     searchDiagnosis(event.target.value)
                  // }}
                />
              )}
            />
          )}
        />

        <Controller
          name="diagnosis"
          control={control}
          render={({ field: { onChange, value } }) => (
            <Autocomplete
              options={diagnosisOption}
              getOptionLabel={(option) => (option ? `(${option.code}) ${option.name}` : '')}
              value={value || ''}
              onChange={(event: any, newValue: any) => {
                setValue('diagnosis_id', newValue?.id);
                // setValue('diagnosis', newValue)
                onChange(newValue);
              }}
              renderInput={(params) => (
                <TextField
                  name="diagnosis"
                  {...params}
                  label="Diagnosis"
                  variant="outlined"
                  fullWidth
                  onKeyPress={(event) => {
                    if (event.key === 'Enter') searchDiagnosis(event.target.value);
                  }}
                />
              )}
            />
          )}
        />

        {isCheckingLimit && (
          <Stack
            sx={{
              backgroundColor: 'gray',
              paddingY: 1,
              paddingX: 1.5,
              mb: 2,
              borderRadius: '3-xl',
            }}
          >
            {/* Checking */}
            <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
              <Iconify
                icon="bxs:info-circle"
                width={12}
                height={13}
                sx={{ color: '#424242', marginRight: '6px' }}
              />
              <Typography variant="caption" component="span">
                Please Wait, Checking Eligibilty
              </Typography>
            </Typography>
          </Stack>
        )}
        {false && isCheckingLimit == false && isEligible == null && (
          <Stack
            sx={{
              backgroundColor: 'gray',
              paddingY: 1,
              paddingX: 1.5,
              mb: 2,
              borderRadius: '3-xl',
            }}
          >
            {/* No Data Selected */}
            <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
              <Iconify
                icon="bxs:info-circle"
                width={12}
                height={13}
                sx={{ color: '#424242', marginRight: '6px' }}
              />
              <Typography variant="caption" component="span">
                Please Select Diagnosis !
              </Typography>
            </Typography>
          </Stack>
        )}
        {!isCheckingLimit && isEligible !== null && isEligible && (
          <Stack
            sx={{
              backgroundColor: '#B2E8E8',
              paddingY: 1,
              paddingX: 1.5,
              mb: 2,
              borderRadius: '3-xl',
            }}
          >
            {/* Eligible */}
            <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
              <Iconify
                icon="bxs:lock-alt"
                width={12}
                height={13}
                sx={{ color: '#424242', marginRight: '6px' }}
              />
              <Typography variant="caption" component="span">
                Diagnosis is Eligible
              </Typography>
            </Typography>
            <Typography sx={{ typography: 'caption', color: '#637381' }}>
              125.000.000 / 125.000.000
            </Typography>
          </Stack>
        )}
        {!isCheckingLimit && isEligible !== null && !isEligible && (
          <Stack
            sx={{
              backgroundColor: '#B2E8E8',
              paddingY: 1,
              paddingX: 1.5,
              mb: 2,
              borderRadius: '3-xl',
            }}
          >
            {/* Not Eligible */}
            {/* <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
              <Iconify
                icon="bxs:lock-alt"
                width={12}
                height={13}
                sx={{ color: '#424242', marginRight: '6px' }}
              />
              <Typography variant="caption" component="span">
                Not Eligible
              </Typography>
            </Typography>
            <Typography sx={{ typography: 'caption', color: '#637381' }}>
              125.000.000 / 125.000.000
            </Typography> */}
          </Stack>
        )}

        <RHFTextField type="number" name="total_claim" label="Total Claim" />

        {isEdit && (
          <React.Fragment>
            <Typography variant="h6">Documents</Typography>

            <List>
              {(getValues('uploaded_files.invoice') && getValues('uploaded_files.invoice').length
                ? getValues('uploaded_files.invoice')
                : []
              ).map((file, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton edge="end" aria-label="delete">
                      <DeleteOutline />
                    </IconButton>
                  }
                >
                  <ListItemAvatar>
                    <Avatar>
                      {/* <FileIcon /> */}
                      I
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={file.name} secondary={file.type} />
                </ListItem>
              ))}
            </List>
            <Button
              variant="outlined"
              startIcon={<Add />}
              component="label"
              sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
            >
              Invoice
              <input
                name="invoice"
                hidden
                accept="image/*,application/pdf"
                multiple
                type="file"
                onChange={(event) => {
                  fileSelected(event, 'invoice');
                }}
              />
            </Button>
            <List>
              {(getValues('uploaded_files.prescription') && getValues('uploaded_files.prescription').length
                ? getValues('uploaded_files.prescription')
                : []
              ).map((file, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton edge="end" aria-label="delete">
                      <DeleteOutline />
                    </IconButton>
                  }
                >
                  <ListItemAvatar>
                    <Avatar>
                      {/* <FileIcon /> */}
                      P
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={file.name} secondary={file.type} />
                </ListItem>
              ))}
            </List>
            <Button
              variant="outlined"
              startIcon={<Add />}
              component="label"
              sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
            >
              Prescription
              <input
                name="prescription"
                hidden
                accept="image/*,application/pdf"
                multiple
                type="file"
                onChange={(event) => {
                  fileSelected(event, 'prescription');
                }}
              />
            </Button>

            <List>
              {(getValues('uploaded_files.diagnosis') && getValues('uploaded_files.diagnosis').length
                ? getValues('uploaded_files.diagnosis')
                : []
              ).map((file, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton edge="end" aria-label="delete">
                      <DeleteOutline />
                    </IconButton>
                  }
                >
                  <ListItemAvatar>
                    <Avatar>
                      {/* <FileIcon /> */}
                      DR
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={file.name} secondary={file.type} />
                </ListItem>
              ))}
            </List>
            <Button
              variant="outlined"
              startIcon={<Add />}
              component="label"
              sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
            >
              Doctor Result
              <input
                name="invoice"
                hidden
                accept="image/*,application/pdf"
                multiple
                type="file"
                onChange={(event) => {
                  fileSelected(event, 'diagnosis');
                }}
              />
            </Button>
          </React.Fragment>
        )}

        {isEligible === true ? (
          <LoadingButton
            onClick={handleSubmit(onSubmit)}
            variant="contained"
            color="success"
            style={{ color: '#ffffff' }}
            size="large"
            fullWidth={true}
            loading={isCheckingLimit}
          >
            Create Claim
          </LoadingButton>
        ) : (
          <LoadingButton
            onClick={checkLimit}
            variant="outlined"
            size="large"
            fullWidth={true}
            loading={isCheckingLimit}
          >
            Check Limit
          </LoadingButton>
        )}
      </Stack>

      <MemberSelectDialog
        openDialog={isMemberDialogOpen}
        setOpenDialog={setIsMemberDialogOpen}
        onSelect={memberSelected}
      ></MemberSelectDialog>
    </FormProvider>
  );
}