import { usePointSelection } from "../../../stores/usePointSelection";
import { useClickedPointConfig } from "../../../stores/useClickedPointConfig";
import { LAYER_IDS } from "../../Layers/constants";
import { useEffect } from "react";
import { FeatureProperties } from "./FeatureProperties";
import { Button } from "antd";

export const InitialPointPopup = ({ feature }) => {
  const { include, selection, exclude } = usePointSelection();
  const { setClickedPointConfig } = useClickedPointConfig();
  const doesMatchFilter = feature.layer.id === LAYER_IDS["initial-match"];
  const featureId = feature.properties.location_id;

  useEffect(() => setClickedPointConfig(featureId, doesMatchFilter), [feature]);

  const isSelected =
    (doesMatchFilter || selection.included.has(featureId)) &&
    !selection.excluded.has(featureId);

  const handleSelect = () => {
    if (isSelected) {
      exclude(featureId);
    } else {
      include(featureId);
    }
  };

  return (
    <>
      <FeatureProperties feature={feature} />
      <Button
        type="primary"
        className="mt-2 mx-auto"
        block
        onClick={handleSelect}
      >
        {isSelected ? "Исключить из выборки" : "Добавить в выборку"}
      </Button>
    </>
  );
};
