import {
  useGetFilteredPendingPointsCount,
  useGetTotalInitialPointsCount,
} from "../../../api";
import { usePointSelection } from "../../../stores/usePointSelection";
import { Spin } from "antd";
import { useEffect } from "react";

export const SelectedLocations = ({ onSelectedChange }) => {
  const { data: totalCount, isInitialLoading: isTotalLoading } =
    useGetTotalInitialPointsCount();
  const { data: filteredCount, isInitialLoading: isFilteredLoading, isFetching: isFilteredFetching } =
    useGetFilteredPendingPointsCount();

  const {
    selection: { excluded },
  } = usePointSelection();

  useEffect(
    () => onSelectedChange(filteredCount - excluded.size),
    [filteredCount, excluded]
  );

  const showSpinner = isTotalLoading || isFilteredLoading || isFilteredFetching;

  return (
    <div className={"flex items-center justify-between"}>
      <span>Отобрано локаций</span>

      {showSpinner ? (
        <Spin />
      ) : (
        <span>{`${filteredCount - excluded.size} / ${totalCount}`}</span>
      )}
    </div>
  );
};
