import { Box, Typography } from "@mui/material";
import * as React from "react";
import Ticket from "../../../models/Application/Ticket";
import QRPicture from "../../../assets/images/QR.png";

type Props = {
  obj: Ticket;
};

type State = {
  checked: boolean;
};

export default class ComponentToShow extends React.PureComponent<Props, State> {
  public componentDidMount() {}

  public render() {
    const { obj } = this.props;
    const { title } = obj;
    const { subtitle } = obj;
    const { text } = obj;
    const { startTime } = obj;
    const { endTime } = obj;

    return (
      <>
        <>
          <Box
            display="flex"
            flexDirection="column"
            alignItems="center"
            justifyContent="center"
            alignContent="center"
            alignSelf="center"
            width={230}
            marginLeft={4}
          >
            <Typography
              variant="h5"
              component="h5"
              className="text"
              style={{ fontWeight: "bold" }}
            >
              {title}
            </Typography>
            <Typography variant="h6" component="h6" className="text">
              {subtitle}
            </Typography>
            <Typography
              variant="body1"
              component="p"
              align="center"
              style={{ fontSize: 14 }}
              className="text"
            >
              {text}
            </Typography>
            <img src={QRPicture} alt="QRPicture" />
            <Typography
              variant="body1"
              component="span"
              className="textStartTime"
              style={{
                fontSize: 12,
                height: "40px",
                marginTop: 10,
                marginBottom: 10,
              }}
            >
              {startTime.slice(0, 2)}:{startTime.slice(2, 4)}:
              {startTime.slice(4, 6)}
              {startTime.slice(6, 7)}
              {startTime.slice(7, 9)}/{startTime.slice(9, 11)}/
              {startTime.slice(11, 13)}
              {" --> "}
              {endTime.slice(0, 2)}:{endTime.slice(2, 4)}:{endTime.slice(4, 6)}
              {endTime.slice(6, 7)}
              {endTime.slice(7, 9)}/{endTime.slice(9, 11)}/
              {endTime.slice(11, 13)}
            </Typography>
          </Box>
        </>
      </>
    );
  }
}
