"use client"

import { useRef, useState } from "react"

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

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

    // 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
    selectedSourceType: string
    setSelectedSourceType: (sourceType: string) => void
    availableSourceTypes: string[] // This must be string[] to match with API response
    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[]
    crimes?: any[] // Add this prop to receive crime data
}

export default function Tooltips({
    onControlChange,
    activeControl,
    selectedSourceType,
    setSelectedSourceType,
    availableSourceTypes = [],
    selectedYear,
    setSelectedYear,
    selectedMonth,
    setSelectedMonth,
    selectedCategory,
    setSelectedCategory,
    availableYears = [],
    categories = [],
    crimes = [],
}: 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}
                  sourceType={selectedSourceType}
              />

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

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