import { Title } from "../../../components/Title";
import { Checkbox } from "antd";
import { LAYER_IDS } from "../../../Map/Layers/constants";
import { RegionSelect } from "../../../components/RegionSelect";
import { useOnApprovalPointsFilters } from "../../../stores/useOnApprovalPointsFilters";
import { useLayersVisibility } from "../../../stores/useLayersVisibility";
import { ClearFiltersButton } from "../../../components/ClearFiltersButton";

export const OnApprovalPointsFilters = () => {
  const {
    filters: { region },
    setRegion,
    clear,
  } = useOnApprovalPointsFilters();
  const { isVisible, toggleVisibility, showLayers } = useLayersVisibility();

  const hasActiveFilters =
    region ||
    !isVisible[LAYER_IDS.approve] ||
    !isVisible[LAYER_IDS.working] ||
    !isVisible[LAYER_IDS.cancelled];

  const clearFilters = () => {
    clear();
    showLayers([LAYER_IDS.approve, LAYER_IDS.working, LAYER_IDS.cancelled]);
  };

  return (
    <div className="space-y-4">
      <RegionSelect value={region?.id} onChange={setRegion} />
      <div>
        <Title text="Статусы" />
        <div className="flex flex-col space-y-2">
          <Checkbox
            onChange={() => toggleVisibility(LAYER_IDS.approve)}
            checked={isVisible[LAYER_IDS.approve]}
          >
            Согласование-установка
          </Checkbox>
          <Checkbox
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.working)}
            checked={isVisible[LAYER_IDS.working]}
          >
            Работает
          </Checkbox>
          <Checkbox
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.cancelled)}
            checked={isVisible[LAYER_IDS.cancelled]}
          >
            Отменен
          </Checkbox>
        </div>
      </div>
      {hasActiveFilters && <ClearFiltersButton onClick={clearFilters} />}
    </div>
  );
};
