// LogList.tsx
import React, { useEffect, useState } from "react";
import { LogListIcon, CloseIcon } from "../../icons/ExportCommonIcons"; // Adjust path as needed
import { useLogger } from "./LoggerContext";
import { GetLogIcon } from "../../footer/getLogIcons";

const LogList: React.FC = () => {
  const {
    logs,
    clear,
    setIsLogListVisible,
    isLogListVisible,
    selectedTab,
    setSelectedTab,
  } = useLogger();

  const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();

  const filteredLogs =
    selectedTab === "all"
      ? [...logs].reverse()
      : [...logs].filter((log) => log.type === selectedTab).reverse();

  useEffect(() => {
    if (isLogListVisible && logs.length > 0) {
      const lastLog = logs[logs.length - 1];
      const validTypes = ["all", "info", "warning", "error"];

      if (validTypes.includes(lastLog.type)) {
        setSelectedTab(lastLog.type);
      } else {
        setSelectedTab("all");
      }
    }
  }, [isLogListVisible]);

  return (
    // eslint-disable-next-line
    <div
      className="log-list-container"
      onClick={() => setIsLogListVisible(false)}
    >
      {/* eslint-disable-next-line */}
      <div
        className="log-list-wrapper"
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <div className="log-header">
          <div className="log-header-wrapper">
            <div className="icon">
              <LogListIcon />
            </div>
            <div className="head">Log List</div>
          </div>
          <button
            id="close-btn"
            title="close-btn"
            className="close"
            onClick={() => setIsLogListVisible(false)}
          >
            <CloseIcon />
          </button>
        </div>

        {/* Tabs */}
        <div className="log-nav-container">
          <div className="log-nav-wrapper">
            {["all", "info", "warning", "error"].map((type) => (
              <button
                id="log-type"
                title="log-type"
                key={type}
                className={`log-nav ${selectedTab === type ? "active" : ""}`}
                onClick={() => setSelectedTab(type as any)}
              >
                {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
              </button>
            ))}
          </div>
          <button
            id="clean-btn"
            title="clear-btn"
            className="clear-button"
            onClick={clear}
          >
            clear
          </button>
        </div>

        {/* Log Entries */}
        <div className="log-entry-wrapper">
          {filteredLogs.length > 0 ? (
            filteredLogs.map((log) => (
              <div key={log.id} className={`log-entry ${log.type}`}>
                <div className="log-icon">{GetLogIcon(log.type)}</div>
                <div className="log-entry-message-container">
                  <div className="log-entry-message">{log.message}</div>
                  <div className="message-time">
                    {formatTimestamp(log.timestamp)}
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="no-log">
              There are no logs to display at the moment.
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default LogList;
