import React, { useContext } from 'react';
import { TicketType } from 'common/types';
import { useStyles } from './ticket-styles';
import barcode from '../../assets/images/barcode.png';
import Typography from '@material-ui/core/Typography';
import { AppContext } from 'context/app-context';
import { TicketTypeTypes } from 'common/enums';
import { theme } from 'components/theme/theme';

export const Ticket: React.FC<TicketType> = ({
  id,
  type,
  tariff,
  label,
  price,
}) => {
  const { dispatch } = useContext(AppContext);
  const classes = useStyles();

  const handleClick = () => {
    dispatch({
      type: 'ticket/add',
      payload: { id, type, tariff, label, price },
    });
  };

  return (
    <div
      className={classes.ticketWrapper}
      onClick={e => handleClick()}
      style={{
        backgroundColor:
          type === TicketTypeTypes.MULTIPLE_ENTRY
            ? theme.palette.secondary.main
            : 'inherit',
      }}
    >
      <div className={classes.qrCodeDiv}>
        <img src={barcode} alt="qr_code" width="70px" height="70px" />
      </div>
      <div className={classes.ticketBody}>
        <Typography component="span" align="center">
          {label}
        </Typography>
      </div>
    </div>
  );
};
