import React, { useContext, useEffect, useState } from "react";
import { Form, Modal } from "react-bootstrap";
import "./Cancel_Reason_Modal.css";

function Cancel_Reason_Modal({
  setCancelReasonId,
  cancelReasonId,
  reason,
  setError,
  cancelReasonName,
  setCancelReasonName,
  ...props
}) {
  const { show, onHide, modal_title } = props;

  const reasons = [
    "Product price has reduced",
    "Wrong contact number entered",
    "Ordered by mistake",
    "Incorrect product size/colour/type ordered",
    "Product price has reduced",
    "Wrong contact number entered",
    "Ordered by mistake",
    "Incorrect product size/colour/type ordered",
  ];



  
  return (
    <Modal
      show={show}
      onHide={onHide}
      size="lg"
      className="Cancel_Reason_Modal Modal-holder"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          {modal_title}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="select_reason">
          <Form>
            {reason?.map((value, index) => (
              <Form.Check
                key={index}
                label={value?.name}
                value={value?.id}
                name="order_cancel_reason_id"
                type="radio"
                className="mini-text"
                checked={cancelReasonId === value?.id} 
                onChange={(e) => {
                  setCancelReasonId(Number(e.target.value));
                  setCancelReasonName(value?.name);
                  setError("");
                  onHide(); 
                }}
              />
            ))}
          </Form>
        </div>
      </Modal.Body>
    </Modal>
  );
}

export default Cancel_Reason_Modal;
