import React from "react";
import PropTypes from "prop-types";

const AddAdModalThirdStage = ({
  onDecrementStage,
  keyResponsibilities,
  setKeyResponsibilities,
  requirements,
  setRequirements,
  whatWeOffer,
  setWhatWeOffer,
  onAddAd,
}) => {
  const completeStageHandler = () => {
    if (
      keyResponsibilities.length === 0 ||
      requirements.length === 0 ||
      whatWeOffer.length === 0
    ) {
      return;
    }

    onAddAd();
  };

  return (
    <div className="add-ad-modal-stage">
      <div>
        <div className="add-ad-modal-stage-sub-card-third">
          <label>Glavna zaduzenja</label>
          <textarea
            type="text"
            placeholder="ex. Working as a React developer on various projects... (Separate every responsibility with | sign)"
            value={keyResponsibilities}
            onChange={(e) => setKeyResponsibilities(e.target.value)}
            rows={5}
          ></textarea>
        </div>

        <div className="add-ad-modal-stage-sub-card-third">
          <label>Uslovi</label>
          <textarea
            type="text"
            placeholder="ex. Good software development fundamentals...  (Separate every condition with | sign)"
            value={requirements}
            onChange={(e) => setRequirements(e.target.value)}
            rows={5}
          ></textarea>
        </div>

        <div className="add-ad-modal-stage-sub-card-third">
          <label>Sta nudimo</label>
          <textarea
            type="text"
            placeholder="ex. Full Remote position...  (Separate every offer with | sign)"
            value={whatWeOffer}
            onChange={(e) => setWhatWeOffer(e.target.value)}
            rows={5}
          ></textarea>
        </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,
  keyResponsibilities: PropTypes.any,
  setKeyResponsibilities: PropTypes.func,
  requirements: PropTypes.any,
  setRequirements: PropTypes.func,
  whatWeOffer: PropTypes.any,
  setWhatWeOffer: PropTypes.func,
  onAddAd: PropTypes.func,
};

export default AddAdModalThirdStage;
