"use client"

import { useRef, useState } from "react"

import CrimeTooltips from "./crime-tooltips"
import AdditionalTooltips from "./additional-tooltips"
import SearchTooltip from "./search-control"
import { ReactNode } from "react"

// Define the possible control IDs for the crime map
export type ITooltips =
    // Crime data views
    | "incidents"
    | "heatmap"
    | "trends"
    | "patrol"
    | "reports"
    | "clusters"
    | "timeline"

    // Tools and features
    | "refresh"
    | "search"
    | "alerts"
    | "layers"
    | "evidence"
    | "arrests";

// Map tools type definition
export interface IMapTools {
    id: ITooltips;
    label: string;
    icon: ReactNode;
    description?: string;
}

interface TooltipProps {
    onControlChange?: (controlId: ITooltips) => void
    activeControl?: string
    selectedYear: number
    setSelectedYear: (year: number) => void
    selectedMonth: number | "all"
    setSelectedMonth: (month: number | "all") => void
    selectedCategory: string | "all"
    setSelectedCategory: (category: string | "all") => void
    availableYears?: (number | null)[]
    categories?: string[]
}

export default function Tooltips({
    onControlChange,
    activeControl,
    selectedYear,
    setSelectedYear,
    selectedMonth,
    setSelectedMonth,
    selectedCategory,
    setSelectedCategory,
    availableYears = [2022, 2023, 2024],
    categories = [],
}: TooltipProps) {
    const containerRef = useRef<HTMLDivElement>(null)
    const [isClient, setIsClient] = useState(false)

    return (
        <div ref={containerRef} className="flex flex-col items-center gap-2">
            <div className="flex items-center gap-2">
                {/* Crime Tooltips Component */}
                <CrimeTooltips activeControl={activeControl} onControlChange={onControlChange} />

                {/* Additional Tooltips Component */}
                <AdditionalTooltips
                    activeControl={activeControl}
                    onControlChange={onControlChange}
                    selectedYear={selectedYear}
                    setSelectedYear={setSelectedYear}
                    selectedMonth={selectedMonth}
                    setSelectedMonth={setSelectedMonth}
                    selectedCategory={selectedCategory}
                    setSelectedCategory={setSelectedCategory}
                    availableYears={availableYears}
                    categories={categories}
                />

                {/* Search Control Component */}
                <SearchTooltip activeControl={activeControl} onControlChange={onControlChange} />
            </div>
        </div>
    )
}