import React from 'react';
import { Link, useParams } from 'react-router-dom';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';

import * as types from '../../common/types';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    active: {
      backgroundColor: theme.palette.primary.dark,
      "&:hover": {
        backgroundColor: theme.palette.primary.dark
      }
    },
  }),
);

interface IProps {
  sections: types.ISection[];
}

const MenuSection: React.FC<IProps> = (props: IProps) => {
  const classes = useStyles();

  const { bookId, sectionId } = useParams();
  let bookIdNumber: number = (bookId == null) ? 0 : ~~bookId;
  let sectionIdNumber: number = (sectionId == null) ? 0 : ~~sectionId;

  return (
    <List>
      {
        props.sections.map((s: types.ISection, index: number) => (
          <Link key={index} to={'/editor/' + bookIdNumber + '/' + s.id}>
            <ListItem button className={sectionIdNumber === s.id ? classes.active : ""}>
              <ListItemText primary={s.name} />
            </ListItem>
          </Link>
        ))
      }
    </List>
  );
}

export default MenuSection;