import { FC, Fragment } from 'react';

import Box from '@material-hu/mui/Box';
import Grid from '@material-hu/mui/Grid';
import Typography from '@material-hu/mui/Typography';

import { Chapter, Task } from 'src/types/onboarding';

import ChapterCard from './ChapterCard';

export type ChaptersMenuProps = {
  id: number | string;
  title: string;
  itemsArray: Chapter[] | Task[];
  routesPath: (id, chapterID) => string;
  hasPendingLenght?: boolean;
};

export const ChaptersMenu: FC<ChaptersMenuProps> = props => {
  const { id, title, itemsArray, routesPath, hasPendingLenght = false } = props;

  return (
    <Box
      sx={{
        p: 2,
        ml: 2,
        height: '100%',
        width: '52%',
        backgroundColor: 'background.default',
        borderRadius: '10px',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
        <Typography
          color="textPrimary"
          variant="h6"
          component="h1"
          sx={{ fontWeight: 700 }}
        >
          {title}
        </Typography>
        {hasPendingLenght && (
          <Typography
            color="textPrimary"
            variant="h6"
            component="h1"
            sx={{ color: '#6c757d', fontWeight: 500, ml: 2 }}
          >
            {itemsArray.length}
          </Typography>
        )}
      </Box>
      <Grid
        container
        spacing={2}
      >
        {itemsArray.map(chapter => (
          <Fragment key={chapter.id}>
            <Grid
              item
              xs={12}
              sx={{ position: 'relative' }}
            >
              <ChapterCard
                chapter={chapter}
                route={routesPath(id, chapter.id)}
              />
            </Grid>
          </Fragment>
        ))}
      </Grid>
    </Box>
  );
};

export default ChaptersMenu;