// @mui
import { styled } from '@mui/material/styles';
import {
  Button,
  Card,
  Typography,
  Link,
  Divider,
  Stack,
  TextField,
  Grid,
  InputAdornment,
} from '@mui/material';
import { ChevronRight } from '@mui/icons-material';
// React
import React, { useState } from 'react';
import { LoadingButton } from '@mui/lab';
import Iconify from '@/components/Iconify';
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { fPostFormat } from '@/utils/formatTime';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import DialogBenefit from './DiaglogBenefit';
import MuiDialog from '@/components/MuiDialog';
import axios from '@/utils/axios';
import { useSnackbar } from 'notistack';
import DialogMember from './DialogMember';

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

const RootNotificationStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: '1rem 0.5rem',
  color: 'black',
  backgroundColor: theme.palette.grey[200],
  // maxHeight: '240px',
}));

const ItemNotificationStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(1),
  borderRadius: 0.5,
  color: 'black',
}));

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

export default function CardSearchMember(handleSubmitSuccess) {
  const {enqueueSnackbar} = useSnackbar();

  const [noPolis, setNoPolis] = useState('AW001-01');
  const [tanggalLahir, setTanggalLahir] = useState('1991-01-10');
  const [loadingBenefit, setLoadingBenefit] = useState(false);
  const [loadingClaim, setLoadingClaim] = useState(false);
  const [openDialogBenefit, setOpenDialogBenefit] = useState(false);
  const [openDialogClaim, setOpenDialogClaim] = useState(false);
  const [currentMember, setCurrentMember] = useState(null);
  
  function handleSearchMember() {
    setLoadingBenefit(true)

    axios.post('/search-member', { 
      no_polis: noPolis, 
      birth_date: tanggalLahir ? fPostFormat(tanggalLahir, 'yyyy-MM-dd') : null
    })
    .then((response) => {
      setOpenDialogBenefit(true)
      setCurrentMember(response.data.data)
    })
    .catch(({response}) => {
      enqueueSnackbar(response.data.errors ? response.data.errors[0] : (response.data ? response.data.message : 'Opps, Something went Wrong!'), {variant : "error"})
    })
    .then(() => {
      setLoadingBenefit(false)
    });
  }

  return (
    <div>
      <RootNotificationStyle sx={{ p: 2, height: 'auto' }}>
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{ paddingBottom: 2, paddingTop: 1 }}
        >
          <Typography>
            <Typography
              variant="body2"
              component="span"
              sx={{ display: 'flex', alignItems: 'center' }}
            >
              Pengajuan Jaminan
            </Typography>
          </Typography>
        </Stack>
        <Stack gap={2}>
          <TextField variant="outlined" label="Member ID" value={noPolis} onChange={(event) => {
            setNoPolis(event.target.value)
          }}></TextField>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
              label="Tanggal Lahir"
              value={tanggalLahir}
              onChange={(newValue) => {
                setTanggalLahir(  (newValue));
              }}
              inputFormat="dd-MM-yyyy"
              renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>

          <Stack gap={2} flexDirection="row">
            <LoadingButton
              variant="outlined"
              sx={{
                background: '#fff',
                p: 1,
                width: '100%',
              }}
              loading={loadingBenefit}
              onClick={() => {
                handleSearchMember()
              }}
            >
              <Iconify icon="eva:eye-fill" marginRight={0.75} />
              Cari Member
            </LoadingButton>
            {/* <LoadingButton
              variant="contained"
              sx={{
                p: 1,
                width: '100%',
              }}
              loading={loadingClaim}
            >
              Ajukan Penjaminan
            </LoadingButton> */}
          </Stack>
        </Stack>
      </RootNotificationStyle>
{/* 
      <DialogBenefit open={openDialogBenefit} setOpen={setOpenDialogBenefit}></DialogBenefit> */}
      <MuiDialog
          title={{name: "Member"}}
          openDialog={openDialogBenefit}
          setOpenDialog={setOpenDialogBenefit}
          content={DialogMember(currentMember, () => {setOpenDialogBenefit(false); handleSubmitSuccess()})}
          maxWidth="md"
        />
    </div>
  );
}