// mui
import { styled } from '@mui/material/styles';
import { Card, Typography, Stack, LinearProgress, linearProgressClasses } from '@mui/material';
import CardBenefitSummary from './CardBenefitSummary';
import axios from '../../../utils/axios';

import { useContext, useState, useEffect } from 'react';
import { UserCurrentCorporateContext } from '../../../contexts/UserCurrentCorporate';
// ----------------------------------------------------------------------

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,
    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
  },
}));

type DataMember = {
  id: number;
  fullName: string;
  memberId: string;
  limit: {
    current: number;
    total: number;
    percentage: number;
  };
  avatar: {
    url: string;
    title: string;
  };
  status: JSX.Element;
};

type CardPolicyProps = {
  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;
  };
  members?: DataMember[];
};

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

export default function CardPolicyNumber({ data }) {
  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const [policyNumber, setPolicyNumber] = useState('');
  const [policyData, setPolicyData] = useState<CardPolicyProps>();

  const [limitMember, setLimitMember] = useState();
  const [benefitMember, setBenefitMember] = useState();

  /*  axios.get(`${corporateValue}/topup`)
   .then(response => {
     console.log(response.data);
   })
   .catch(error => {
     console.error(error);
   });  */

  useEffect(() => {
    axios
      .get(`${corporateValue}/topup`)
      .then((response) => {
        const { data } = response.data; // Access the 'data' object from the response
        const { policyNumber } = data; // Access the 'policyNumber' field from the 'data' object
        setPolicyNumber(policyNumber);
      })
      .catch((error) => {
        console.error(error);
      });

    setLimitMember(data?.limit);
    setBenefitMember(data?.benefits);

    // const corporatePolicyLimit = axios.get(`${corporateValue}/policy`);
    // const corporateTopUpLimit =  axios.get(`${corporateValue}/topup`);
    // setPolicyData({
    //   limit: corporatePolicyLimit.data.data,
    //   topUpLimit: corporateTopUpLimit.data.data,
    // });
  }, [corporateValue, data]);

  const calculateProgressValue = (current: number, total: number) => {
    return (current / total) * 100;
  };
  const progressValue = calculateProgressValue(limitMember?.current, limitMember?.total);

  // const getMemberLimitUsage = (memberId: string) => {
  //   if (policyData?.members) {
  //     const member = policyData.members.find((member) => member.memberId === memberId);
  //     if (member) {
  //       return member.limit;
  //     }
  //   }
  //   return null;
  // };

  // const renderYearlyLimit = () => {
  //   if (policyData) {
  //     const { myLimit } = policyData.limit;
  //     console.log('myLimit', myLimit);
  //     const { balance, total, percentage } = myLimit;
  //     const progressValue = calculateProgressValue(balance, total);

  //     return (
  //       <Stack spacing={1} sx={{ width: '206.5px' }}>
  //         <Typography variant="subtitle2">Yearly Limit</Typography>
  //         <BorderLinearProgress variant="determinate" value={progressValue} />
  //         <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
  //           {balance.toLocaleString()} /{' '}
  //           <Typography variant="body2" color="#757575" component="span">
  //             {total.toLocaleString()}
  //           </Typography>
  //         </Typography>
  //       </Stack>
  //     );
  //   }
  //   return null;
  // };

  return (
    <Card sx={{ padding: 2 }}>
      <Stack>
        <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
          <Stack direction="row" spacing={1} alignItems="center">
            <img width={52} height={52} src="/logo/logo-linksehat.png" alt="LinkSehat" />
            <Stack spacing={1}>
              <Typography variant="subtitle2">Policy Number</Typography>
              <Typography variant="subtitle2">{policyNumber}</Typography>
            </Stack>
          </Stack>
          <Stack spacing={1} sx={{ width: '206.5px' }}>
            <Typography variant="subtitle2">Yearly Limit</Typography>
            <BorderLinearProgress variant="determinate" value={progressValue} />
            <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
              {limitMember?.current}/{' '}
              <Typography variant="body2" color="#757575" component="span">
                {limitMember?.total}
              </Typography>
            </Typography>
          </Stack>
        </Stack>
        {/* Benefit Summary */}
        <CardBenefitSummary data={benefitMember} />
      </Stack>
    </Card>
  );
}
