import React from "react";
import { HelpIcon } from "../icons/DashboardIcon";
import { useLogger } from "../ui/log/LoggerContext";
import { GetLogIcon } from "./getLogIcons";
import {
  CurserLeftIcon,
  CurserMiddleIcon,
  CurserRightIcon,
} from "../icons/LogIcons";

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

  return (
    <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>
  );
};

export default Footer;