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

import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { useLokaliseTranslation } from 'src/utils/i18n';

const CyclesTableLoading = () => {
  const { t } = useLokaliseTranslation();

  return (
    <Stack sx={{ gap: 2 }}>
      <HuTableContainer>
        <HuTable>
          <HuTableHead>
            <HuTableRow headerRow>
              <HuTableCell
                headerCell
                id="NAME"
              >
                {t('general:cycle')}
              </HuTableCell>
              <HuTableCell
                headerCell
                id="CYCLE_START"
              >
                {t('general:start')}
              </HuTableCell>
              <HuTableCell
                headerCell
                id="CYCLE_END"
              >
                {t('general:end')}
              </HuTableCell>
              <HuTableCell
                headerCell
                id="GOALS"
              >
                {t('general:goals')}
              </HuTableCell>
              <HuTableCell />
            </HuTableRow>
          </HuTableHead>
          <HuTableBody>
            {Array.from({ length: 8 }).map((_, index) => (
              <HuTableRow key={index}>
                <HuTableCell
                  sx={{ py: 1, pr: 0 }}
                  variant="titleField"
                >
                  <Skeleton
                    height={24}
                    variant="rounded"
                    width="80%"
                    sx={{ maxWidth: 300 }}
                  />
                </HuTableCell>
                <HuTableCell>
                  <Skeleton
                    height={24}
                    variant="rounded"
                    width="70%"
                  />
                </HuTableCell>
                <HuTableCell>
                  <Skeleton
                    height={24}
                    variant="rounded"
                    width="70%"
                  />
                </HuTableCell>
                <HuTableCell>
                  <Skeleton
                    height={24}
                    variant="rounded"
                    width="30%"
                  />
                </HuTableCell>
                <HuTableCell align="right">
                  <Skeleton
                    height={24}
                    variant="rounded"
                    width="40%"
                  />
                </HuTableCell>
              </HuTableRow>
            ))}
          </HuTableBody>
        </HuTable>
      </HuTableContainer>
    </Stack>
  );
};

export default CyclesTableLoading;