/* eslint-disable react/jsx-key */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable compat/compat */
/* eslint-disable react/jsx-props-no-spreading */
import React, { useState } from 'react';
import {
  Grid,
  Paper,
  TextField,
  Button,
  Switch,
  Autocomplete,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
import Typography from '@mui/material/Typography';
import { observer } from 'mobx-react';
import { ipcRenderer } from 'electron';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { getRootStore } from '../../../models/root-store';

const useStyles = makeStyles({
  content: {
    alignItems: 'center',
  },
  root: {
    flexGrow: 1,
  },
  paper: {
    backgroundColor: '#95A5A6',
    textAlign: 'center',
  },
  paperInput: {
    backgroundColor: '#666666',
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  paperInputNested: {
    backgroundColor: '#7d7d7d',
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  button: {
    backgroundColor: '#3E3E3E',
    height: '90%',
    width: '90%',
    margin: 25,
    padding: 25,
    textAlign: 'center',
  },
  typo: {
    fontSize: 'auto',
  },
  paperTop: {
    alignItems: 'center',
    padding: 10,
    marginTop: 15,
    margin: 15,
  },
  input: {
    color: 'white',
    fontSize: '1.1em',
    padding: '5px',
    width: 'auto',
  },
  inputLabel: {
    color: 'black',
    fontSize: '20px',
  },
});

const ExitUnitAdvanced = observer(() => {
  const classes = useStyles();
  const [rootStore] = useState(() => getRootStore());
  const [selectedSerialPort, setSelectedSerialPort] = React.useState(
    rootStore.settings.getSerialByPath(rootStore.settings.serialPortPath)
  );

  const handleChangeLostTicket = (event: any, newValue: any) => {
    if (newValue !== null) {
      rootStore.settings.setLostTicket(newValue.id);
    }
  };

  const handleChangeSerialPort = (event: any, newValue: any) => {
    if (newValue !== null && newValue !== 'No ports detected') {
      setSelectedSerialPort(newValue.path);
      ipcRenderer.send('setSerialPath', newValue.path);
      rootStore.settings.setSerialPortPath(newValue.path);
    }
  };

  const handleRestart = (event: any) => {
    ipcRenderer.send('restart', 'tst');
  };

  return (
    <>
      {rootStore.acs01List.defaultAcs01 &&
      rootStore.acs01List.defaultAcs01?.localName !== '' ? (
        <>
          <Grid
            container
            justifyContent="center"
            alignItems="center"
            spacing={0}
          >
            <Grid item xs={12} md={12} lg={12} xl={12}>
              <Paper
                elevation={3}
                className={classes.paperTop}
                style={{ background: `${rootStore.settings.backgroundColor}` }}
              >
                <Paper className={classes.paperInput}>
                  <Grid item xs={12}>
                    <Typography
                      className={classes.content}
                      variant="h6"
                      component="span"
                    >
                      Use scanner connected to display
                    </Typography>
                    <Switch
                      checked={rootStore.terminal.scannerConnectedToDisplay}
                      onChange={async () => {
                        rootStore.terminal.setScannerConnectedToDisplay(
                          !rootStore.terminal.scannerConnectedToDisplay
                        );
                      }}
                      inputProps={{ 'aria-label': 'controlled' }}
                    />
                  </Grid>
                </Paper>
                {rootStore.settings.applicationMode === 2 ? (
                  <Paper className={classes.paperInputNested}>
                    <br />
                    {rootStore.ticketList.all.length !== 0 ? (
                      <>
                        <Autocomplete
                          id="lostTicket"
                          value={rootStore.ticketList.getTicketById(
                            rootStore.settings.lostTicketId
                          )}
                          options={rootStore.ticketList.all}
                          getOptionLabel={(option) => option.title}
                          onChange={handleChangeLostTicket}
                          disableClearable
                          selectOnFocus
                          clearOnBlur
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              label="Lost ticket"
                              variant="outlined"
                            />
                          )}
                        />
                        <br />
                        <br />
                      </>
                    ) : null}
                    {rootStore.settings.serialPortList.length === 0 ? (
                      <Typography className={classes.content} variant="body1">
                        No serial port detected.
                      </Typography>
                    ) : (
                      <>
                        <Autocomplete
                          id="serialPort"
                          value={rootStore.settings.getSerialByPath(
                            rootStore.settings.serialPortPath
                          )}
                          options={rootStore.settings.serialPortList}
                          getOptionLabel={(option) => option.path}
                          onChange={handleChangeSerialPort}
                          disableClearable
                          selectOnFocus
                          clearOnBlur
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              label="Serial port"
                              variant="outlined"
                            />
                          )}
                        />
                        <br />
                      </>
                    )}
                    {selectedSerialPort !==
                    rootStore.settings.getSerialByPath(
                      rootStore.settings.serialPortPath
                    ) ? (
                      <>
                        <Typography className={classes.content} variant="body1">
                          Please reboot application in order for the changes to
                          apply.
                        </Typography>
                        <Button
                          variant="contained"
                          color="primary"
                          onClick={handleRestart}
                        >
                          Restart
                        </Button>
                      </>
                    ) : null}
                  </Paper>
                ) : null}

              </Paper>
            </Grid>
          </Grid>
        </>
      ) : null}
    </>
  );
});

export default ExitUnitAdvanced;
