import { useClickedPointConfig } from "../../../stores/useClickedPointConfig";
import { useEffect, useState } from "react";
import { FeatureProperties } from "./FeatureProperties";
import { Title } from "../../../components/Title";
import { StatusSelect } from "../../../modules/Table/ApproveAndWorkingTable/ApproveAndWorkingTable";
import { useQueryClient } from "@tanstack/react-query";
import { useUpdateStatus } from "../../../hooks/useUpdateStatus";

export const ApproveWorkingPointPopup = ({ feature }) => {
  const featureId = feature.properties.location_id;
  const { setClickedPointConfig } = useClickedPointConfig();
  const [status, setStatus] = useState(feature.properties.status);

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

  const queryClient = useQueryClient();

  const { mutate: updateStatus } = useUpdateStatus({
    onSuccess: () => {
      queryClient.invalidateQueries(["approve-working-points"]);
    },
  });

  const handleStatusChange = (value) => {
    setStatus(value);

    const params = new URLSearchParams({
      status: value,
      "location_ids[]": [featureId],
    });

    updateStatus(params);
  };

  return (
    <>
      <FeatureProperties feature={feature} dynamicStatus={status} />
      <div className="flex justify-center mt-4">
        <div className={"flex flex-col items-center"}>
          <Title text="Изменить статус" />
          <StatusSelect value={status} onChange={handleStatusChange} />
        </div>
      </div>
    </>
  );
};
