import React, { useContext } from 'react';
import { Grid } from '@material-ui/core';
import { ContentWrapper } from 'components/content-wrapper/content-wrapper';
import { AppContext } from 'context/app-context';
import { Typography } from '@material-ui/core';
import Divider from '@material-ui/core/Divider';
import { SummaryList } from 'components/ticket/summary-list';
import { CustomButton } from 'components/button/custom-button';
import { customFetch } from 'utils/fetch';
import { useStyles } from './styles';

export const Payment: React.FC = () => {
  const { state } = useContext(AppContext);
  const finalPrice = state.sell.finalPrice;
  const ticketsToPay = state.sell.ticketTypes;

  const classes = useStyles();

  return (
    <ContentWrapper>
      <Grid item>
        <Typography component="h1" variant="h3" style={{ marginBottom: 50 }}>
          K zaplacení
        </Typography>
        <SummaryList tickets={ticketsToPay} />
        <Divider />
        <div className={classes.sum}>
          <Typography component="h5" variant="h5">
            Součet:
          </Typography>
          <span className={classes.finalPrice}>{finalPrice} Kč</span>
        </div>
        <div className={classes.sellButton}>
          <CustomButton
            label="POTVRDIT"
            color="secondary"
            fullWidth
            variant="contained"
            size="large"
            onClick={() =>
              customFetch('tickets/multiple', state.sell.ticketTypes)
            }
          />
        </div>
      </Grid>
    </ContentWrapper>
  );
};
