import { RegionSelect } from "./RegionSelect";
import { CategoriesSelect } from "./InitialSidebar/CategoriesSelect";
import { PredictionSlider } from "./InitialSidebar/PredictionSlider";
import { useEffect, useState } from "react";
import { Tooltip } from "antd";
import { DISABLED_FILTER_TEXT, MODES } from "../../config";
import { useMode } from "../../stores/useMode";
import { DeltaTrafficSlider } from "./WorkingFilters/DeltaSlider";
import { useQuery } from "@tanstack/react-query";
import { api } from "../../api";
import { FactTrafficSlider } from "./WorkingFilters/FactTrafficSlider";
import { AgeSlider } from "./WorkingFilters/AgeSlider";

export const Filters = ({ disabled }) => {
  const [hover, setHover] = useState(false);
  const { mode } = useMode();

  useEffect(() => {
    const timer = setTimeout(() => setHover(false), 1500);

    return () => clearTimeout(timer);
  }, [hover]);

  const { data: fullRange } = useQuery(["max-min"], async () => {
    const { data } = await api.get(`/api/placement_points/filters/`);

    return data;
  });

  const handleMouseEnter = () => {
    setHover(true);
  };
  const handleMouseLeave = () => {
    setHover(false);
  };

  return (
    <Tooltip
      title={DISABLED_FILTER_TEXT}
      placement="right"
      open={disabled && hover}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className="space-y-5">
        <RegionSelect disabled={disabled} />
        {mode === MODES.INITIAL && (
          <>
            <CategoriesSelect disabled={disabled} />
            <PredictionSlider disabled={disabled} fullRange={fullRange} />
          </>
        )}
        {mode === MODES.WORKING && (
          <div className={"space-y-12"}>
            <DeltaTrafficSlider fullRange={fullRange} />
            <FactTrafficSlider fullRange={fullRange} />
            <AgeSlider fullRange={fullRange} />
          </div>
        )}
      </div>
    </Tooltip>
  );
};
