import { Accordion, AccordionDetails, AccordionSummary, Card, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import { DetailFinalLogType } from "../FinalLog/Model/Types";
import { toTitleCase } from "@/utils/formatTime";
import Label from '@/components/Label';
import { ExpandMore } from "@mui/icons-material";



type CardDetail = {
    requestLog: DetailFinalLogType|undefined; 
}

const style1 = {
    color: '#919EAB',
    width: '30%'
}
const style2 = {
    width: '70%'
}
const marginBottom2 = {
    marginBottom: 2,
}


export default function CardExclusion({requestLog} : CardDetail ) {
    return (
        <Card sx={{padding:2}} >
            <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Exclusion</Typography>
                {requestLog?.exclusion?.length > 0 ? requestLog?.exclusion.map((r, index) => (
                        <Accordion>
                        <AccordionSummary
                            expandIcon={<ExpandMore />}
                            aria-controls='panelia-content'
                            id='panel1a-header'
                        >
                            <Typography variant='subtitle1'>{r.exclusionable.code}</Typography>
                            <Typography variant='subtitle1' sx={{marginLeft:3}}>{r.exclusionable.name}</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>MSC</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>
                                {r.rules.length > 0 && r?.rules?.map((text, i) => {
                                    return text.name === 'msc' ?
                                        text.values.split(',').map((text2, j) => {
                                            let labelMSC: string = text2;
                                            switch (labelMSC) {
                                                case 'm':
                                                    labelMSC = 'Member';
                                                    break;
                                                case 'c':
                                                    labelMSC = 'Child';
                                                    break;
                                                case 's':
                                                    labelMSC = 'Spouse';
                                                    break;
                                                default:
                                                    labelMSC = 'Member';
                                            }
                                            return (
                                                <Label key={j} sx={{marginLeft:1}}>{labelMSC}</Label>
                                            );
                                        })
                                        : null;
                                })}
                            </Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Gender</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>
                                {r.rules.length > 0 && r?.rules?.map((text, i) => {
                                    return text.name === 'gender' ?
                                        text.values.split(',').map((text2, j) => {
                                            let labelGender: string = toTitleCase(text2);
                                            return (
                                                <Label key={j} sx={{marginLeft:1}}>{labelGender}</Label>
                                            );
                                        })
                                        : null;
                                })}
                            </Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Min Age</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>
                            {r.rules.length > 0 && r?.rules?.map((text, i) => {
                                    return text.name === 'min_age' ?
                                        <Typography variant='subtitle1'> {text.values} </Typography> : null
                                })}
                            </Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Max Age</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>
                            {r.rules.length > 0 && r?.rules?.map((text, i) => {
                                    return text.name === 'max_age' ?
                                        <Typography variant='subtitle1'> {text.values} </Typography> : null
                                })}
                            </Typography>
                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Plan</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>
                            {r.rules.length > 0 && r?.rules?.map((text, i) => {
                                    return text.name === 'plan' ?
                                        <Typography variant='subtitle1'> {text.values} </Typography> : null
                                })}
                            </Typography>
                        </Stack>
                        </AccordionDetails>
                    </Accordion>
                )) : null}
        </Card>
    )
   
}