// mui
import { styled } from '@mui/material/styles';
import { LoadingButton, TabPanel } from "@mui/lab";
import { Button, Card, Divider, Grid, LinearProgress, linearProgressClasses, Typography } from "@mui/material";
import { Tab, Tabs } from "@mui/material";
import { Box, Stack } from "@mui/material";
import { useEffect, useState } from "react";
import { fCurrency } from '@/utils/formatNumber';
import { fPostFormat } from '@/utils/formatTime';
import { Avatar } from '@mui/material';
import Iconify from '@/components/Iconify';
import FormRequestClaim from './FormRequestClaim';

export default function DialogMember(member, handleSubmitSuccess) {
    const [currentTab, setCurrentTab] = useState('request')
        
    // ----------------------------------------------------------------------

    useEffect(() => {
        setCurrentTab('benefit')
    }, [member])

    function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
        setCurrentTab(newValue)
    }

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

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

    function TabPanel(props) {
        const { children, value, index, ...other } = props;
      
        console.log('current', value)
        return (
          <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
          >
            {value === index && (
              <Box sx={{ p: 3 }}>
                <div>{children}</div>
              </Box>
            )}
          </div>
        );
    }

    return (
        <div>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                <Tabs
                    value={currentTab}
                    onChange={handleChangeTab}
                    aria-label="wrapped label tabs example"
                >
                    <Tab
                    value="benefit"
                    label="Benefit Summary"
                    />
                    <Tab value="request" label="Request Penjaminan" />
                </Tabs>

                <TabPanel value={currentTab} index={'benefit'}>
                    <Grid container spacing={2}>
                        { member && member?.current_plan?.corporate_benefits?.map((corporateBenefit, index) => {return (
                            <Grid item sm={6} key={index}>
                                <Card sx={{p: 2}}>
                                    <Typography variant="body1" sx={{fontWeight: 500}}>{corporateBenefit.benefit.description}</Typography>
                                    <Typography variant="body2">Member ID : {corporateBenefit.benefit.code}</Typography>
                                    <Typography variant="body2" sx={{ marginTop: 2 }}>Yearly Limits</Typography>
                                    <BorderLinearProgress variant="determinate" value={100 - (corporateBenefit.limit_amount ? ((corporateBenefit.usage ?? 0) / corporateBenefit.limit_amount) : 0)} sx={{ mb: 1 }} />
                                    <Typography sx={{ textAlign: 'right'}}>{corporateBenefit.usage ?? 0} / 
                                    {corporateBenefit.limit_ammount < 9999999999 ? fCurrency(corporateBenefit.limit_amount ?? 0) : 'As Charge' }</Typography>
                                </Card>
                            </Grid>
                        )})}
                    </Grid>
                </TabPanel>

                
                <TabPanel value={currentTab} index={'request'}>
                    <FormRequestClaim member={member} handleSubmitSuccess={handleSubmitSuccess} />
                </TabPanel>
            </Box>
        </div>
    )
}