import React, { useState, useEffect } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
import { ToastContainer, toast } from "react-toastify";
import { Box, Button } from "@mui/material";
import TextField from "@mui/material/TextField";
import EditButton from "./EditButton";
import { width } from "@mui/system";
import "react-toastify/dist/ReactToastify.css";
import { useSearchParams } from "react-router-dom";
import LoadingContainer from "./LoadingContainer";
import HomeIcon from "@mui/icons-material/Home";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useNavigate } from "react-router-dom";
import QueryStatsIcon from "@mui/icons-material/QueryStats";
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
import RotateRightIcon from "@mui/icons-material/RotateRight";
import { useSelector, useDispatch } from "react-redux";
import {
  updatePartAanomolyData,
  updateSystemNo,
} from "../redux/actions/actions";
import SimpleDialog from "./SimpleDialog";
import SystemNumberDialog from "./SystemNumberDialog";
import ValidationContainer from "./ValidationContainer";
import QueryExecutorCard from "./QueryExecutorCard";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import QueryExecutortextArea from "./QueryExecutortextArea";

const { Header, Content, Footer, Sider } = Layout;

const AntdesignLayout = ({ children }) => {
  const navigate = useNavigate();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
    >
      <ToastContainer />
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Box className="d-flex justify-content-between h-100 py-1 px-2">
            <Button
              className="bg-primary p-1 text-light"
              onClick={() => {
                navigate(-1);
              }}
            >
              <ArrowBackIcon />
            </Button>
            <Box className="d-flex justify-content-between gap-2">
              {/* <Button
            className="bg-primary p-1 text-light"
            onClick={() => {
              navigate("/anomoly/reassigned/stats");
            }}
          >
            <QueryStatsIcon />
          </Button> */}
              <Box className="d-flex justify-content-between gap-md-4 gap-1 align-items-center">
                <Button
                  className="bg-primary p-1 text-light rounded h-100"
                  onClick={() => {
                    navigate("/");
                  }}
                >
                  <HomeIcon />
                </Button>
              </Box>
            </Box>
          </Box>
        </Header>
        <Content
          style={{
            margin: "16px 16px",
          }}
        >
          {children}
        </Content>
        <Box style={{ position: "fixed", bottom: "15px", left: "30px" }}>
          <Button
            className="bg-primary rounded-circle p-3"
            onClick={() => {
              window.scrollTo(0, 0);
            }}
          >
            <ArrowUpwardIcon className="text-white" />
          </Button>
        </Box>
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          exampaper.vidh.ai ©{new Date().getFullYear()}
        </Footer>
      </Layout>
    </Layout>
  );
};

export default AntdesignLayout;