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

const CreateAdFirstStep = ({
  title,
  setTitle,
  employmentType,
  setEmploymentType,
  workHour,
  setWorkHour,
  expiredAt,
  setExpiredAt,
}) => {

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

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

  return (
    <div data-testid="create-ad-first-step-form">
      <div className="create-ad-form-control">
        <label>Naslov</label>
        <input
          type="text"
          className="create-ad-form-control-first-step-input"
          onChange={(e) => setTitle(e.target.value)}
          value={title}
          placeholder="ex. Medior React Developer"
        />
      </div>
      <div className="create-ad-form-control">
        <label>Tip zaposlenja</label>
        <div className="create-ad-form-control-buttons">
          <button
            className={`c-btn  ${
              employmentType === "Work"
                ? "c-btn c-btn--primary"
                : "c-btn--primary-outlined"
            }`}
            onClick={employmentTypeHandler.bind(this, "Work")}
          >
            Posao
          </button>
          <button
            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="create-ad-form-control">
        <label>Radno vreme</label>
        <div className="create-ad-form-control-buttons">
          <button
            className={`c-btn  ${
              workHour === "PartTime"
                ? "c-btn c-btn--primary"
                : "c-btn--primary-outlined"
            }`}
            onClick={workHourHandler.bind(this, "PartTime")}
          >
            Part-time
          </button>
          <button
            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="create-ad-form-control">
        <label>Datum isteka oglasa</label>
        <input
          type="date"
          className="create-ad-form-control-first-step-input"
          onChange={(e) => setExpiredAt(e.target.value)}
          value={expiredAt}
        />
      </div>
    </div>
  );
};

CreateAdFirstStep.propTypes = {
  title: PropTypes.string,
  setTitle: PropTypes.any,
  employmentType: PropTypes.string,
  setEmploymentType: PropTypes.any,
  workHour: PropTypes.string,
  setWorkHour: PropTypes.any,
  expiredAt: PropTypes.any,
  setExpiredAt: PropTypes.any,
};

export default CreateAdFirstStep;