import React from "react";
import PropTypes from "prop-types";
import { Checkbox, FormControlLabel } from "@mui/material";

const ApplyForAdSecondStage = ({
  professionalQualification,
  setProfessionalQualification,
  technologies,
  setTechnologies,
  experience,
  setExperience,
  onIncreaseStage,
  onDecreaseStage,
}) => {
  let disabled = true;
  let isTechnologySelected = false;
  if (technologies.length > 0) {
    isTechnologySelected = technologies.some((x) => x.isChecked === true);
  }
  if (isTechnologySelected) {
    if (professionalQualification.length > 0) {
      disabled = false;
    }
  }

  const handleCheckboxes = (technologyId) => {
    const tmpTechnologies = technologies.map((tech) =>
      tech.technologyId === technologyId
        ? { ...tech, isChecked: !tech.isChecked }
        : tech
    );
    setTechnologies(tmpTechnologies);
  };

  return (
    <div>
      <div className="apply-for-ad-header-title">
        <p>Strucna sprema</p>
      </div>
      <div className="apply-for-ad-modal-form-control">
        <input
          type="text"
          placeholder="ex. Elektrotehnicki fakultet"
          value={professionalQualification}
          onChange={(e) => setProfessionalQualification(e.target.value)}
        />
      </div>
      <div className="apply-for-ad-header-title">
        <p>Tehnologije koje znaš</p>
      </div>
      <div className="apply-for-ad-header-sub">
        <div className="apply-for-ad-header-sub-group">
          <label>Back-End</label>
          <div className="apply-for-ad-header-sub-group-checkboxes">
            {technologies
              .filter((x) => x.technologyType === "Backend")
              .map((x) => (
                <FormControlLabel
                  key={x.technologyId}
                  control={
                    <Checkbox
                      value={x.name}
                      checked={x.isChecked}
                      onChange={handleCheckboxes.bind(this, x.technologyId)}
                    />
                  }
                  label={x.name}
                />
              ))}
          </div>
        </div>
        <div className="apply-for-ad-header-sub-group">
          <label>Front-End</label>
          <div className="apply-for-ad-header-sub-group-checkboxes">
            {technologies
              .filter((x) => x.technologyType === "Frontend")
              .map((x) => (
                <FormControlLabel
                  key={x.technologyId}
                  control={
                    <Checkbox
                      value={x.name}
                      checked={x.isChecked}
                      onChange={handleCheckboxes.bind(this, x.technologyId)}
                    />
                  }
                  label={x.name}
                />
              ))}
          </div>
        </div>
        <div className="apply-for-ad-header-sub-group">
          <label>Others</label>
          <div className="apply-for-ad-header-sub-group-checkboxes">
            {technologies
              .filter((x) => x.technologyType === "Other")
              .map((x) => (
                <FormControlLabel
                  key={x.technologyId}
                  control={
                    <Checkbox
                      value={x.name}
                      checked={x.isChecked}
                      onChange={handleCheckboxes.bind(this, x.technologyId)}
                    />
                  }
                  label={x.name}
                />
              ))}
          </div>
        </div>
      </div>
      <div className="apply-for-ad-modal-form-control">
        <label>Godine iskustva</label>
        <input
          type="number"
          placeholder="ex. 3 godine iskustva"
          value={experience}
          onChange={(e) => setExperience(e.target.value)}
        />
      </div>
      <div className="apply-for-ad-buttons">
        <button onClick={onDecreaseStage}>NAZAD</button>
        <button onClick={onIncreaseStage} disabled={disabled}>
          NASTAVI
        </button>
      </div>
    </div>
  );
};

ApplyForAdSecondStage.propTypes = {
  professionalQualification: PropTypes.string,
  setProfessionalQualification: PropTypes.func,
  technologies: PropTypes.any,
  setTechnologies: PropTypes.any,
  experience: PropTypes.number,
  setExperience: PropTypes.any,
  onIncreaseStage: PropTypes.func,
  onDecreaseStage: PropTypes.func,
};

export default ApplyForAdSecondStage;
