/* 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 } from "@mui/material";
import { makeStyles } from "@mui/styles";

import { observer } from "mobx-react";
import { getRootStore } from "../../models/root-store.ts";

const useStyles = makeStyles({
  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: 10,
    marginTop: 0,
    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 HomeContentTopEntry = () => {
  const [rootStore] = useState(() => getRootStore());
  const classes = useStyles();

  const selectedCounter = rootStore.counterList.all.find(
    (c) => c.id === rootStore.terminal.counterIdToCheck
  );
  
  const isParkingClosed =
    rootStore.terminal.useParkingCounterLogic &&
    selectedCounter &&
    selectedCounter.value > 0;
   
  
  const isPassageOpen = rootStore.passageList.actionState === 1;
  
  useEffect(() => {
    const timer = setTimeout(() => {
      rootStore.ui.setViewCancel(true);
      if (rootStore.ui.lostTicketMode === true) {
        rootStore.ui.setPriceToPay(-1);
        rootStore.ui.setLostTicketMode(false);
      }
    }, 15000);
    return () => clearTimeout(timer);
  });

  useEffect(() => {
    if (
      !showWait() &&
      rootStore.printerList.printerState === 3 &&
      !rootStore.printerList.newPrintCommandSend
    ) {
      const timer = setTimeout(() => {
        rootStore.printerList.setPrinterState(0);
        rootStore.printerList.setNewPrintSequence(false);
      }, 10000);
  
      return () => clearTimeout(timer);
    }
  }, [rootStore.printerList.printerState, rootStore.printerList.newPrintCommandSend]);

  useEffect(() => {
    if (rootStore.passageList.actionState === 0) {
      const resetTimer = setTimeout(() => {
        rootStore.printerList.setNewPrintSequence(false);
        rootStore.printerList.setNewPrintCommandSend(false);
        rootStore.printerList.setPrinterState(0);
      }, 500); // x seconds after passage closes
  
      return () => clearTimeout(resetTimer);
    }
  }, [rootStore.passageList.actionState]);
  
  
  const showWait = () => {
    if (rootStore.printerList.newPrintSequence) {
      if (
        rootStore.printerList.printerState !== 0 &&
        rootStore.printerList.printerState !== 1 &&
        rootStore.printerList.printerState !== 2 &&
        rootStore.printerList.printerState !== 3 &&
        rootStore.printerList.printerState !== 4
      ) {
        return true;
      }
      return false;
    }
    return true;
  };

  return (
    <Paper
      elevation={3}
      className={classes.paperTopPay}
      style={{ background: "#61728E85" }}
    >
      <Grid container justifyContent="center" spacing={0}>
        
      {isParkingClosed ? (
          <Grid item xs={12} sm={12} md={12} lg={12}>
            <Typography
              style={{
                color: rootStore.settings.darkMode ? "white" : "black",
                margin: 50,
                textAlign: "center",
              }}
              variant="h2"
            >
              {rootStore.languageList.t1("Access closed")}
            </Typography>
            <Typography
              style={{
                color: rootStore.settings.darkMode ? "white" : "black",
                margin: 50,
                textAlign: "center",
              }}
              variant="h2"
            >
              {rootStore.languageList.t2("Access closed")}
            </Typography>
            <Typography
              style={{
                color: rootStore.settings.darkMode ? "white" : "black",
                margin: 50,
                textAlign: "center",
              }}
              variant="h2"
            >
              {rootStore.languageList.t3("Access closed")}
            </Typography>
          </Grid>
        ) : (
          <Grid item xs={12} sm={12} md={12} lg={12}>
            {showWait() && !isPassageOpen ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1(
                    "Push the button to receive a ticket"
                  )}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2(
                    "Push the button to receive a ticket"
                  )}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3(
                    "Push the button to receive a ticket"
                  )}
                </Typography>
              </>
            ) : null}
            {(!showWait() && rootStore.printerList.printerState === 0) ||
            (rootStore.printerList.newPrintCommandSend && showWait()) ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1("Ticket is beeing printed")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2("Ticket is beeing printed")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3("Ticket is beeing printed")}
                </Typography>
              </>
            ) : null}
            {!showWait() && rootStore.printerList.printerState === 1 ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1("Please take your ticket")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2("Please take your ticket")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3("Please take your ticket")}
                </Typography>
              </>
            ) : null}
              {((!showWait() && rootStore.printerList.printerState === 2) || rootStore.passageList.actionState === 1 ) ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1("Please drive trough")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2("Please drive trough")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3("Please drive trough")}
                </Typography>
              </>
            ) : null}
            {!showWait() &&
            rootStore.printerList.printerState === 3 &&
            !rootStore.printerList.newPrintCommandSend ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1("Swallowed the ticket")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2("Swallowed the ticket")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3("Swallowed the ticket")}
                </Typography>
              </>
            ) : null}
            {!showWait() &&
            rootStore.printerList.printerState === 3 &&
            rootStore.printerList.newPrintCommandSend ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1("Ticket is beeing printed")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2("Ticket is beeing printed")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3("Ticket is beeing printed")}
                </Typography>
              </>
            ) : null}
            {!showWait() && rootStore.printerList.printerState === 4 ? (
              <>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t1("Problem with printer")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t2("Problem with printer")}
                </Typography>
                <Typography
                  style={{
                    color: rootStore.settings.darkMode ? "white" : "black",
                    margin: 50,
                    textAlign: "center",
                  }}
                  variant="h2"
                >
                  {rootStore.languageList.t3("Problem with printer")}
                </Typography>
              </>
            ) : null}
          </Grid>
        )}
      </Grid>
    </Paper>
  );
};

export default observer(HomeContentTopEntry);
