// 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 React, { useEffect, useState, useContext } 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';
import { LanguageContext } from '@/contexts/LanguageContext';

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

    useEffect(() => {
        setCurrentTab('detail')
    }, [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="detail" label={localeData.txtDialogMember3} />
                    <Tab value="benefit" label={localeData.txtDialogMember1} />
                    <Tab value="request" label={localeData.txtDialogMember2} />
                </Tabs>

                <TabPanel value={currentTab} index={'detail'}>
                    <Stack spacing={2}>
                        <Grid container sx={{ pb: 2, mb: 2, borderBottom: 0 }}>
                          <Grid item xs={7}>
                            <Grid container>
                              <Grid item xs={4}>
                                Member ID
                              </Grid>
                              <Grid item xs={8}>
                                : { member?.member_id ?? '-'}
                              </Grid>
                              <Grid item xs={4}>
                                Policy Number
                              </Grid>
                              <Grid item xs={8}>
                                : { member?.current_policy?.code  ?? '-'}
                              </Grid>
                              <Grid item xs={4}>
                                NRIC
                              </Grid>
                              <Grid item xs={8}>
                                : {member?.nric ?? '-'}
                              </Grid>

                              <Grid item xs={4}>
                                NIK
                              </Grid>
                              <Grid item xs={8}>
                                : {member?.person?.nik ?? '-'}
                              </Grid>
                              <Grid item xs={4}>
                                Email
                              </Grid>
                              <Grid item xs={8}>
                                : {member?.email ?? '-'}
                              </Grid>
                            </Grid>
                          </Grid>
                          <Grid item xs={5}>
                            <Grid container>
                              <Grid item xs={6}>
                                Birth Date
                              </Grid>
                              <Grid item xs={6}>
                                : {member?.birth_date ?? '-'}
                              </Grid>
                              <Grid item xs={6}>
                                Gender
                              </Grid>
                              <Grid item xs={6}>
                                : {member?.gender ?? '-'}
                              </Grid>
                              <Grid item xs={6}>
                                Marital Status
                              </Grid>
                              <Grid item xs={6}>
                                : {member?.marital_status ?? '-'}
                              </Grid>
                              <Grid item xs={6}>
                                Language
                              </Grid>
                              <Grid item xs={6}>
                                : {member?.language ?? '-'}
                              </Grid>
                              <Grid item xs={6}>
                                Race
                              </Grid>
                              <Grid item xs={6}>
                                : {member?.race ?? '-'}
                              </Grid>
                              <Grid item xs={6}>
                                Relationship
                              </Grid>
                              <Grid item xs={6}>
                                : {member?.relation_with_principal ?? '-'}
                              </Grid>
                            </Grid>
                          </Grid>
                        </Grid>
                    </Stack>
                </TabPanel>

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