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 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 AccountTreeIcon from "@mui/icons-material/AccountTree";

import BuildIcon from "@mui/icons-material/Build";
import { getSnapshot } from "mobx-keystone";
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={{ color: "white", fontSize: 11, whiteSpace: "pre-wrap" }}>
        {children}
      </pre>
    </>
  );
}

const ToolsRootStore = () => {
  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 className={classes.paperInput}>
          <PreSection title="Generated immutable snapshot">
            {JSON.stringify(getSnapshot(rootStore), null, 2)}
          </PreSection>
        </Paper>
      </Grid>
    </Grid>
  );
};

export default observer(ToolsRootStore);
