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

import { observer } from 'mobx-react';
import { useNavigate } from 'react-router-dom';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import { getSnapshot } from 'mobx-keystone';
import AccountTreeIcon from '@mui/icons-material/AccountTree';
import { getRootStore } from '../../../models/root-store.ts';

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,
  },
  paperUpdate: {
    backgroundColor: '#EAEAEA',
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 50,
  },
  buttons: {
    backgroundColor: '#666666',
    alignItems: 'center',
    alignSelf: 'center',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  gridItemButton: {
    margin: 0,
    padding: 0,
    textAlign: 'center',
  },
  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,
  },
  typoAddTicket: {
    marginLeft: 25,
    marginTop: 10,
    marginBottom: 10,
  },
  input: {
    color: 'white',
    fontSize: '1.1em',
    padding: '5px',
    width: 'auto',
  },
  inputLabel: {
    color: 'black',
    fontSize: '20px',
  },
  inputNumbers: {
    color: 'white',
    fontSize: '1.2em',
    padding: '5px',
    width: 'auto',
  },
  buttonInput: {
    backgroundColor: '#666666',
    alignItems: 'center',
    justifyContentContent: 'center',
    padding: 20,
    marginTop: 20,
    marginLeft: 10,
  },
});

function PreSection(props: any) {
  const { title, children } = props;
  return (
    <>
      <h5>{title}</h5>
      <pre style={{ fontSize: 10, whiteSpace: 'pre-wrap' }}>{children}</pre>
    </>
  );
}

function Tools() {
  const classes = useStyles();
  const history = useNavigate();

  const [rootStore] = useState(() => getRootStore());
  return (
    <Grid container justifyContent="center" spacing={0}>
      <Grid item xs={12} md={12} lg={10} xl={8}>
        <Paper
          elevation={3}
          className={classes.paperTop}
          style={{ background: `${rootStore.settings.backgroundColor}` }}
        >
          <Grid item xs={12} md={12} lg={12} xl={12}>
            <Button
              style={{ marginTop: -10, marginRight: 15 }}
              variant="outlined"
              onClick={() => history('/')}
            >
              <Typography
                style={{
                  color: rootStore.settings.darkMode ? 'white' : 'black',
                }}
                variant="h4"
              >
                {`<`}
              </Typography>
            </Button>
            <Typography
              style={{
                color: rootStore.settings.darkMode ? 'white' : 'black',
                margin: 0,
              }}
              variant="h4"
              component="span"
            >
              Tools
            </Typography>
          </Grid>
          <Grid container justifyContent="center" spacing={0}>
            <Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
              <Paper className={classes.paperInput}>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => history('/backup')}
                  style={{ padding: 25 }}
                  fullWidth
                >
                  <SettingsBackupRestoreIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ paddingRight: 20 }}
                  />
                  Backup
                </Button>
              </Paper>
              <Paper className={classes.paperInput}>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => history('/passageControl')}
                  style={{ padding: 25 }}
                  fullWidth
                >
                  <SportsEsportsIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ paddingRight: 20 }}
                  />
                  Control
                </Button>
              </Paper>

              <Paper className={classes.paperInput}>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => history('/toolsRootStore')}
                  style={{ padding: 25 }}
                  fullWidth
                >
                  <AccountTreeIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ paddingRight: 20 }}
                  />
                  RootStore
                </Button>
              </Paper>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  );
}

export default observer(Tools);
