ContentSearch.tsx

"use client";
import { useEffect, useRef, useState, useDeferredValue } from "react";
import Link from "next/link";
import { CheckIcon, CopyIcon, Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
import {
  Dialog,
  DialogClose,
  DialogContent,
  Input,
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
  Tabs,
  TabsContent,
  TabsList, TabsTrigger, Button,
} from "@repo/ui";
/* import { getSearchResults } from "../lib/search";
import Image from "next/image"; */
import Fuse from "fuse.js";
import { TrackPros } from "./Tracks";

type Payload = {
  problemId: string;
  trackTitle: string;
  problemTitle: string;
  trackId: string;
  image: string;
};

interface DataItem {
  payload: Payload;
}

export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [input, setInput] = useState("");
  const [searchProblems, setSearchProblems] = useState<any[]>([]);
  const [searchTracks, setSearchTracks] = useState<any[]>([]);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const scrollableContainerRef = useRef<HTMLDivElement>(null);
  const deferredInput = useDeferredValue(input);
  const [allTracks, setAllTracks] = useState<DataItem[]>([]);
  const [activeTab, setActiveTab] = useState("tracks");
  const [copiedId, setCopiedId] = useState<string | null>(null);


  useEffect(() => {
    const updatedTracks: DataItem[] = [];
    tracks.map((t) => {
      t.problems.map((p) => {
        updatedTracks.push({
          payload: {
            problemId: p.id,
            trackTitle: t.title,
            problemTitle: p.title,
            trackId: t.id,
            image: t.image,
          },
        });
      });
    });
    setAllTracks(updatedTracks);
  }, []);

  useEffect(() => {
    const fuseProblems = new Fuse(allTracks, {
      keys: ["payload.problemTitle"],
      threshold: 0.5,
      ignoreLocation: true,
    });

    const fuseTracks = new Fuse(allTracks, {
      keys: ["payload.trackTitle"],
      threshold: 0.5,
      ignoreLocation: true,
    });

    if (deferredInput.length > 0) {
      const problemResults = fuseProblems.search(deferredInput);
      setSearchProblems(problemResults.map(problemResult => problemResult.item));
      const tracksResults = fuseTracks.search(deferredInput)
      setSearchTracks(tracksResults.map(tracksResult => tracksResult.item).filter((item, index,self) => self.findIndex(i => i.payload.trackId === item.payload.trackId) === index))
    } else {
      setSearchProblems([]);
      setSearchTracks([]);
    }
  }, [deferredInput, allTracks]);

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      switch (event.code) {
        case "KeyK":
          if (event.ctrlKey) {
            event.preventDefault();
            setDialogOpen(true);
          }
          break;
        case "ArrowDown":
          event.preventDefault();
          setSelectedIndex((prevIndex) => (prevIndex + 1) % searchProblems.length);
          break;
        case "ArrowUp":
          event.preventDefault();
          setSelectedIndex((prevIndex) => (prevIndex - 1 + searchProblems.length) % searchProblems.length);
          break;
        case "Enter":
          if (selectedIndex !== -1) {
            event.preventDefault();
            if (activeTab === "problems") {
              const selectedProblem = searchProblems[selectedIndex];
              window.open(`/tracks/${selectedProblem?.payload.trackId}/${selectedProblem?.payload.problemId}`, "_blank");
            } else {
              const selectedTrack = searchTracks[selectedIndex];
              window.open(`/tracks/${selectedTrack?.payload.trackId}/${selectedTrack?.payload.problemId}`, "_blank");
            }
          }
          break;
        default:
          break;
      }
    };

    window.addEventListener("keydown", handleKeyPress);
    return () => window.removeEventListener("keydown", handleKeyPress);
  }, [searchProblems, selectedIndex]);

  useEffect(() => {
    if (selectedIndex !== -1 && scrollableContainerRef.current) {
      const selectedElement = scrollableContainerRef.current.children[selectedIndex];
      if (selectedElement) {
        selectedElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
      }
    }
  }, [selectedIndex]);

  const handleClose = (open: boolean) => {
    if (!open) {
      setDialogOpen(false);
      setInput("");
      setSearchProblems([]);
      setSearchTracks([]);
    }
  };

  const handleCopy = (e: any, trackId : string, problemId : string) => {
      e.preventDefault()
    const id = `${trackId}-${problemId}`;
    navigator.clipboard.writeText(`${window.location.href}/tracks/${trackId}/${problemId}`);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 1500);
  }

  return (
    <Dialog open={dialogOpen} onOpenChange={handleClose}>
      <div
        className="md:max-w-screen border border-primary/15 p-3 rounded-lg cursor-text w-full mx-auto"
        onClick={() => setDialogOpen(true)}
      >
        <div className="md:flex gap-2 items-center hidden justify-between ">
          <div className="flex gap-2 items-center">
            <MagnifyingGlassIcon className="size-4" />
            Search
          </div>
          <kbd className="bg-white/15 p-2 rounded-sm text-sm leading-3">Ctrl + K</kbd>
        </div>
        <div className="block md:hidden">
          <MagnifyingGlassIcon className="size-4" />
        </div>
      </div>
      <DialogContent className="p-0 gap-0 max-w-2xl">
        <div className="flex items-center px-6 py-4 border-b">
          <MagnifyingGlassIcon className="size-4" />
          <Input
            type="text"
            placeholder="Search"
            className="border-none focus-visible:outline-none focus-visible:ring-0 text-base shadow-none"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <DialogClose>
            <Cross2Icon className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </DialogClose>
        </div>

        <Tabs value={activeTab} onValueChange={setActiveTab} >
          <TabsList className="w-full flex items-center justify-between py-4">
            <TabsTrigger value="tracks">Tracks</TabsTrigger>
            <TabsTrigger value="problems">Problems</TabsTrigger>
          </TabsList>
          <TabsContent value={"problems"} ref={scrollableContainerRef}  className="max-h-[500px] py-4 space-y-4 overflow-y-auto">
            {searchProblems.length > 0 ? (
              searchProblems.map((track, index) => (
                <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
                  <Link
                    className="flex"
                    href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
                    target="_blank"
                    passHref
                  >
                    <Card className="p-2 w-full mx-2">
                      <div className="flex items-center gap-4 py-1 sm:py-2">
                        <div className="w-16 h-16 sm:w-20 sm:h-20 flex-shrink-0 overflow-hidden rounded-xl">
                          <img
                            alt={track.payload.problemTitle}
                            src={track.payload.image}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="flex-1 min-w-0">
                          <CardHeader className="p-0">
                            <CardTitle className="text-base sm:text-lg md:text-xl">{track.payload.problemTitle}</CardTitle>
                            <CardDescription className="text-sm truncate">Track: {track.payload.trackTitle}</CardDescription>
                          </CardHeader>
                        </div>
                        <Button variant={"ghost"} size={"icon"} onClick={(e) => handleCopy(e, track.payload.trackId, track.payload.problemId)}>
                          {
                            copiedId === `${track.payload.trackId}-${track.payload.problemId}` ? (<CheckIcon /> ) : ( <CopyIcon/>)
                          }
                        </Button>
                      </div>
                    </Card>
                  </Link>
                </div>
              ))) : (
              <div className="text-center py-10 text-gray-500">
                No problems found
              </div>
            )}

          </TabsContent>
          <TabsContent value={"tracks"} ref={scrollableContainerRef}  className="max-h-[500px] py-4 space-y-4 overflow-y-auto">
            {searchTracks.length > 0 ? (
              searchTracks.map((track, index) => (
                <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
                  <Link
                    className="flex"
                    href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
                    target="_blank"
                    passHref
                  >
                    <Card className="p-2 w-full mx-2">
                      <div className="flex items-center gap-4 py-1 sm:py-2">
                        <div className="w-16 h-16 sm:w-20 sm:h-20 flex-shrink-0 overflow-hidden rounded-xl">
                          <img
                            alt={track.payload.problemTitle}
                            src={track.payload.image}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="flex-1 min-w-0">
                          <CardHeader className="p-0">
                            <CardTitle className="text-base sm:text-lg md:text-xl">Track: {track.payload.trackTitle}</CardTitle>

                          </CardHeader>
                        </div>

                        <Button variant={"ghost"} size={"icon"} onClick={(e) => handleCopy(e, track.payload.trackId, track.payload.problemId)}>
                          {
                            copiedId === `${track.payload.trackId}-${track.payload.problemId}` ? (<CheckIcon /> ) : ( <CopyIcon/>)
                          }
                        </Button>
                      </div>
                    </Card>
                  </Link>
                </div>
              ))) : (
              <div className="text-center py-10 text-gray-500">
                No tracks found
              </div>
            )}

          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}