import {
  useGetFilteredInitialPointsCount,
  useGetTotalInitialPointsCount,
} from "../../../api";
import { usePointSelection } from "../../../stores/usePointSelection";
import { Spin } from "antd";

export const SelectedLocations = () => {
  const { data: totalCount, isInitialLoading: isTotalLoading } =
    useGetTotalInitialPointsCount();
  const { data: filteredCount, isInitialLoading: isFilteredLoading } =
    useGetFilteredInitialPointsCount();

  const showSpinner = isTotalLoading || isFilteredLoading;

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

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

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