import Divider from '@material-hu/mui/Divider';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import CardContainer from '@material-hu/components/design-system/CardContainer';

const SKELETON_ROWS = 6;

type TimeHistorySkeletonRowProps = {
  isLast: boolean;
  isFirst: boolean;
};

const TimeHistorySkeletonRow = ({
  isLast,
  isFirst,
}: TimeHistorySkeletonRowProps) => (
  <Stack>
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        ...(isFirst ? { pb: 2 } : { py: 2 }),
      }}
    >
      <Skeleton
        variant="rounded"
        width={48}
        height={52}
        animation="wave"
        sx={{ borderRadius: 1, flexShrink: 0, mr: 2 }}
      />
      <Stack sx={{ flex: 1, gap: 0.5 }}>
        <Skeleton
          width={60}
          height={16}
          animation="wave"
        />
        <Skeleton
          width={100}
          height={13}
          animation="wave"
        />
      </Stack>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <Skeleton
          variant="rounded"
          width={72}
          height={24}
          animation="wave"
          sx={{ borderRadius: 3 }}
        />
        <Skeleton
          variant="circular"
          width={28}
          height={28}
          animation="wave"
        />
      </Stack>
    </Stack>
    {!isLast && <Divider />}
  </Stack>
);

const TimeHistorySkeleton = () => (
  <CardContainer
    fullWidth
    sx={{ flex: 1, overflow: 'hidden', minHeight: 0 }}
  >
    {Array.from({ length: SKELETON_ROWS }, (_, i) => (
      <TimeHistorySkeletonRow
        key={i}
        isFirst={i === 0}
        isLast={i === SKELETON_ROWS - 1}
      />
    ))}
  </CardContainer>
);

export default TimeHistorySkeleton;