import React, { useEffect, useState } from "react";
import "./Select_reason_heading.css";
import Cancel_Reason_Modal from "../common_modal/cancel_reason_modal/Cancel_Reason_Modal";
import { getAllCancelReason } from "../../../features/master/masterSlice";
import { useDispatch, useSelector } from "react-redux";

function Select_reason_heading({
  setCancelReasonId,
  cancelReasonId,
  setError,
  reason,
  type,
  cancelReasonName,
  setCancelReasonName,
}) {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <section
        className="Select_reason_heading "
        onClick={() => {
          setShowModal(true);
        }}
      >
        {cancelReasonName ? (
          <h6>{cancelReasonName}</h6>
        ) : (
          <h6>
            {type === "Cancel"
              ? "Select a reason for cancelation >"
              : type === "Return"
              ? "Select a reason for Return >"
              : ""}
          </h6>
        )}
      </section>

      <Cancel_Reason_Modal
        cancelReasonName={cancelReasonName}
        setCancelReasonName={setCancelReasonName}
        setError={setError}
        cancelReasonId={cancelReasonId}
        setCancelReasonId={setCancelReasonId}
        reason={reason}
        modal_title={
          type === "Cancel"
            ? "Select a reason for canceling"
            : "Select a reason for returning"
        }
        show={showModal}
        onHide={() => {
          setShowModal(false);
        }}
      />
    </>
  );
}

export default Select_reason_heading;
