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 { useShortcutStore } from "../../store/store";
import { usePlayButtonStore } from "../../store/usePlayButtonStore";

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

  const { showShortcuts, setShowShortcuts } = useShortcutStore();
  const { isPlaying } = usePlayButtonStore();

  // Listen for Ctrl + Shift + ?
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (
        e.ctrlKey &&
        e.shiftKey &&
        (e.key === "?" || e.key === "/") // for some keyboards ? and / share the same key
      ) {
        e.preventDefault();
        setShowShortcuts(!showShortcuts); // toggle visibility directly
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [showShortcuts, setShowShortcuts]);

  return (
    <div className="footer-container">
      <div className="footer-wrapper">
        <div className="selection-wrapper">
          <div className="selector-wrapper">
            <div className="icon">
              <CurserLeftIcon />
            </div>
            <div className="selector">Selection</div>
          </div>
          <div className="selector-wrapper">
            <div className="icon">
              <CurserMiddleIcon />
            </div>
            <div className="selector">Rotate/Zoom</div>
          </div>
          <div className="selector-wrapper">
            <div className="icon">
              <CurserRightIcon />
            </div>
            <div className="selector">Pan/Context Menu</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
              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">
            V 0.01
            <div className="icon">
              <HelpIcon />
            </div>
          </div>
        </div>
      </div>

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

export default Footer;