import { Card, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import { DetailFinalLogType } from "../FinalLog/Model/Types";
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import Label from '@/components/Label';



type CardDetail = {
    requestLog: DetailFinalLogType|undefined; 
    isFinalLog: boolean
}

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


export default function CardService({requestLog, isFinalLog = true} : CardDetail ) {
    return (
        <Card sx={{padding:2}}  >
            <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(requestLog?.claim_method ?? '-')}</Typography>
            </Stack>
            {/* <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>
                    <ul>
                        {requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
                        <li key={index}>{r.code } - {r.description}</li>
                        )) : <li>-</li>}
                    </ul>
                </Typography>
            </Stack> */}
            {/* General Practitioner */}
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>General Practitioner</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>External Doctor : 
                    {requestLog?.config_service?.gp_external_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
                    {requestLog?.config_service?.gp_external_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
                </Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom2}>
                <Typography variant='subtitle2' sx={style1} gutterBottom></Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>Internal Doctor  :
                    {requestLog?.config_service?.gp_internal_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
                    {requestLog?.config_service?.gp_internal_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
                </Typography>
            </Stack>

            {/* Specialist Practitioner */}
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Specialist Practitioner</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>External Doctor : 
                    {requestLog?.config_service?.sp_external_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
                    {requestLog?.config_service?.sp_external_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
                </Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom2}>
                <Typography variant='subtitle2' sx={style1} gutterBottom></Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>Internal Doctor  :
                    {requestLog?.config_service?.gp_internal_doctor_online == '1' ? (<Label sx={{marginLeft:2}}> Online</Label>) : '-'}
                    {requestLog?.config_service?.gp_internal_doctor_offline == '1' ? (<Label sx={{marginLeft:1}}> Offfline</Label>) : '-'}
                </Typography>
            </Stack>

            {/* Medicine */}
            <Stack direction='row' spacing={2} sx={marginBottom1}>
            <Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Medicine</Typography>
            <Typography variant='subtitle2' sx={style2} gutterBottom>
                <ul>
                    {requestLog?.config_service?.vitamins == '1' ? (<li>Suplemen</li>) : (<li>-</li>)}
                    {requestLog?.config_service?.delivery_fee == '1' ? (<li>Delivery Fee</li>) : (<li>-</li>)}
                </ul>
            </Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom2}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Admin Fee</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>
                    {requestLog?.config_service?.general_practitioner_fee == '1' ? (<Label sx={{marginLeft:2}}> General Practitioner</Label>) : '-'}
                    {requestLog?.config_service?.specialist_practitioner_fee == '1' ? (<Label sx={{marginLeft:1}}> Specialist Practitioner</Label>) : '-'}
                </Typography>
            </Stack>


        </Card>
    )
   
}