/* ------------------------------- material ui ------------------------------ */
import { Card, Typography, Grid, Skeleton, Stack } from '@mui/material';
import { fDateBirth } from '../../../utils/formatTime';
import { Fragment } from 'react';

type CardFamilyInformationProps = {
  data?: {
    name: string;
    relationship: string;
    dateOfBirth: string;
    email: string;
    phoneNumber: string;
    status: string;
  }[];
  loading: boolean;
};

export default function CardFamilyInformation({ data, loading }: CardFamilyInformationProps) {
  if (loading) {
    return (
      <Card sx={{ borderRadius: 2, padding: 3 }}>
        <Grid container gap={5}>
          <Grid item xs={12}>
            <Typography component={'h6'} fontWeight={700}>
              <Skeleton animation={'wave'} width={200} />
            </Typography>
          </Grid>
          <Grid item container xs={12} spacing={3}>
            <Grid item xs={12} md={6}>
              <Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
                <Grid container>
                  <Grid item xs={12}>
                    <Stack gap={0.5}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        <Skeleton animation={'wave'} width={250} />
                      </Typography>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        <Skeleton animation={'wave'} width={150} />
                      </Typography>
                    </Stack>
                  </Grid>
                  <Grid container xs={12} spacing={1} marginTop={3}>
                    <Grid item xs={12} md={4}>
                      <Typography variant="body2" color={'grey.600'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                    <Grid item xs={12} md={8}>
                      <Typography variant="body2" color={'grey.800'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid container xs={12} spacing={1}>
                    <Grid item xs={12} md={4}>
                      <Typography variant="body2" color={'grey.600'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                    <Grid item xs={12} md={8}>
                      <Typography variant="body2" color={'grey.800'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid container xs={12} spacing={1}>
                    <Grid item xs={12} md={4}>
                      <Typography variant="body2" color={'grey.600'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                    <Grid item xs={12} md={8}>
                      <Typography variant="body2" color={'grey.800'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid container xs={12} spacing={1}>
                    <Grid item xs={12} md={4}>
                      <Typography variant="body2" color={'grey.600'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                    <Grid item xs={12} md={8}>
                      <Typography variant="body2" color={'grey.800'}>
                        <Skeleton animation={'wave'} />
                      </Typography>
                    </Grid>
                  </Grid>
                </Grid>
              </Card>
            </Grid>
          </Grid>
        </Grid>
      </Card>
    );
  } else {
    return data && data.length > 0 ? (
      <Card sx={{ borderRadius: 2, padding: 3 }}>
        <Grid container gap={5}>
          <Grid item xs={12}>
            <Typography component={'h6'} fontWeight={700}>
              Beneficiary / Family
            </Typography>
          </Grid>
          <Grid item container xs={12} spacing={3}>
            {data.map((familyMember, index) => (
              <Grid item xs={12} md={6} key={index}>
                <Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
                  <Grid container>
                    <Grid item xs={12}>
                      <Stack gap={0.5}>
                        <Typography variant="subtitle1" color={'grey.800'}>
                          {familyMember.name ? familyMember.name : '-'}
                        </Typography>
                        <Typography variant="subtitle2" color={'grey.600'}>
                          {familyMember.relationship ? familyMember.relationship : '-'}
                        </Typography>
                      </Stack>
                    </Grid>
                    <Grid container xs={12} marginTop={3}>
                      <Grid item xs={12} md={4}>
                        <Typography variant="body2" color={'grey.600'}>
                          Date Of Birth
                        </Typography>
                      </Grid>
                      <Grid item xs={12} md={8}>
                        <Typography variant="body2" color={'grey.800'}>
                          {familyMember.dateOfBirth ? fDateBirth(familyMember.dateOfBirth) : '-'}
                        </Typography>
                      </Grid>
                    </Grid>
                    <Grid container xs={12}>
                      <Grid item xs={12} md={4}>
                        <Typography variant="body2" color={'grey.600'}>
                          Email
                        </Typography>
                      </Grid>
                      <Grid item xs={12} md={8}>
                        <Typography variant="body2" color={'grey.800'}>
                          {familyMember.email ? familyMember.email : '-'}
                        </Typography>
                      </Grid>
                    </Grid>
                    <Grid container xs={12}>
                      <Grid item xs={12} md={4}>
                        <Typography variant="body2" color={'grey.600'}>
                          Phone Number
                        </Typography>
                      </Grid>
                      <Grid item xs={12} md={8}>
                        <Typography variant="body2" color={'grey.800'}>
                          {familyMember.phoneNumber ? familyMember.phoneNumber : '-'}
                        </Typography>
                      </Grid>
                    </Grid>
                    <Grid container xs={12}>
                      <Grid item xs={12} md={4}>
                        <Typography variant="body2" color={'grey.600'}>
                          Status
                        </Typography>
                      </Grid>
                      <Grid item xs={12} md={8}>
                        <Typography variant="body2" color={'grey.800'}>
                          {familyMember.status ? familyMember.status : '-'}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Grid>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Card>
    ) : (
      <Fragment />
    );
  }
}
