import React, { useEffect } from "react";
import { HelpIcon } from "../icons/DashboardIcon";
import { useLogger } from "../ui/log/LoggerContext";
import { GetLogIcon } from "./getLogIcons";
import {
  CurserLeftIcon,
  CurserMiddleIcon,
  CurserRightIcon,
} from "../icons/LogIcons";
import ShortcutHelper from "./shortcutHelper";
import useVersionHistoryVisibleStore, {
  useShortcutStore,
} from "../../store/builder/store";
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import useModuleStore, { useSubModuleStore } from "../../store/useModuleStore";
import { useVersionContext } from "../../modules/builder/version/versionContext";
import { mouseActionHelper } from "../../utils/mouseUtils/mouseHelper";
import { useMouseNoteStore } from "../../store/useUIToggleStore";

const Footer: React.FC = () => {
  const { logs, setIsLogListVisible } = useLogger();
  const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;

  const { setActiveModule } = useModuleStore();
  const { setSubModule } = useSubModuleStore();
  const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
  const { isPlaying } = usePlayButtonStore();
  const { showShortcuts, setShowShortcuts } = useShortcutStore();
  const { selectedVersionStore } = useVersionContext();
  const { selectedVersion } = selectedVersionStore();

  const { Leftnote, Middlenote, Rightnote } = useMouseNoteStore();

  const mouseButtons = [
    {
      icon: <CurserLeftIcon />,
      label: Leftnote !== "" ? Leftnote : "Pan",
      mouse: "left",
    },
    {
      icon: <CurserMiddleIcon />,
      label: Middlenote !== "" ? Middlenote : "Scroll Zoom",
      mouse: "middle",
    },
    {
      icon: <CurserRightIcon />,
      label: Rightnote !== "" ? Rightnote : "Orbit / Cancel action",
      mouse: "right",
    },
  ];

  useEffect(() => {
    const cleanup = mouseActionHelper();
    return () => cleanup();
  }, []);

  return (
    <div className="footer-container">
      <div className="footer-wrapper">
        <div className="selection-wrapper">
          {mouseButtons.map(({ icon, label, mouse }) => (
            <div className="selector-wrapper" key={mouse}>
              <div className="icon">{icon}</div>
              <div className="selector">{label}</div>
            </div>
          ))}
        </div>

        <div className="logs-wrapper">
          <div className="bg-dummy left-top"></div>
          <div className="bg-dummy right-bottom"></div>
          <div className="log-container">
            <button
              id="log-details-buttton"
              className={`logs-detail ${lastLog ? lastLog.type : ""}`}
              onClick={() => setIsLogListVisible(true)}
            >
              {lastLog ? (
                <>
                  <span className="log-icon">{GetLogIcon(lastLog.type)}</span>
                  <span className="log-message">{lastLog.message}</span>
                </>
              ) : (
                "There are no logs to display at the moment."
              )}
            </button>
          </div>
          <div
            className="version"
            onClick={() => {
              setVersionHistoryVisible(true);
              setSubModule("properties");
              setActiveModule("builder");
            }}
          >
            {selectedVersion?.version ?? "v 0.0.0"}
            <div className="icon">
              <HelpIcon />
            </div>
          </div>
        </div>
      </div>

      {!isPlaying && (
        <div
          className={`shortcut-helper-overlay ${
            showShortcuts ? "visible" : ""
          }`}
        >
          <ShortcutHelper setShowShortcuts={setShowShortcuts} />
        </div>
      )}
    </div>
  );
};

export default Footer;
