import {useMemo, useEffect, useState} from "react";
import VdapApi from "@/hooks/useVdapApi.js";
import useBuildUrl from "@/hooks/useBuildUrl.js";
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import {Combobox, createListCollection, Portal} from "@chakra-ui/react";

export default function VaaMapSettings({widgetId, currentSettings}) {
  const [inputValue, setInputValue] = useState("");
  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);

  const url = useBuildUrl("api/v2/comm_coor_vaa", currentSettings?.startDate, currentSettings?.endDate);
  const {data, isLoading, error} = VdapApi(url);

  // retrieving only the latest VAA for each volcano (resultant has no order)
  const latest_vaas = useMemo(() => {
    if (!data || !Array.isArray(data)) return undefined;
    // retrieves last occurance of vaa, so the vaa's need to stay in rev-chrono order here to work
    return [...new Map(data.map(item => [item['volc_name'], item])).values()];
  }, [data]);

  useEffect(() => {
    if (!latest_vaas) updateSettings(widgetId, {isLoading: isLoading, error: error});
    else updateSettings(widgetId, {data: latest_vaas, isLoading: isLoading, error: error});
  }, [updateSettings, widgetId, latest_vaas, isLoading, error]);

  // find volc_name of last issued vaa, map will default to this ash polygon
  const default_vaa = useMemo(() => {
    if (!latest_vaas || latest_vaas.length === 0) return undefined;
    const chrono_order = latest_vaas.sort((a, b) => new Date(b.vaa_datetime) - new Date(a.vaa_datetime));
    // console.log(chrono_order);
    // console.log(chrono_order[0].volc_name);
    return chrono_order[0].volc_name;
  }, [latest_vaas]);

  // set default vaa in settings
  useEffect(() => {
    if (default_vaa) updateSettings(widgetId, {defaultVAA: default_vaa});
  }, [default_vaa, updateSettings, widgetId]);


  // filtering based on what user types in search bar
  const filtered_vaas = useMemo(() => {
    if (!inputValue.trim()) return latest_vaas;
    return latest_vaas?.filter((item) => item.volc_name.toLowerCase().includes(inputValue.toLowerCase()));
  }, [latest_vaas, inputValue]);

  const vaa_collection = useMemo(() => {
    return createListCollection({
      items: filtered_vaas?.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
      itemToString: (item) => item.volc_name,
      itemToValue: (item) => item.volc_name,
    });
  }, [filtered_vaas]);

  // update state w/ selected vaa so map zooms to polygon
  useEffect(() => {
    updateSettings(widgetId, {selected: inputValue});
  }, [updateSettings, widgetId, inputValue]);


  return (
    <Combobox.Root openOnClick collection={vaa_collection} onInputValueChange={(e) => setInputValue(e.inputValue)}>
      <Combobox.Label>Select a Volcano</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input placeholder="Search recent VAA's by volcano name"/>
        <Combobox.IndicatorGroup>
          <Combobox.ClearTrigger />
        </Combobox.IndicatorGroup>
      </Combobox.Control>

      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.Empty>No VAA's found</Combobox.Empty>
            {vaa_collection.items.map((vaa) =>
                <Combobox.Item key={vaa?.volc_name} item={vaa}>
                  {vaa?.volc_name}
                </Combobox.Item>
            )}
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}