/* eslint-disable react/jsx-key */
/* eslint-disable consistent-return */
/* eslint-disable compat/compat */
/* eslint-disable radix */
import React, { useEffect, useState } from "react";
import { Grid, Paper, Typography, Fab } from "@mui/material";
import { makeStyles } from "@mui/styles";

import { observer } from "mobx-react";
import SerialPort from "serialport";
import TicketModelListView from "../views/TicketModelListView";
import AddTicketModelView from "../views/AddTicketModelView";
import { getRootStore } from "../../models/root-store.ts";
import Template from "../../models/Application/Template";

const useStyles = makeStyles({
  content: {
    alignItems: "center",
    marginTop: -80,
    "@media print": {
      display: "none",
    },
  },
  typoAddTicket: {
    marginLeft: 5,
    marginTop: 10,
    marginBottom: 10,
  },
  buttonTicketLost: {
    marginTop: 10,
    paddingTop: 70,
    paddingBottom: 70,
    paddingLeft: 90,
    paddingRight: 90,
    margins: 20,
  },
  paper: {
    alignItems: "center",
    padding: 10,
    marginTop: 10,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  paperTop: {
    alignItems: "center",
    padding: 15,
    marginTop: 100,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  paperTopPay: {
    alignItems: "center",
    padding: 15,
    marginTop: 10,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  paperTopPayContent: {
    alignItems: "center",
    padding: 15,
    marginTop: 0,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  animatedItem: {
    zIndex: 2,
    marginTop: 170,
    animation: `$myEffect 3000ms infinite alternate`,
  },
  "@keyframes myEffect": {
    "100%": {
      zIndex: 2,
      opacity: 1,
      transform: "translateX(23%)",
    },
    "0%": {
      zIndex: 2,
      opacity: 1,
      transform: "translateX(-45%)",
    },
  },
  animatedItemPay: {
    zIndex: 2,
    marginTop: 170,
    animation: `$myEffectPay 5000ms infinite alternate`,
  },
  "@keyframes myEffectPay": {
    "100%": {
      opacity: 1,
      transform: "translateX(55%)",
    },
    "0%": {
      opacity: 1,
      transform: "translateX(-45%)",
    },
  },
  zoomedItem: {
    overflow: "hidden",
  },
  animatedItemPayZoom: {
    animation: `$myEffectPayZoom 5000ms infinite alternate ease-in-out`,
    zIndex: 1,
  },
  "@keyframes myEffectPayZoom": {
    "100%": {
      zIndex: 1,
      opacity: 1,
      transform: "scale(1.5)",
    },
    "0%": {
      zIndex: 1,
      opacity: 1,
      transform: "scale(1)",
    },
  },
});

const HomeContentTopPayOnFoot = () => {
  const [rootStore] = useState(() => getRootStore());
  const classes = useStyles();
  const [template, setTemplate] = React.useState<Template>();
  const [endTime, setEndTime] = useState<Date>();

  const showScan = () => {
    if (rootStore.terminal.scannerConnectedToDisplay) {
      // Below so that we dont ask to scan a ticket when the emv is unavailable
      if (rootStore.ui.emvInitState === 2 && rootStore.ui.emvState === 2) {
        return false;
      }
      if (rootStore.ui.emvPaymentSuccess) {
        return false;
      }
      return true;
    }
    if (
      rootStore.passageList.actionState === 1 ||
      rootStore.passageList.actionState === 3 ||
      rootStore.auxList.auxLostTicketActionState === 1 ||
      rootStore.auxList.auxLostTicketActionState === 3
    ) {
      return false;
    }
    return true;
  };

  const showTicketOk = () => {
    if (rootStore.passageList.actionState === 4) {
      return true;
    }
    if (rootStore.terminal.scannerConnectedToDisplay) {
      if (rootStore.ui.creditsError === true) {
        return false;
      }
      if (
        rootStore.ui.emvPaymentSuccess === true ||
        rootStore.ui.emvPaymentNotNeccessary === true
      ) {
        return true;
      }
      if (
        rootStore.passageList.actionState === 1 ||
        rootStore.passageList.actionState === 3
      ) {
        return true;
      }
      return false;
    }
    if (
      rootStore.passageList.actionState === 1 ||
      (rootStore.passageList.actionState === 3 &&
        rootStore.auxList.auxLostTicketActionState !== 1 &&
        rootStore.auxList.auxLostTicketActionState !== 3)
    ) {
      return true;
    }
    return false;
  };

  const showPay = () => {
    if (
      rootStore.auxList.auxLostTicketActionState === 1 ||
      rootStore.auxList.auxLostTicketActionState === 3
    ) {
      return true;
    }
    return false;
  };

  const onClickEventLostTicket = async (e: any) => {
    e.preventDefault();
    const ticketPrice = rootStore.ticketList.getTicketById(
      rootStore.settings.lostTicketId
    )?.price;
    if (typeof ticketPrice === "number") {
      rootStore.ui.setPriceToPay(ticketPrice);
      // emvSendAmount(ticketPrice);
    } else {
      return;
    }
    rootStore.ui.setViewCancel(false);
    rootStore.ui.setLostTicketMode(true);
    rootStore.ui.setViewDetail(false);
  };

  return (
    <Paper
      elevation={3}
      className={classes.paperTopPay}
      style={{ background: "#61728E85", margin: 50, paddingRight: 50 }}
    >
      <Grid container justifyContent="center" spacing={0}>
        {!rootStore.ui.emvPaymentSuccess && rootStore.ui.priceToPay !== -1 ? (
          <>
            <Grid item xs={12} sm={12} md={12} lg={12}>
              <Grid container justifyContent="center" spacing={0}>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    marginLeft: 150,
                  }}
                  variant="h1"
                >
                  Price to pay: € {rootStore.ui.priceToPay}
                </Typography>
                <Grid
                  item
                  xs={1}
                  sm={1}
                  md={1}
                  lg={1}
                  style={{ marginLeft: 20 }}
                  justifyContent="center"
                >
                  {!rootStore.ui.lostTicketMode ? (
                    <Fab
                      variant="extended"
                      size="large"
                      color="primary"
                      aria-label="add"
                      style={{ marginTop: 0 }}
                      // className={classes.buttonTicketLost}
                      onClick={() =>
                        rootStore.ui.setViewDetail(!rootStore.ui.viewDetail)
                      }
                      // onTouchStartCapture={onClickEventLostTicket}
                    >
                      Detail
                    </Fab>
                  ) : null}
                </Grid>
                <Grid
                  item
                  xs={1}
                  sm={1}
                  md={1}
                  lg={1}
                  style={{ marginLeft: 20 }}
                  justifyContent="center"
                >
                  {rootStore.ui.viewCancel ? (
                    <Fab
                      variant="extended"
                      size="large"
                      color="secondary"
                      aria-label="add"
                      style={{
                        backgroundColor: "#f44336",
                        marginTop: 0,
                      }}
                      // className={classes.buttonTicketLost}
                      onClick={() => {
                        rootStore.settings.setSerialMessage("");
                        setEndTime(undefined);
                        rootStore.ui.setPriceToPay(-1);
                        setTemplate(undefined);
                        rootStore.ui.setLostTicketMode(false);
                      }}
                      // onTouchStartCapture={onClickEventLostTicket}
                    >
                      Cancel
                    </Fab>
                  ) : null}
                </Grid>
              </Grid>
              <Grid container justifyContent="center" spacing={0}>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    marginTop: 50,
                  }}
                  variant="h4"
                >
                  Please follow the instructions on the payterminal to complete
                  your payment.
                </Typography>
              </Grid>
            </Grid>
          </>
        ) : null}
        {!rootStore.ui.emvPaymentSuccess &&
        rootStore.ui.priceToPay === -1 &&
        rootStore.ui.emvPaymentNotNeccessary === false ? (
          <>
            <Grid item xs={10} sm={10} md={10} lg={10}>
              <Grid container justifyContent="center" spacing={0}>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                  }}
                  variant="h4"
                >
                  Please scan your ticket
                </Typography>
              </Grid>
            </Grid>
            <Grid item xs={2} sm={2} md={2} lg={2}>
              <Fab
                variant="extended"
                size="large"
                color="primary"
                aria-label="add"
                style={{ marginTop: 30, paddingTop: 40, paddingBottom: 40 }}
                // className={classes.buttonTicketLost}
                onClick={onClickEventLostTicket}
                // onTouchStartCapture={onClickEventLostTicket}
              >
                <Typography
                  style={{
                    padding: 10,
                  }}
                  variant="body1"
                >
                  Lost ticket?
                </Typography>
              </Fab>
            </Grid>
          </>
        ) : null}
        {rootStore.ui.emvPaymentSuccess ? (
          <>
            <Grid item xs={12} sm={12} md={12} lg={12}>
              <Grid container justifyContent="center" spacing={0}>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                  }}
                  variant="h4"
                >
                  Ticket payed successfully, please go to the exit.
                </Typography>
              </Grid>
            </Grid>
          </>
        ) : null}
        {rootStore.ui.priceToPay === -1 &&
        rootStore.ui.emvPaymentNotNeccessary === true ? (
          <>
            <Grid item xs={12} sm={12} md={12} lg={12}>
              <Grid container justifyContent="center" spacing={0}>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                  }}
                  variant="h4"
                >
                  Ticket is still in free time, please go to the exit
                </Typography>
              </Grid>
            </Grid>
          </>
        ) : null}
      </Grid>
    </Paper>
  );
};

export default observer(HomeContentTopPayOnFoot);
