/* eslint-disable compat/compat */
/* eslint-disable radix */
import React, { useEffect, useState } from "react";
import { Grid, Paper, Fab } from "@mui/material";
import { makeStyles } from "@mui/styles";

import { observer } from "mobx-react";
import { getRootStore } from "../../models/root-store.ts";
import ReportGrid from "./ReportGrid";

const useStyles = makeStyles({
  content: {
    alignItems: "center",
    marginTop: -80,
    "@media print": {
      display: "none",
    },
  },
  typoAddTicket: {
    marginLeft: 5,
    marginTop: 10,
    marginBottom: 10,
  },
  buttonTicketLost: {
    marginTop: 10,
    paddingTop: 70,
    paddingBottom: 70,
    paddingLeft: 90,
    paddingRight: 90,
    margins: 20,
  },
  paper: {
    alignItems: "center",
    padding: 10,
    marginTop: 10,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  paperTop: {
    alignItems: "center",
    padding: 15,
    marginTop: 100,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  paperTopPay: {
    alignItems: "center",
    padding: 15,
    marginTop: 10,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  paperTopPayContent: {
    alignItems: "center",
    padding: 15,
    marginTop: 0,
    margin: 20,
    "@media print": {
      display: "none",
    },
  },
  animatedItem: {
    zIndex: 2,
    marginTop: 170,
    animation: `$myEffect 3000ms infinite alternate`,
  },
  "@keyframes myEffect": {
    "100%": {
      zIndex: 2,
      opacity: 1,
      transform: "translateX(23%)",
    },
    "0%": {
      zIndex: 2,
      opacity: 1,
      transform: "translateX(-45%)",
    },
  },
  animatedItemPay: {
    zIndex: 2,
    marginTop: 170,
    animation: `$myEffectPay 5000ms infinite alternate`,
  },
  "@keyframes myEffectPay": {
    "100%": {
      opacity: 1,
      transform: "translateX(55%)",
    },
    "0%": {
      opacity: 1,
      transform: "translateX(-45%)",
    },
  },
  zoomedItem: {
    overflow: "hidden",
  },
  animatedItemPayZoom: {
    animation: `$myEffectPayZoom 5000ms infinite alternate ease-in-out`,
    zIndex: 1,
  },
  "@keyframes myEffectPayZoom": {
    "100%": {
      zIndex: 1,
      opacity: 1,
      transform: "scale(1.5)",
    },
    "0%": {
      zIndex: 1,
      opacity: 1,
      transform: "scale(1)",
    },
  },
});

const HomeContentBottomCounter = () => {
  const [rootStore] = useState(() => getRootStore());
  const classes = useStyles();

  return (
    <>
      <Grid item xs={12}>
        <Grid container justifyContent="center" spacing={0}>
          <Grid item xs={12} md={12}>
            <ReportGrid />
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

export default observer(HomeContentBottomCounter);
