import React, { useRef } from "react";
import PropTypes from "prop-types";
import { Editor } from "@tinymce/tinymce-react";

const AddAdModalThirdStage = ({ onDecrementStage, onAddAd }) => {
  const editorKeyResponsibilitiesRef = useRef();
  const editorRequirementsRef = useRef();
  const editorOfferRef = useRef();

  const completeStageHandler = () => {
    if (
      editorKeyResponsibilitiesRef.current.getContent() === "" ||
      editorRequirementsRef.current.getContent() === "" ||
      editorOfferRef.current.getContent() === ""
    ) {
      return;
    }

    onAddAd(
      editorKeyResponsibilitiesRef.current.getContent(),
      editorRequirementsRef.current.getContent(),
      editorOfferRef.current.getContent()
    );
  };

  return (
    <div className="add-ad-modal-stage">
      <div>
        <div className="add-ad-modal-stage-sub-card-third">
          <label>Glavna zaduzenja</label>
          <Editor
            onInit={(evt, editor) =>
              (editorKeyResponsibilitiesRef.current = editor)
            }
            style={{ height: "1rem !important" }}
          />
        </div>

        <div className="add-ad-modal-stage-sub-card-third">
          <label>Uslovi</label>
          <Editor
            onInit={(evt, editor) => (editorRequirementsRef.current = editor)}
            style={{ height: "1rem !important" }}
          />
        </div>

        <div className="add-ad-modal-stage-sub-card-third">
          <label>Sta nudimo</label>
          <Editor
            onInit={(evt, editor) => (editorOfferRef.current = editor)}
            style={{ height: "1rem !important" }}
          />
        </div>
      </div>

      <div className="add-ad-modal-actions">
        <button
          className="c-btn c-btn--primary-outlined"
          onClick={onDecrementStage}
        >
          NAZAD
        </button>
        <button className="c-btn c-btn--primary" onClick={completeStageHandler}>
          DODAJ OGLAS
        </button>
      </div>
    </div>
  );
};

AddAdModalThirdStage.propTypes = {
  onDecrementStage: PropTypes.func,
  onAddAd: PropTypes.func,
};

export default AddAdModalThirdStage;
