import { useOrganizationModal } from "../../hooks/useOrganization";
import Label from "../common/Label";

const OrgPicker = ({
  title,
  placeholder,
  orgs = [],
  searchValue,
  setSearchValue,
}) => {
  const { isOpen, orgData, startStep, onOpen, onClose, prevStep } =
    useOrganizationModal();

  const handleBack = () => {
    if (startStep === prevStep) {
      onOpen({ startStep: 2,prevStep:1 });
    } else {
      onOpen({ startStep: 2 });
    }
  };
  return (
    <div className="d-block">
      <div className="text-start mb-1">
        <Label className="text-secondary">{title}1</Label>
        <input
          type="text"
          value={searchValue}
          onChange={(e) => setSearchValue?.(e.target.value)}
          className="form-control form-control-sm w-auto"
          placeholder={placeholder}
        />
      </div>

      {/* ---- Organization list ---- */}
      <div className="py-2 text-tiny text-center">
        <div className="d-flex flex-column gap-2 border-0 bg-none">
          {orgs?.map((org) => (
            <div
              key={org.id}
              className="list-group-item list-group-item-action d-flex align-items-center cursor-pointer border-0 hover-overlay border-bottom  rounded-none pb-1 shadow-1-strong rounded"
            >
              <div className="d-flex align-items-center justify-content-center me-3">
                <i className="bx bx-building-house bx-md text-primary"></i>
              </div>

              <div className="w-100">
                <div className="d-flex justify-content-between cursor-pointer">
                  <div className="user-info text-start">
                    <h6 className="mb-1 fw-normal">{org.name}</h6>
                  </div>
                  <div className="add-btn">
                    <button
                      className="btn btn-primary btn-xs"
                        onClick={onOpen.bind(null, { startStep: 3, orgData: org })}
                    >
                      select
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {startStep !== 2 && (
       <div className="mt-4">
          <p className="text-secondary">
          Don't have required organization, Please find using{" "}
          <span
            className="text-mutes cursor-pointer text-decoration-underline"
            onClick={() => {
              onOpen({ startStep: 2, });
            }}
          >
            SPRID
          </span>
        </p>
       </div>
        )}
      </div>

      {/* ---- Footer buttons ---- */}
      <div
        className={`d-flex justify-content-end
         text-secondary mt-3`}
      >
       {startStep > 1 && prevStep < startStep && (
  <button
    type="button"
    className="btn btn-xs btn-outline-secondary"
    onClick={handleBack}
  >
    <i className="bx bx-left-arrow-alt"></i> Back
  </button>
)}

        <button
          type="button"
          className="btn btn-xs btn-secondary"
          onClick={() => onOpen({ startStep: 4 })}
        >
          <i className="bx bx-plus-circle me-2"></i>
          Add New Organization
        </button>
      </div>
    </div>
  );
};

export default OrgPicker;
