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';

import {
  SELECTION_COL_WIDTH,
  SKELETON_ROWS,
  STICKY_COLUMN_SX,
  FIXED_ROW_HEIGHT_ESTIMATE,
} from './constants';

type Props = {
  selectionActive?: boolean;
  dayCount?: number;
};

const ShiftsTableSkeleton = ({
  selectionActive = false,
  dayCount = 7,
}: Props) => {
  return Array.from({ length: SKELETON_ROWS }, (_, index) => (
    <TableRow
      key={index}
      sx={{ height: FIXED_ROW_HEIGHT_ESTIMATE }}
    >
      {selectionActive && (
        <TableCell
          sx={{
            position: 'sticky',
            left: 0,
            zIndex: 2,
            width: SELECTION_COL_WIDTH,
          }}
        >
          <Skeleton
            variant="rounded"
            height={33}
          />
        </TableCell>
      )}
      <TableCell
        sx={{
          ...STICKY_COLUMN_SX,
          left: selectionActive ? SELECTION_COL_WIDTH : undefined,
        }}
      >
        <Skeleton
          variant="rounded"
          height={33}
        />
      </TableCell>
      {Array.from({ length: dayCount }, (_2, dayCellIndex) => (
        <TableCell
          key={dayCellIndex}
          sx={{ px: 1, py: 1.5 }}
        >
          <Skeleton
            variant="rounded"
            height={33}
          />
        </TableCell>
      ))}
    </TableRow>
  ));
};

export default ShiftsTableSkeleton;
