import React from 'react';
import { Grid } from '@material-ui/core';
import { ContentWrapper } from 'components/content-wrapper/content-wrapper';
import { TicketAdministrationForm } from 'modules/tickets/formulars/administration-formular';
import { Typography } from '@material-ui/core';
import { useFetch } from 'utils/use-fetch';
import { TicketTypeList } from 'components/ticket/ticket-type-list';

export const Administration: React.FC = () => {
  const ticketTypes =
    useFetch('http://localhost:8000/tickets/type/list-all').response ?? [];

  return (
    <ContentWrapper>
      <>
        <Grid item style={{ marginLeft: 50 }}>
          <Typography component="h1" variant="h3" style={{ marginBottom: 50 }}>
            Vytvoření nového lístku
          </Typography>
          <TicketAdministrationForm />
        </Grid>
        <Grid item style={{ marginLeft: 200 }}>
          <Typography component="h2" variant="h4" style={{ marginBottom: 25 }}>
            Přehled typů lístků
          </Typography>
          <TicketTypeList ticketTypes={ticketTypes} />
        </Grid>
      </>
    </ContentWrapper>
  );
};
