import React, { useState } from 'react';
import { getTicketTypeCategories } from 'modules/tickets/sell';
import { TicketType } from 'common/types';
import { useStyles } from './styles/categories-list-styles';
import { Typography, Divider } from '@material-ui/core';
import { CustomButton } from 'components/button/custom-button';
import { CategoriesListDialog } from './categories-list-dialog';

interface CategoriesListProps {
  tickets: TicketType[];
}

export const CategoriesList: React.FC<CategoriesListProps> = ({
  tickets = [],
}) => {
  const classes = useStyles();
  const ticketCategories = getTicketTypeCategories(tickets);

  const [dialogOpened, setDialogOpened] = useState(false);

  return (
    <>
      <div className={classes.wrapper}>
        <div>
          <Typography component="h6" variant="h6" color="textPrimary">
            Vybrané lístky
          </Typography>
          <Divider />
          <ul className={classes.list}>
            {Object.keys(ticketCategories).map(item => (
              <li key={item} className={classes.category}>
                {item}: {ticketCategories[item]}
              </li>
            ))}
          </ul>
        </div>
        <div>
          <CustomButton
            label="Upravit výběr"
            size="large"
            color="inherit"
            variant="contained"
            onClick={e => setDialogOpened(true)}
          />
        </div>
      </div>
      <CategoriesListDialog
        open={dialogOpened}
        items={tickets}
        setDialogOpened={setDialogOpened}
      />
    </>
  );
};
