// @mui
import { styled } from '@mui/material/styles';
import {
  Button,
  Card,
  Typography,
  LinearProgress,
  linearProgressClasses,
  Stack,
  Skeleton,
} from '@mui/material';
// components
import Iconify from '../../components/Iconify';
// React
import { Fragment, useState } from 'react';
// utils
import { fCurrency, fSplit } from '../../utils/formatNumber';
/* -------------------------------- sections -------------------------------- */
import DialogTopUpLimit from './DialogTopUpLimit';
import DialogClaimSubmitMember from './DialogClaimSubmitMember';

/* ---------------------------------- types --------------------------------- */

// type DataMember = {
//   id: number;
//   fullName: string;
//   memberId: string;
//   limit: {
//     current: number;
//     total: number;
//     percentage: number;
//   };
//   avatar?: {
//     url?: string;
//     title?: string;
//   };
// };

type CardPolicyProps = {
  data?: {
    limit: {
      myLimit: {
        balance: number;
        total: number;
        percentage: number;
      };
      lockLimit: {
        balance: number;
        percentage: number;
      };
    };
    topUpLimit: {
      companyName: string;
      policyNumber: number;
      totalMembers: number;
      totalCases: number;
      totalPersen: number;
      myLimit: {
        balance: number;
        total: number;
        percentage: number;
      };
      maxTopUp: number;
    };
  };
};

/* -------------------------------------------------------------------------- */

/* --------------------------------- styled --------------------------------- */

const RootBalanceStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(3),
  color: 'black',
  backgroundColor: theme.palette.grey[200],
  maxHeight: '240px',
}));

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 6,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 6,
    backgroundColor: theme.palette.primary.main,
  },
}));

/* -------------------------------------------------------------------------- */

export default function CardPolicy(props: CardPolicyProps) {
  const [openDialog, setOpenDialog] = useState(false);
  const [dialogTitle, setDialogTitle] = useState('');
  const [isDialog, setIsDialog] = useState('');

  const { limit, topUpLimit } = props.data || {};

  const clickHandler = (isDialog: string) => {
    switch (isDialog) {
      case 'submitClaim':
        setDialogTitle('Add Claim');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;
      case 'topUpLimit':
        setDialogTitle('Top Up Limit');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;

      default:
        break;
    }
  };

  return (
    <RootBalanceStyle>
      <Fragment>
        <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }} spacing={2}>
          <Stack>
            <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
              {limit ? (
                'Total Limit'
              ) : (
                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={75} />
              )}
            </Typography>
            <Typography sx={{ typography: 'body2' }}>
              {limit ? (
                fCurrency(limit.myLimit.balance ?? 0)
              ) : (
                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={150} />
              )}
            </Typography>
            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
              {limit ? (
                `/ ${fSplit(limit.myLimit.total ?? 0)}`
              ) : (
                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" />
              )}
            </Typography>
          </Stack>

          <Stack direction="row" alignItems="center" justifyContent="center">
            <Typography variant="h5" sx={{ ml: 0.5 }}>
              {limit ? (
                `${limit.myLimit.percentage ?? 0}%`
              ) : (
                <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={70} />
              )}
            </Typography>
          </Stack>
        </Stack>

        {limit ? (
          <BorderLinearProgress
            variant="determinate"
            value={limit.myLimit.percentage ?? 0}
            sx={{ mb: 1 }}
          />
        ) : (
          <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" />
        )}

        <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
          <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
            {limit ? (
              <Fragment>
                <Iconify
                  icon="bxs:lock-alt"
                  width={12}
                  height={13}
                  sx={{ color: '#424242', marginRight: '6px' }}
                />
                <Typography variant="caption" component="span">
                  Lock Fund ( {limit.lockLimit.percentage ?? 0}% )
                </Typography>
              </Fragment>
            ) : (
              <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={130} />
            )}
          </Typography>
          <Typography sx={{ typography: 'caption', color: '#637381' }}>
            {limit ? (
              `${fSplit(limit.lockLimit.balance ?? 0)} / ${fSplit(limit.myLimit.total ?? 0)}`
            ) : (
              <Skeleton sx={{ bgcolor: 'grey.300' }} animation="wave" width={120} />
            )}
          </Typography>
        </Stack>

        <Stack direction="row" spacing={2}>
          {limit ? (
            <Button
              variant="outlined"
              startIcon={<Iconify icon="bi:clipboard-check-fill" />}
              fullWidth={true}
              onClick={() => clickHandler('submitClaim')}
            >
              Submit Claim
            </Button>
          ) : (
            <Skeleton
              sx={{ bgcolor: 'grey.300' }}
              animation="wave"
              height={'36px'}
              width={'100%'}
            />
          )}
          {/* <Button
            variant="contained"
            startIcon={<Iconify icon="heroicons-solid:cash" />}
            fullWidth={true}
            onClick={() => clickHandler('topUpLimit')}
          >
            Top Up
          </Button> */}
        </Stack>
      </Fragment>

      {isDialog === 'submitClaim' && (
        <DialogClaimSubmitMember
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle }}
        />
      )}

      {isDialog === 'topUpLimit' && (
        <DialogTopUpLimit
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
          data={topUpLimit}
        />
      )}
    </RootBalanceStyle>
  );
}
