import React from "react";
import { HelpIcon } from "../../icons/DashboardIcon";
import { useLogger } from "../log/LoggerContext";
import {
  LogInfoIcon,
  ErrorIcon,
  WarningIcon,
} from "../../icons/ExportCommonIcons"; // Adjust path as needed

const getLogIcon = (type: string) => {
  switch (type) {
    case "info":
      return <LogInfoIcon />;
    case "error":
      return <ErrorIcon />;
    case "warning":
      return <WarningIcon />;
    case "log":
    default:
      return <LogInfoIcon />;
  }
};

const Footer = () => {
  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"></div>
          <div className="selector">Selection</div>
        </div>
        <div className="selector-wrapper">
          <div className="icon"></div>
          <div className="selector">Rotate/Zoom</div>
        </div>
        <div className="selector-wrapper">
          <div className="icon"></div>
          <div className="selector">Pan/Context Menu</div>
        </div>
      </div>

      <div className="logs-wrapper">
        <div className="logs-detail" onClick={() => setIsLogListVisible(true)}>
          {lastLog ? (
            <>
              <span className="log-icon">{getLogIcon(lastLog.type)}</span>
              <span className="log-message">{lastLog.message}</span>
            </>
          ) : (
            "No logs yet."
          )}
        </div>
        <div className="version">
          V 0.01
          <div className="icon">
            <HelpIcon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Footer;