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

type CardPersonalInformationProps = {
  data?: {
    name: string;
    weight: number;
    height: number;
    placeOfBirth: string;
    dateOfBirth: string;
    gender: string;
    phoneNumber: string;
    email: string;
    address: string;
    idNumber: string;
    religion: string;
    maritalStatus: string;
    education: string;
    occupation: string;
  };
};

export default function CardPersonalInformation({ data }: CardPersonalInformationProps) {
  return (
    <Card sx={{ borderRadius: 2, padding: 3 }}>
      <Grid container gap={5}>
        <Grid item xs={12}>
          <Typography component={'h6'} fontWeight={700}>
            {data ? 'Personal Information' : <Skeleton animation={'wave'} width={200} />}
          </Typography>
        </Grid>
        <Grid item container xs={12} spacing={3}>
          {/* First */}
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Full Name' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? data.name ? data.name : '-' : <Skeleton animation={'wave'} width={125} />}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Weight' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.weight ? (
                    `${data.weight} kg`
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Height' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.height ? (
                    `${data.height} cm`
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          {/* Second */}
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Place of Birth' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.placeOfBirth ? (
                    data.placeOfBirth
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Date of Birth' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.dateOfBirth ? (
                    fDateBirth(data.dateOfBirth)
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Gender' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.gender ? (
                    data.gender
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          {/* Third */}
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Phone Number' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.phoneNumber ? (
                    data.phoneNumber
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={8}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Email' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? data.email ? data.email : '-' : <Skeleton animation={'wave'} width={125} />}
              </Typography>
            </Stack>
          </Grid>
          {/* Four */}
          <Grid item xs={12}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Address' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.address ? (
                    data.address
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          {/* Five */}
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'ID Number' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.idNumber ? (
                    data.idNumber
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={8}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Religion' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.religion ? (
                    data.religion
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          {/* Six */}
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Marital Status' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.maritalStatus ? (
                    data.maritalStatus
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Education' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.education ? (
                    data.education
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap={1.5}>
              <Typography variant="subtitle2" color={'grey.600'}>
                {data ? 'Occupation' : <Skeleton animation={'wave'} width={200} />}
              </Typography>
              <Typography variant="subtitle1" color={'grey.800'}>
                {data ? (
                  data.occupation ? (
                    data.occupation
                  ) : (
                    '-'
                  )
                ) : (
                  <Skeleton animation={'wave'} width={125} />
                )}
              </Typography>
            </Stack>
          </Grid>
        </Grid>
      </Grid>
    </Card>
  );
}
