/* eslint-disable react/jsx-key */
/* eslint-disable radix */
/* eslint-disable no-nested-ternary */
/* eslint-disable react/jsx-props-no-spreading */
import React, { useEffect, useState } from "react";
import { Grid, Paper, Button, TextField } from "@mui/material";
import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
import Typography from "@mui/material/Typography";
import { makeStyles } from "@mui/styles";

import NumberFormat from "react-number-format";
import { observer } from "mobx-react";
import { customAlphabet } from "nanoid";
import { draft } from "mobx-keystone";
import { useTranslation } from "react-i18next";
import User from "../../models/Application/User";
import { getRootStore } from "../../models/root-store.ts";
import Log from "../../models/Logs/Log";

const useStyles = makeStyles({
  dataGrid: {
    border: 0,
    color: "white",
  },
  content: {
    alignItems: "center",
  },
  root: {
    flexGrow: 1,
  },
  paper: {
    backgroundColor: "#95A5A6",
    textAlign: "center",
  },
  paperInput: {
    backgroundColor: "#666666",
    alignItems: "center",
    justifyItems: "baseline",
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  buttons: {
    backgroundColor: "#666666",
    alignItems: "center",
    alignSelf: "center",
    marginRight: 35,
    minHeight: 70,
    padding: 0,
    margin: 0,
  },
  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: "lightgrey",
    fontSize: "20px",
  },
  inputNumbers: {
    color: "white",
    fontSize: "1.2em",
    padding: "5px",
    width: "auto",
  },
});

function FaultsGrid() {
  const classes = useStyles();
  const [rootStore] = useState(() => getRootStore());
  const [rows, setRows] = useState<Log[]>(rootStore.logs.allFaults);
  const [selectedRows, setSelectedRows] = useState<any>([]);

  const { t } = useTranslation();

  const handlePurge = () => {
    rootStore.userList.removeByIds(selectedRows);
    setRows(rootStore.logs.allFaults);
    setSelectedRows([]);
  };

  const handleSelectionChange = (selection: any) => {
    setSelectedRows(selection);
  };

  const columns: GridColDef[] = [
    { field: "name", headerName: t("common.Name"), flex: 1 },
    { field: "pincode", headerName: t("userGrid.Pincode"), width: 130 },
    { field: "userlevel", headerName: t("userGrid.User level"), width: 250 },
  ];
  return (
    <Paper
      elevation={3}
      className={classes.paperTop}
      style={{
        background: `${rootStore.settings.backgroundColor}`,
        marginBottom: 60,
      }}
    >
      <Typography
        className={classes.content}
        style={{ color: rootStore.settings.darkMode ? "white" : "black" }}
        variant="h4"
      >
        Faults
      </Typography>
      <Paper className={classes.paperInput}>
        <Grid container spacing={0}>
          <Grid
            item
            xs={12}
            style={{ height: rootStore.settings.gridHeight, width: "100%" }}
          >
            <DataGrid
              className={classes.dataGrid}
              rows={rootStore.logs.allFaults}
              components={{
                Toolbar: GridToolbar,
              }}
              columns={columns}
              pageSize={5}
              checkboxSelection
              onSelectionModelChange={handleSelectionChange}
              localeText={{
                columnMenuSortAsc: t("grid.columnMenuSortAsc"),
                columnMenuSortDesc: t("grid.columnMenuSortDesc"),
                columnMenuFilter: t("grid.columnMenuFilter"),
                columnMenuHideColumn: t("grid.columnMenuHideColumn"),
                columnMenuShowColumns: t("grid.columnMenuShowColumns"),
                columnMenuUnsort: t("grid.columnMenuUnsort"),
                noRowsLabel: t("grid.noRowsLabel"),
                footerRowSelected: (count) =>
                  count !== 1
                    ? `${count.toLocaleString()} ${t("grid.rowsSelected")}`
                    : `${count.toLocaleString()} ${t("grid.rowSelected")}`,
              }}
            />
          </Grid>
        </Grid>
        {selectedRows.length > 0 ? (
          <Button
            variant="contained"
            color="primary"
            style={{ backgroundColor: "#f44336" }}
            onClick={handlePurge}
          >
            {t("common.Delete-button")}
          </Button>
        ) : null}
      </Paper>
    </Paper>
  );
}

export default observer(FaultsGrid);
