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

const ApplyForAdFirstStage = ({
  firstName,
  setFirstName,
  lastName,
  gender,
  setGender,
  setLastName,
  dateOfBirth,
  setDateOfBirth,
  phoneNumber,
  setPhoneNumber,
  onIncreaseStage,
}) => {
  const disabled =
    firstName.length === 0 ||
    lastName.length === 0 ||
    dateOfBirth === "" ||
    phoneNumber.length === 0 ||
    gender.length === 0;

  return (
    <div>
      <div className="apply-for-ad-modal-form-control">
        <label>Ime</label>
        <input
          type="text"
          placeholder="ex. Petar"
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
      </div>
      <div className="apply-for-ad-modal-form-control">
        <label>Prezime</label>
        <input
          type="text"
          placeholder="ex. Petrovic"
          value={lastName}
          onChange={(e) => setLastName(e.target.value)}
        />
      </div>
      <div className="apply-for-ad-modal-form-control">
        <label>Pol</label>
        <div style={{ display: "flex" }}>
          <div style={{ display: "flex" }}>
            <input
              type="radio"
              name="gender"
              value="Muski"
              checked={gender === "Muski"}
              onChange={(e) => setGender(e.target.value)}
            />
            <p style={{ marginLeft: "5px" }}>Muski</p>
          </div>
          <div style={{ display: "flex", marginLeft: "50px" }}>
            <input
              type="radio"
              name="gender"
              value="Zenski"
              checked={gender === "Zenski"}
              onChange={(e) => setGender(e.target.value)}
            />
            <p style={{ marginLeft: "5px" }}>Zenski</p>
          </div>
        </div>
      </div>
      <div className="apply-for-ad-modal-form-control">
        <label>Datum Rodjenja</label>
        <input
          type="date"
          placeholder="ex. Datum rodjenja"
          value={dateOfBirth}
          onChange={(e) => setDateOfBirth(e.target.value)}
        />
      </div>
      <div className="apply-for-ad-modal-form-control">
        <label>Broj telefona</label>
        <input
          type="text"
          placeholder="ex. +381/60/000/0000"
          value={phoneNumber}
          onChange={(e) => setPhoneNumber(e.target.value)}
        />
      </div>
      <div className="apply-for-ad-buttons">
        <button disabled>NAZAD</button>
        <button disabled={disabled} onClick={() => onIncreaseStage()}>
          NASTAVI
        </button>
      </div>
    </div>
  );
};

ApplyForAdFirstStage.propTypes = {
  firstName: PropTypes.string,
  setFirstName: PropTypes.any,
  lastName: PropTypes.string,
  gender: PropTypes.string,
  setGender: PropTypes.func,
  setLastName: PropTypes.any,
  dateOfBirth: PropTypes.any,
  setDateOfBirth: PropTypes.any,
  phoneNumber: PropTypes.string,
  setPhoneNumber: PropTypes.any,
  onIncreaseStage: PropTypes.func,
};

export default ApplyForAdFirstStage;
