/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable react/jsx-key */
import React, { useEffect, useState } from 'react';
import { Grid, Paper, Typography, Fab } from '@mui/material';
import { makeStyles } from '@mui/styles';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import { observer } from 'mobx-react';
import { getRootStore } from '../../models/root-store';

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

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

  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;
  };

  // If we never get the loop feedback
  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;

    if (showTicketOk()) {
      timer = setTimeout(() => {
        rootStore.passageList.setActionState(0);
        rootStore.ui.setEmvPaymentSuccess(false);
      }, 20000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [rootStore.passageList.actionState, rootStore.ui.emvPaymentSuccess]);

  useEffect(() => {
    return () => {
      rootStore.passageList.setActionState(0);
      rootStore.ui.setEmvPaymentSuccess(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"
                  >
                    {rootStore.languageList.t1('Price to pay: € ')}
                    {rootStore.ui.priceToPay.toFixed(2)}
                  </Typography>

                  {!rootStore.ui.lostTicketMode ? (
                    <Grid
                      item
                      xs={1}
                      sm={1}
                      md={1}
                      lg={1}
                      style={{ marginLeft: 20 }}
                      justifyContent="center"
                    >
                      <Fab
                        variant="extended"
                        size="large"
                        color="primary"
                        aria-label="add"
                        style={{
                          marginLeft: 25,
                          paddingTop: 40,
                          paddingBottom: 40,
                        }}
                        onClick={() =>
                          rootStore.ui.setViewDetail(!rootStore.ui.viewDetail)
                        }
                        // onTouchStartCapture={onClickEventLostTicket}
                      >
                        <Typography
                          style={{
                            padding: 10,
                          }}
                          variant="h4"
                        >
                          {rootStore.languageList.t1('Detail')}
                        </Typography>
                      </Fab>
                    </Grid>
                  ) : null}
                </Grid>
                <Grid container justifyContent="center" spacing={0}>
                  <Fab
                    variant="extended"
                    size="large"
                    color="primary"
                    aria-label="add"
                    style={{
                      margin: 50,
                      paddingLeft: 150,
                      paddingRight: 150,
                      paddingTop: 50,
                      paddingBottom: 50,
                    }}
                    // className={classes.buttonTicketLost}
                    onClick={() => {
                      rootStore.ui.setWantsProofOfPayment(
                        !rootStore.ui.wantsProofOfPayment
                      );
                    }}
                  >
                    {rootStore.ui.wantsProofOfPayment ? (
                      <CheckBoxIcon sx={{ fontSize: 50, marginRight: 10 }} />
                    ) : (
                      <CheckBoxOutlineBlankIcon
                        sx={{ fontSize: 50, marginRight: 10 }}
                      />
                    )}
                    <Typography
                      style={{
                        color: rootStore.settings.darkMode ? 'white' : 'black',
                      }}
                      variant="h4"
                    >
                      {rootStore.languageList.t1('Proof of payment')}
                    </Typography>
                  </Fab>
                </Grid>
                <Grid container justifyContent="center" spacing={0}>
                  <Typography
                    style={{
                      color: rootStore.settings.darkMode ? 'white' : 'black',
                      marginTop: 50,
                      paddingBottom: 20,
                    }}
                    variant="h4"
                  >
                    {rootStore.languageList.t1(
                      'Please follow the instructions on the payterminal to complete your payment.'
                    )}
                  </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(HomeContentTopExitPayInLane);
