// LogList.tsx
import React, { useState } from "react";
import {
  LogListIcon,
  TickIcon,
  LogInfoIcon,
  WarningIcon,
  ErrorIcon,
  CloseIcon,
} from "../../icons/ExportCommonIcons"; // Adjust path as needed
import { useLogger } from "./LoggerContext";

const LogList: React.FC = () => {
  const { logs, clear, setIsLogListVisible } = useLogger();
  const [selectedTab, setSelectedTab] = useState<
    "all" | "info" | "warning" | "error" | "log"
  >("all");

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

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

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

  return (
    <div className="log-list-container">
      <div className="log-list-wrapper">
        <div className="log-header">
          <div className="log-header-wrapper">
            <div className="icon">
              <LogListIcon />
            </div>
            <div className="head">Log List</div>
          </div>
          <div className="close" onClick={() => setIsLogListVisible(false)}>
            {/* <CloseIcon /> */}X
          </div>
        </div>

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

        {/* Log Entries */}
        <div className="log-entry-wrapper">
          {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">
                [{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}
                {log.message}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default LogList;