import LeftBar from "../../components/Modules/Home/LeftSide";
import BottomBar from "../../components/Modules/Home/Bottom";
import RightBar from "../../components/Modules/Home/RightSide";
import CenterTopData from "../../components/Modules/Home/CenterTop";
import { AnimatePresence, motion } from "framer-motion";
import KilnCenter from "../../components/Modules/KilnInner/Center";
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide";
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide";
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide";
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide";
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
// import SocketContext from '../../store/socket-data-provider';
import { useContext } from "react";

export default function Home({ active }) {
  // const ctx = useContext(SocketContext);

  const ctx = null;

  const fireDir = ctx?.runState?.fireDirection || null;

  return (
    <div className="Main">
      {active != "窑炉总览" && <div className="bgDitu"></div>}
      {active == "窑炉总览" && <div className="bgOverview"></div>}
      <AnimatePresence mode="wait">
        <div
          className="left-side"
          style={{
            marginLeft: "40px",
            width: "625px",
            height: "100%",
          }}
        >
          {active == "窑炉总览" && <LeftBar key="kiln-total" />}
          {active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
          {active == "退火监测" && <FireCheckLeft key="fire-check" />}
          {active == "质检统计" && <QualityCheckLeft key="quality-check" />}
        </div>
      </AnimatePresence>

      <div className="Center">
        {active == "窑炉总览" && (
          <>
            <AnimatePresence>
              <motion.div
                key="center-top"
                className="CenterData"
                initial={{ visibility: "hidden" }}
                animate={{ visibility: "visible" }}
              >
                <CenterTopData />
              </motion.div>
            </AnimatePresence>
            <div key="v3d" className="V3DBorder"></div>

            {fireDir && fireDir == "东火" && (
              <video
                src="/video/fire_little_top.webm"
                muted
                autoPlay
                loop
                width={4200}
                style={{ position: "absolute", top: "-160px", left: "-910px" }}
              ></video>
            )}

            {fireDir && fireDir == "西火" && (
              <video
                src="/video/fire_little_down.webm"
                muted
                autoPlay
                loop
                width={4200}
                style={{ position: "absolute", top: "-180px", left: "-910px" }}
              ></video>
            )}

            <div key="bottom-bar" className="Button">
              <BottomBar />
            </div>
          </>
        )}

        {active == "窑炉内部" && <KilnCenter />}

        {active == "退火监测" && <div className="bgFire"></div>}

        {active == "质检统计" && <div className="bgQuality"></div>}
      </div>

      {active == "窑炉总览" && <RightBar key="right-bar" />}
      {active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
      {active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
      {active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
    </div>
  );
}