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

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

const useStyles = makeStyles({
  paperTopPay: {
    alignItems: "center",
    padding: 15,
    marginTop: 10,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
});

const HomeContentTopExit = () => {
  const [rootStore] = useState(() => getRootStore());
  const classes = useStyles();

  const showScan = () => {
    if (rootStore.passageList.actionState === 4) {
      return false;
    }
    if (
      rootStore.passageList.actionState === 1 ||
      rootStore.passageList.actionState === 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.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;
  };

  return (
    <>
      {rootStore.terminal.scannerConnectedToDisplay ? (
        <Paper
          elevation={3}
          className={classes.paperTopPay}
          style={{ background: "#61728E85" }}
        >
          <Grid container justifyContent="center" spacing={0}>
            {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: 0,
                      }}
                      variant="h1"
                    >
                      Price to pay: € {rootStore.ui.priceToPay.toFixed(2)}
                    </Typography>
                  </Grid>
                  <Grid container justifyContent="center" spacing={0}>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        marginTop: 50,
                      }}
                      variant="h4"
                    >
                      Please first pay your ticket
                    </Typography>
                  </Grid>
                </Grid>
              </>
            ) : (
              <>
                <Grid item xs={12} sm={12} md={12} lg={12}>
                  {showTicketOk() ? (
                    <>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t1(
                          "Ticket OK, please drive trough"
                        )}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t2(
                          "Ticket OK, please drive trough"
                        )}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t3(
                          "Ticket OK, please drive trough"
                        )}
                      </Typography>
                    </>
                  ) : null}
                  {rootStore.ui.emvPaymentSuccess === true ? (
                    <>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t1(
                          "Payment OK, please drive trough"
                        )}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t2(
                          "Payment OK, please drive trough"
                        )}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t3(
                          "Payment OK, please drive trough"
                        )}
                      </Typography>
                    </>
                  ) : null}
                  {rootStore.ui.emvInitState === 2 &&
                  rootStore.ui.emvState === 2 ? (
                    <>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t1(
                          "Payment terminal is busy, please wait"
                        )}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t2(
                          "Payment terminal is busy, please wait"
                        )}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t3(
                          "Payment terminal is busy, please wait"
                        )}
                      </Typography>
                    </>
                  ) : null}
                  {!showTicketOk() &&
                  showScan() &&
                  rootStore.ui.creditsError === false &&
                  rootStore.ui.emvPaymentSuccess === false ? (
                    <>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t1("Please scan your ticket")}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t2("Please scan your ticket")}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t3("Please scan your ticket")}
                      </Typography>
                    </>
                  ) : null}
                  {rootStore.ui.creditsError === true &&
                  rootStore.ui.emvPaymentSuccess === false ? (
                    <>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t1("Ticket already used")}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t2("Ticket already used")}
                      </Typography>
                      <Typography
                        style={{
                          color: rootStore.settings.darkMode
                            ? "white"
                            : "black",
                          margin: 50,
                          textAlign: "center",
                        }}
                        variant="h2"
                      >
                        {rootStore.languageList.t3("Ticket already used")}
                      </Typography>
                    </>
                  ) : null}
                </Grid>
              </>
            )}
          </Grid>
        </Paper>
      ) : (
        <Paper
          elevation={3}
          className={classes.paperTopPay}
          style={{ background: "#61728E85" }}
        >
          <Grid container justifyContent="center" spacing={0}>
            {!rootStore.scenarioList.state &&
            rootStore.scenarioList.defaultScenarioConfigured ? (
              <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}>
                {rootStore.passageList.actionState === 0 &&
                rootStore.auxList.defaultUnknownTicketOutputState !== 1 &&
                rootStore.auxList.defaultUnknownTicketOutputState !== 3 &&
                showScan() ? (
                  <>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t1("Please scan your ticket")}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t2("Please scan your ticket")}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t3("Please scan your ticket")}
                    </Typography>
                  </>
                ) : null}
                {showTicketOk() ? (
                  <>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t1(
                        "Ticket OK, please drive trough"
                      )}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t2(
                        "Ticket OK, please drive trough"
                      )}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t3(
                        "Ticket OK, please drive trough"
                      )}
                    </Typography>
                  </>
                ) : null}
                {(rootStore.auxList.defaultUnknownTicketOutputState === 1 ||
                  rootStore.auxList.defaultUnknownTicketOutputState === 3) &&
                !showScan() ? (
                  <>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t1("Ticket already used")}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t2("Ticket already used")}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t3("Ticket already used")}
                    </Typography>
                  </>
                ) : null}
                {(rootStore.auxList.auxLostTicketActionState === 1 ||
                  rootStore.auxList.auxLostTicketActionState === 3) &&
                showPay() ? (
                  <>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t1(
                        "Please pay, follow the instructions on the pay terminal"
                      )}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t2(
                        "Please pay, follow the instructions on the pay terminal"
                      )}
                    </Typography>
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? "white" : "black",
                        margin: 50,
                        textAlign: "center",
                      }}
                      variant="h2"
                    >
                      {rootStore.languageList.t3(
                        "Please pay, follow the instructions on the pay terminal"
                      )}
                    </Typography>
                  </>
                ) : null}
              </Grid>
            )}
          </Grid>
        </Paper>
      )}
    </>
  );
};

export default observer(HomeContentTopExit);
