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

const AddAdModalFirstStage = ({
  onIncrementStage,
  onDecrementStage,
  onCompleteFirstStage,
  title,
  employmentType,
  workHour,
  setTitle,
  setEmploymentType,
  setWorkHour,
  expiredAt,
  setExpiredAt,
}) => {
  const completeStageHandler = () => {
    if (title.length === 0) {
      return;
    }

    onIncrementStage();
    onCompleteFirstStage();
  };

  const employmentTypeHandler = (type) => {
    setEmploymentType(type);
  };

  const workHourHandler = (type) => {
    setWorkHour(type);
  };

  return (
    <div className="add-ad-modal-stage">
      <div>
        <div className="add-ad-modal-stage-sub-card">
          <label>Naslov</label>
          <input
            data-testid="add-ad-modal-title"
            type="text"
            value={title}
            placeholder="ex. Medior React Developer"
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>

        <div className="add-ad-modal-stage-sub-card">
          <label>Tip zaposlenja</label>
          <div className="add-ad-modal-stage-sub-card-buttons">
            <button
              data-testid="add-ad-modal-work-btn"
              className={`c-btn  ${
                employmentType === "Work"
                  ? "c-btn c-btn--primary"
                  : "c-btn--primary-outlined"
              }`}
              onClick={employmentTypeHandler.bind(this, "Work")}
            >
              Posao
            </button>
            <button
              data-testid="add-ad-modal-intership-btn"
              className={`c-btn ${
                employmentType === "Intership"
                  ? "c-btn c-btn--primary"
                  : "c-btn--primary-outlined"
              }`}
              onClick={employmentTypeHandler.bind(this, "Intership")}
            >
              Intership
            </button>
          </div>
        </div>

        <div className="add-ad-modal-stage-sub-card">
          <label>Radno vreme</label>
          <div className="add-ad-modal-stage-sub-card-buttons">
            <button
              data-testid="add-ad-modal-parttime-btn"
              className={`c-btn  ${
                workHour === "PartTime"
                  ? "c-btn c-btn--primary"
                  : "c-btn--primary-outlined"
              }`}
              onClick={workHourHandler.bind(this, "PartTime")}
            >
              Part-time
            </button>
            <button
              data-testid="add-ad-modal-fulltime-btn"
              className={`c-btn ${
                workHour === "FullTime"
                  ? "c-btn c-btn--primary"
                  : "c-btn--primary-outlined"
              }`}
              onClick={workHourHandler.bind(this, "FullTime")}
            >
              Full-time
            </button>
          </div>
        </div>

        <div className="add-ad-modal-stage-sub-card">
          <label>Datum isteka oglasa</label>
          <input
          data-testid="add-ad-modal-expired-at"
            type="date"
            placeholder="ex"
            value={expiredAt}
            onChange={(e) => setExpiredAt(e.target.value)}
          />
        </div>
      </div>

      <div className="add-ad-modal-actions">
        <button
          data-testid="add-ad-modal-go-back"
          className="c-btn c-btn--primary-outlined"
          disabled
          onClick={onDecrementStage}
        >
          NAZAD
        </button>
        <button
          className="c-btn c-btn--primary"
          onClick={completeStageHandler}
          data-testid="add-ad-modal-go-forward"
        >
          NASTAVI
        </button>
      </div>
    </div>
  );
};

AddAdModalFirstStage.propTypes = {
  onCompleteFirstStage: PropTypes.func,
  onIncrementStage: PropTypes.func,
  onDecrementStage: PropTypes.func,
  title: PropTypes.string,
  employmentType: PropTypes.string,
  workHour: PropTypes.string,
  setTitle: PropTypes.func,
  setEmploymentType: PropTypes.func,
  setWorkHour: PropTypes.func,
  expiredAt: PropTypes.any,
  setExpiredAt: PropTypes.func,
};

export default AddAdModalFirstStage;
