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

const CreateAdThirdStep = ({ childRef }) => {
  const editorKeyResponsibilitiesRef = useRef();
  const editorRequirementsRef = useRef();
  const editorOfferRef = useRef();

  useEffect(() => {
    childRef.current = alertUser;
  }, []);

  function alertUser() {
    return {
      keyResponsibilities: editorKeyResponsibilitiesRef.current.getContent(),
      requirements: editorRequirementsRef.current.getContent(),
      offer: editorOfferRef.current.getContent(),
    };
  }

  return (
    <div data-testid="create-ad-third-step-form">
      <div className="create-ad-form-control">
        <label>Glavna zaduženja</label>
        <Editor
          onInit={(evt, editor) =>
            (editorKeyResponsibilitiesRef.current = editor)
          }
          style={{ height: "1rem !important" }}
        />
      </div>
      <div className="create-ad-form-control">
        <label>Uslovi</label>
        <Editor
          onInit={(evt, editor) => (editorRequirementsRef.current = editor)}
          style={{ height: "1rem !important" }}
        />
      </div>
      <div className="create-ad-form-control">
        <label>Šta nudimo</label>
        <Editor
          onInit={(evt, editor) => (editorOfferRef.current = editor)}
          style={{ height: "1rem !important" }}
        />
      </div>
    </div>
  );
};

CreateAdThirdStep.propTypes = {
  childRef: PropTypes.any,
};

export default CreateAdThirdStep;