marco.pms.web/src/components/Organization/OrgPickerFromSPId.jsx

import { useState } from "react";
import {
  useAssignOrgToTenant,
  useOrganizationBySPRID,
  useOrganizationModal,
} from "../../hooks/useOrganization";
import Label from "../common/Label";
import { useDebounce } from "../../utils/appUtils";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { spridSchema } from "./OrganizationSchema";
import { OrgCardSkeleton } from "./OrganizationSkeleton";
import { useQueryClient } from "@tanstack/react-query";

// Zod schema: only allow exactly 4 digits

const OrgPickerFromSPId = ({ title, placeholder }) => {
  const { onClose, startStep, flowType, onOpen, prevStep, orgData } =
    useOrganizationModal();
  const clientQuery = useQueryClient();
  const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
  } = useForm({
    resolver: zodResolver(spridSchema),
    defaultValues: { spridSearchText: "" },
  });

  const [SPRID, setSPRID] = useState("");

  const { data, isLoading, isError, error, refetch } =
    useOrganizationBySPRID(SPRID);

  const onSubmit = (formdata) => {
    setSPRID(formdata.spridSearchText);
  };

  const handleCrateOrg = () => {
    clientQuery.removeQueries({ queryKey: ["organization"] });
    onOpen({ startStep: 4, orgData: null });
  };
  const SP = watch("spridSearchText");
  return (
    <div className="d-block mt-4">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="row align-items-center g-2 mb-3">
          {/* Input Section */}
          <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
            <Label className="text-nowrap mb-1 mb-md-0" required>
              Search by SPRID
            </Label>
            <input
              type="search"
              {...register("spridSearchText")}
              className="form-control form-control-sm flex-grow-1"
              placeholder="Enter SPRID"
              maxLength={4}
            />
          </div>

          {/* Button Section */}
          <div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0">
            <button
              type="submit"
              className="btn btn-sm btn-primary w-100 w-md-auto"
            >
              <i className="bx bx-sm bx-search-alt-2"></i> Search
            </button>
          </div>
        </div>
      </form>

      <div className="text-start danger-text">
        {" "}
        {errors.spridSearchText && (
          <p className="text-danger small mt-1">
            {errors.spridSearchText.message}
          </p>
        )}
      </div>

      {/* ---- Organization list ---- */}
      {isLoading ? (
        <OrgCardSkeleton />
      ) : data && data?.data.length > 0 ? (
        <div className="py-2 text-tiny text-center">
          <div className="d-flex flex-column gap-2 border-0 bg-none">
            {data.data.map((org) => (
              <div className="d-flex flex-row gap-2 text-start text-black mt-3">
                <div className="mt-1">
                  <img
                    src="/public/assets/img/orgLogo.png"
                    alt="logo"
                    width={50}
                    height={50}
                  />
                </div>
                <div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
                  <span className="fs-6 fw-semibold mb-2">{org.name}</span>
                  <div className="d-flex gap-2">
                    <small
                      className=" fw-semibold text-uppercase mb-2"
                      style={{ letterSpacing: "1px" }}
                    >
                      SPRID :{" "}
                    </small>
                    <small className="fs-6">{org.sprid}</small>
                  </div>
                  <div className="d-flex flex-row gap-2 mb-4">
                    <small className="text-small fw-semibold ">Address:</small>
                    <div className="d-flex text-wrap">{org.address}</div>
                  </div>
                  <div className="m-0 p-0">
                    {" "}
                    <button
                      type="submit"
                      className="btn btn-sm btn-primary"
                      onClick={() => onOpen({ startStep: 3, orgData: org })}
                    >
                      Select
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : SPRID ? (
        <div className="py-3 text-center text-secondary">
          No organization found for "{SPRID}"
        </div>
      ) : null}
      <div className="py-2 text-center text-tiny text-black">
        <small className="d-block text-secondary">
          Do not have SPRID or could not find organization ?
        </small>
        <button
          type="button"
          className="btn btn-sm btn-primary mt-3"
          onClick={handleCrateOrg}
        >
          <i className="bx bx-plus-circle me-2"></i>
          Create New Organization
        </button>
      </div>

      {/* ---- Footer buttons ---- */}
      <div className={`d-flex   text-secondary mt-3`}>
        {flowType !== "default" && (
          <button
            type="button"
            className="btn btn-xs btn-outline-secondary"
            onClick={() => onOpen({ startStep: prevStep })}
          >
            <i className="bx bx-chevron-left"></i> Back
          </button>
        )}
      </div>
    </div>
  );
};

export default OrgPickerFromSPId;