import { TraceWithLogsDto } from "@montelo/browser-client";
import { useSearchParams } from "@remix-run/react";
import { FC, useState } from "react";
import { LogView } from "~/components/traces/LogView";
import { LogsTreeView } from "~/components/traces/LogsTreeView";
import { TraceView } from "~/components/traces/TraceView";
import { useKey, useMount } from "~/hooks";
import { useUpdateQueryWithoutNavigation } from "~/hooks/useUpdateQueryWithoutNavigation";

export const TraceIdContent: FC<{ trace: TraceWithLogsDto }> = ({ trace }) => {
  const queryKey = "logId";
  const [searchParams] = useSearchParams();
  const [selectedId, setSelectedId] = useState<string>(searchParams.get(queryKey) ?? "");
  useUpdateQueryWithoutNavigation(queryKey, selectedId);

  const selectedLog = trace.logs.find((log) => log.id === selectedId) ?? null;

  const handleSelect = (id: string) => {
    setSelectedId(selectedId === id ? "" : id);
  };

  const setDefaultSelectedId = () => {
    if (!selectedId) {
      setSelectedId(trace.id);
    }
  };
  useMount(setDefaultSelectedId);

  const handleArrowRight = () => {
    const nextLog = trace.logs[trace.logs.findIndex((log) => log.id === selectedId) + 1];
    if (!nextLog) {
      return;
    }
    setSelectedId(nextLog.id);
  };
  useKey("ArrowRight", handleArrowRight, { event: "keyup" }, [selectedId]);

  const handleArrowLeft = () => {
    const previousLog = trace.logs[trace.logs.findIndex((log) => log.id === selectedId) - 1];
    // If there is no previous log, select the trace
    if (!previousLog) {
      setSelectedId(trace.id);
      return;
    }
    setSelectedId(previousLog.id);
  };
  useKey("ArrowLeft", handleArrowLeft, { event: "keyup" }, [selectedId]);

  return (
    <div className={"grid grid-cols-7 gap-4"}>
      <div className="col-span-2">
        <LogsTreeView trace={trace} selectedId={selectedId} handleSelect={handleSelect} />
      </div>
      <div className="col-span-5">
        {selectedLog?.traceId ? <LogView log={selectedLog} /> : <TraceView trace={trace} />}
      </div>
    </div>
  );
};
