import moment from "moment";
import React from "react";
import { useHistory } from "react-router-dom";
import { calculateTimeout } from "../../utils/formatDate";

import useStyles from "./styles";
export default function BtnGoToCheckout({ movieShowtimes }) {
  let formatDayTimes = moment(movieShowtimes.dateShow).format(
    "YYYY-MM-DDTHH:mm:SS"
  );
  let currentDay = moment().format("YYYY-MM-DDTHH:mm:SS");
  const classes = useStyles();
  const history = useHistory();
  const formatDateShow = new Date(movieShowtimes.dateShow)
    .toLocaleTimeString([], { hour12: false })
    .slice(0, 5);

  return (
    formatDayTimes > currentDay && (
      <button
        className={classes.button}
        onClick={() =>
          history.push(
            `/booking-tickets/${movieShowtimes._id}`,
            `/booking-tickets/${movieShowtimes._id}`
          )
        }
      >
        <span className={classes.inTime}>{formatDateShow}</span>
        <span className={classes.outTime}>{` ~ ${calculateTimeout(
          movieShowtimes.dateShow
        )}`}</span>
      </button>
    )
  );
}