import React from "react";
import PropTypes from "prop-types";
import { Checkbox, FormControlLabel } from "@mui/material";
import { useDispatch } from "react-redux";
import { changeIsCheckedAddAdValue } from "../../store/actions/addAdTechnologies/addAdTechnologiesActions";

const AddAdModalSecondStage = ({
  onIncrementStage,
  onDecrementStage,
  technologies,
  experience,
  setExperience,
}) => {
  const dispatch = useDispatch();

  const completeStageHandler = () => {
    const checkedTechnologies = technologies.filter(
      (x) => x.isChecked === true
    );
    if (checkedTechnologies.length === 0) {
      return;
    }

    onIncrementStage();
  };

  const handleCheckboxes = (technologyId) => {
    dispatch(changeIsCheckedAddAdValue(technologyId));
  };

  return (
    <div className="add-ad-modal-stages">
      <div>
        <div className="add-ad-modal-stage-sub-card-title">
          <label>Neophodne tehnologije</label>
        </div>
        <div className="add-ad-modal-stage-sub-card">
          <div className="add-ad-modal-stage-sub-card-checkboxes-group">
            <label>Front-End</label>
            <div className="add-ad-modal-stage-sub-card-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="add-ad-modal-stage-sub-card-checkboxes-group">
            <label>Back-End</label>
            <div className="add-ad-modal-stage-sub-card-checkboxes">
              {technologies
                .filter((x) => x.technologyType === "Backend")
                .map((x) => (
                  <FormControlLabel
                    key={x.technologyId}
                    control={
                      <Checkbox
                        value={x.name}
                        checked={x.isChecked}
                        className="add-ad-modal-technology"
                        onChange={handleCheckboxes.bind(this, x.technologyId)}
                      />
                    }
                    label={x.name}
                  />
                ))}
            </div>
          </div>

          <div className="add-ad-modal-stage-sub-card-checkboxes-group">
            <label>Other</label>
            <div className="add-ad-modal-stage-sub-card-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="add-ad-modal-stage-sub-card">
          <label>Godine iskustva</label>
          <input
            type="number"
            placeholder="ex. 3 godine iskustva"
            value={experience}
            data-testid="add-ad-modal-experience"
            onChange={(e) => setExperience(e.target.value)}
          />
        </div>
      </div>

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

AddAdModalSecondStage.propTypes = {
  onIncrementStage: PropTypes.func,
  onDecrementStage: PropTypes.func,
  technologies: PropTypes.any,
  experience: PropTypes.any,
  setExperience: PropTypes.func,
};

export default AddAdModalSecondStage;
