/* eslint-disable react/jsx-key */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-console */
/* eslint-disable radix */
import React, { useEffect, useState } from "react";
import {
  Grid,
  Paper,
  FormControlLabel,
  Checkbox,
  TextField,
  Slider,
  Button,
  IconButton,
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import Typography from "@mui/material/Typography";
import BuildIcon from "@mui/icons-material/Build";
import { observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import { Autocomplete } from "@mui/material";
import { useNavigate } from "react-router-dom";
import EuroIcon from "@mui/icons-material/Euro";
import SettingsIcon from "@mui/icons-material/SettingsOutlined";
import InsertChartIcon from "@mui/icons-material/InsertChart";
import SpeakerNotesIcon from "@mui/icons-material/SpeakerNotes";
import LocalOfferIcon from "@mui/icons-material/LocalOffer";
import EmojiTransportationIcon from "@mui/icons-material/EmojiTransportation";
import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
import packageJSON from "../../package.json";
import { getRootStore } from "../../models/root-store.ts";

const useStyles = makeStyles({
  content: {
    alignItems: "center",
  },
  root: {
    flexGrow: 1,
  },
  paper: {
    backgroundColor: "#95A5A6",
    textAlign: "center",
  },
  paperInput: {
    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,
  },
});

const applicationType = [
  { id: 0, name: "Virtual printer" },
  { id: 1, name: "Entry unit" },
  { id: 2, name: "Exit unit" },
  { id: 3, name: "Pay on foot" },
  { id: 4, name: "Pay in lane, entry" },
  { id: 5, name: "Pay in lane, exit" },
  { id: 6, name: "Counter dashboard" },
];

const resetType = [
  { id: 0, name: "All counters to 0, every day at 22:00" },
  { id: 1, name: "All counters to 0, every 1min ( for testing )" },
  {
    id: 2,
    name: "All counters every 10min to a random number between 20 - 40.",
  },
];

function ConfigurationMenu() {
  const classes = useStyles();
  const [rootStore] = useState(() => getRootStore());
  const [infoUpdateAvailable, setInfoUpdateAvailable] = React.useState({
    version: "",
    releaseDate: "",
  });
  const [infoUpdateNotAvailable, setInfoUpdateNotAvailable] = React.useState({
    version: "",
    releaseDate: "",
  });
  const [messageUpdate, setMessageUpdate] = React.useState();
  const [updateCheck, setUpdateCheck] = React.useState(false);
  const [updateAvailable, setUpdateAvailable] = React.useState();
  const [selectedStartDate, setSelectedStartDate] = React.useState<
    Date | number | null
  >(rootStore.ticketList.defaultStart);
  const [selectedEndDate, setSelectedEndDate] = React.useState<
    Date | number | null
  >(rootStore.ticketList.defaultEnd);
  const [newTicketLevel, setNewTicketLevel] = React.useState(
    rootStore.settings.ticketLevelToShow
  );
  const [selectedSerialPort, setSelectedSerialPort] = React.useState(
    rootStore.settings.getSerialByPath(rootStore.settings.serialPortPath)
  );
  const history = useNavigate();

  const { t } = useTranslation();

  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}>
            <Typography
              style={{
                color: rootStore.settings.darkMode ? "white" : "black",
              }}
              className={classes.content}
              variant="h4"
            >
              Configuration
            </Typography>
          </Grid>
          <Grid container justifyContent="center" spacing={2}>
            <Grid
              item
              xs={12}
              sm={6}
              md={6}
              lg={6}
              xl={6}
              sx={{ marginLeft: -1 }}
            >
              <Button
                className={classes.paperInput}
                variant="contained"
                color="primary"
                onClick={() => history("/configuration")}
                style={{ padding: 15, margin: 8 }}
                fullWidth
              >
                <BuildIcon
                  fontSize={rootStore.layout.iconSize}
                  style={{ padding: 25 }}
                />
                Users & Templates
              </Button>
              <Button
                variant="contained"
                color="primary"
                onClick={() => history("/tarif")}
                style={{ padding: 15, margin: 8 }}
                fullWidth
              >
                <LocalOfferIcon
                  fontSize={rootStore.layout.iconSize}
                  style={{ padding: 25 }}
                />
                Tarifs
              </Button>
              <Button
                variant="contained"
                color="primary"
                onClick={() => history("/simulator")}
                style={{ padding: 15, margin: 8 }}
                fullWidth
              >
                <InsertChartIcon
                  fontSize={rootStore.layout.iconSize}
                  style={{ padding: 25 }}
                />
                Simulator
              </Button>
            </Grid>
            <Grid
              item
              xs={12}
              sm={6}
              md={6}
              lg={6}
              xl={6}
              sx={{ marginRight: 1 }}
            >
              <Button
                variant="contained"
                color="primary"
                onClick={() => history("/logs")}
                style={{ padding: 15, margin: 8 }}
                fullWidth
              >
                <SpeakerNotesIcon
                  fontSize={rootStore.layout.iconSize}
                  style={{ padding: 25 }}
                />
                Logs
              </Button>
              <Button
                variant="contained"
                color="primary"
                onClick={() => history("/PassageControl")}
                style={{ padding: 15, margin: 8 }}
                fullWidth
              >
                <BusinessCenterIcon
                  fontSize={rootStore.layout.iconSize}
                  style={{ padding: 25 }}
                />
                Passage Control
              </Button>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  );
}

export default observer(ConfigurationMenu);
