import Stack from '@material-hu/mui/Stack';

import Skeleton from '@material-hu/components/design-system/Skeleton';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';

const SKELETON_ROW_COUNT = 6;

type Props = {
  totalColumns: number;
};

/**
 * Detailed skeleton rendered during the initial load of the templates table.
 * Each row mirrors the structure of a real `ShiftRotation` row (stacked name +
 * subtitle, description, days summary, actions).
 */
export const TemplatesTableSkeletonRows = () => (
  <>
    {Array.from({ length: SKELETON_ROW_COUNT }).map((_, idx) => (
      <TableRow key={`skeleton-${idx}`}>
        <TableCell>
          <Stack sx={{ gap: 0.5 }}>
            <Skeleton
              height={16}
              width="60%"
              variant="rounded"
            />
            <Skeleton
              height={12}
              width="35%"
              variant="rounded"
            />
          </Stack>
        </TableCell>
        <TableCell>
          <Skeleton
            height={16}
            width="80%"
            variant="rounded"
          />
        </TableCell>
        <TableCell>
          <Skeleton
            height={16}
            width="70%"
            variant="rounded"
          />
        </TableCell>
        <TableCell align="right">
          <Skeleton
            height={24}
            width={24}
            variant="rounded"
            sx={{ ml: 'auto' }}
          />
        </TableCell>
      </TableRow>
    ))}
  </>
);

/**
 * Compact skeleton shown by the `InfiniteTable` while a new page is being
 * fetched (after the user has already loaded some templates and is scrolling
 * down).
 */
export const TemplatesTableLoadMoreSkeleton = ({ totalColumns }: Props) => (
  <TableRow>
    <TableCell
      colSpan={totalColumns}
      sx={{ p: 0, border: 0 }}
    >
      <Stack sx={{ gap: 1, p: 2 }}>
        <Skeleton
          height={32}
          variant="rounded"
        />
        <Skeleton
          height={32}
          variant="rounded"
        />
        <Skeleton
          height={32}
          variant="rounded"
        />
      </Stack>
    </TableCell>
  </TableRow>
);