// @mui
import { styled } from '@mui/material/styles';
import {
  Button,
  Card,
  Typography,
  Stack,
  LinearProgress,
  linearProgressClasses,
} from '@mui/material';
// utils
import { fCurrency } from '../../utils/formatNumber';
// components
import Iconify from '../../components/Iconify';

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

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

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

const INITIAL = '500.000.000';
const TOTAL = 375000000;
const PERCENT = 75;

export default function BalanceCard(props: any) {
  const { setOpenPopup } = props;

  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,
    },
  }));

  return (
    <RootStyle>
      <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
        <div>
          <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
            Total Limit
          </Typography>
          <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
          <Typography sx={{ typography: 'caption', color: '#919EAB' }}>/ {INITIAL}</Typography>
        </div>

        <Stack direction="row" alignItems="center" justifyContent="center">
          <Typography variant="h5" sx={{ ml: 0.5 }}>
            {PERCENT}%
          </Typography>
        </Stack>
      </Stack>

      <BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />

      <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
        <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">
            Lock Fund ( 25% )
          </Typography>
        </Typography>
        <Typography sx={{ typography: 'caption', color: '#637381' }}>
          125.000.000 / 125.000.000
        </Typography>
      </Stack>

      <Stack direction="row" spacing={2}>
        <Button
          variant="outlined"
          startIcon={<Iconify icon="bi:clipboard-check-fill" />}
          fullWidth={true}
          onClick={() => setOpenPopup(true)}
        >
          Submit Claim
        </Button>
        <Button
          variant="contained"
          startIcon={<Iconify icon="heroicons-solid:cash" />}
          fullWidth={true}
        >
          Top Up
        </Button>
      </Stack>
    </RootStyle>
  );
}
