/**
 * Core
 * ============================================
 */
import { useEffect, useState } from 'react';
import { Box, FormControlLabel, Grid, Checkbox, Typography, Card} from '@mui/material';

/**
 * Components
 * ============================================
*/
// - Global -
import Label from '@/components/Label';
// - Local -

/**
 * Icon, Utils, Types, Functions, theme, hook
 * ============================================
 */
import { fDateTimesecond } from '@/utils/formatTime';
import { MemberListType } from '../Model/Types';
import palette from '@/theme/palette';

/**
 * Props
 * =====================================================
 */
type Props = {
    data: MemberListType,
    ListChoosed: MemberListType[],
    handleCheckedProp: (checked: boolean, data: MemberListType) => void,
};

export default function FormCreateListChoose({data, ListChoosed, handleCheckedProp}: Props) {
    const [isChoosed, setIsChoosed] = useState<boolean>(false)

    useEffect(() => {
        setIsChoosed(false);

        ListChoosed.forEach(list => {
            if (list.id == data.id) {
                setIsChoosed(true);
            }
        })
    }, [ListChoosed])

    return (
        <Grid item xs={12}>
            <Card sx={{
                border: '0px solid rgba(0,0,0,0.125)', px: '24px', py: '16px', borderRadius: '12px', display: 'flex', justifyContent: 'space-between',
                bgcolor: (theme) => {
                    return isChoosed ? palette.light.primary.lighter : palette.light.background.default
                }
            }}>
                <Box sx={{ display: 'flex', alignItems: 'center', px: '8px'}}>
                    <FormControlLabel
                        label=""
                        control={<Checkbox onChange={(event, checked) => handleCheckedProp(checked, data)} />}
                        checked={isChoosed}
                    />

                    <Box>
                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
                            {data.name}
                        </Typography>
                        <Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
                            {data.member_id}
                        </Typography>
                    </Box>
                </Box>

                <Label variant="ghost" color="default">
                    {fDateTimesecond(new Date())}
                </Label>
            </Card>
        </Grid>
    )
}
