import React, { useState } from "react";
import useFetchContacts from "../../../contacts/hooks/useFetchContacts";
import { useHandleAlert } from "../../../general/hooks/useHandleAlert";
import { CALL_FEEDBACK_OPTIONS } from "../../common/constants";
const CallFeedback = ({ callData = {} }) => {
  const { handleSendCallFeedback } = useFetchContacts();
  const [loading, setLoading] = useState(false);
  const [selectedFeedback, setSelectedFeedback] = useState("");

  const [feedback, setFeedback] = useState("");
  const { onCloseAlert } = useHandleAlert();
  const handleFeedbackChange = (e) => {
    setFeedback(e.target.value);
  };

  const handleSendFeedback = async () => {
    const postBody = {
      sip_call_id: callData?.voip_call_id,
      feedback: `${selectedFeedback} : ${feedback}`,
    };
    setLoading(true);
    const response = await handleSendCallFeedback(postBody);
    setLoading(false);
    if (response) {
      onCloseAlert();
    }
  };

  return (
    <div className="call-feedback">
      <div className="call-feedback__header">
        Please select the feedback for this call
      </div>
      <div className="call-feedback__options mb-20">
        <div className="call-feedback__options-row mt-10 gap-10">
          {CALL_FEEDBACK_OPTIONS.slice(0, CALL_FEEDBACK_OPTIONS.length / 2).map(
            (option) => (
              <button
                key={option.value}
                className={`call-feedback__option ${
                  selectedFeedback === option.value
                    ? "call-feedback__option-selected"
                    : ""
                }`}
                onClick={() => setSelectedFeedback(option.value)}
              >
                {option.label}
              </button>
            )
          )}
        </div>
        <div className="call-feedback__options-row mt-10">
          {CALL_FEEDBACK_OPTIONS.slice(CALL_FEEDBACK_OPTIONS.length / 2).map(
            (option) => (
              <button
                key={option.value}
                className={`call-feedback__option ${
                  selectedFeedback === option.value
                    ? "call-feedback__option-selected"
                    : ""
                }`}
                onClick={() => setSelectedFeedback(option.value)}
              >
                {option.label}
              </button>
            )
          )}
        </div>
      </div>
      <div className="call-feedback__body mt-10">
        <textarea
          name=""
          id=""
          cols="30"
          rows="3"
          className="full-width textarea-feedback"
          placeholder="Write your feedback here..."
          value={feedback}
          onChange={handleFeedbackChange}
        ></textarea>
      </div>
      <div className="call-feedback__footer  align-h-end mt-20">
        <button className="button button--secondary" onClick={onCloseAlert}>
          Close
        </button>
        <div>
          <button
            className={`button button--primary `}
            onClick={handleSendFeedback}
            disabled={loading}
          >
            {loading ? "Sending Feedback..." : "Send Feedback"}
          </button>
        </div>
      </div>
    </div>
  );
};

export default CallFeedback;