import React from "react";
import { HelpIcon } from "../../icons/DashboardIcon";
import { useLogger } from "../log/LoggerContext";

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
            ? `[${lastLog.type.toUpperCase()}] ${lastLog.message}`
            : "No logs yet."}
        </div>
        <div className="version">
          V 0.01
          <div className="icon">
            <HelpIcon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Footer;