import React, { useEffect, useState } from "react";
import PropType from "prop-types";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import plus from "../../assets/images/plus.png";
import xIcon from "../../assets/images/x.png";
import AddAdModalFirstStage from "./AddAdModalFirstStage";
import AddAdModalSecondStage from "./AddAdModalSecondStage";
import AddAdModalThirdStage from "./AddAdModalThirdStage";
import { useSelector, useDispatch } from "react-redux";
import {
  resetIsCheckedAddAdValue,
  setTechnologiesAddAdReq,
} from "../../store/actions/addAdTechnologies/addAdTechnologiesActions";
import { setCreateAdReq } from "../../store/actions/createAd/createAdActions";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
};

const AddAdModal = ({ open, handleClose }) => {
  const [stage, setStage] = useState(1);
  const [title, setTitle] = useState("");
  const [employmentType, setEmploymentType] = useState("Work");
  const [workHour, setWorkHour] = useState("FullTime");
  const [expiredAt, setExpiredAt] = useState(new Date());
  const [experience, setExperience] = useState(0);
  const technologies = useSelector(
    (state) => state.addAdTechnologies.technologies
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setTechnologiesAddAdReq());
  }, []);

  const onSuccessAddAd = () => {
    setStage(1);
    setTitle("");
    setEmploymentType("Work");
    setWorkHour("FullTime");
    setExpiredAt("");
    setExperience(0);
    dispatch(resetIsCheckedAddAdValue());
  };

  const addAdHandler = (
    htmlKeyResponsibilities,
    htmlRequirements,
    htmlOffer
  ) => {
    const technologiesIds = technologies
      .filter((x) => x.isChecked === true)
      .map((x) => x.technologyId);

    dispatch(
      setCreateAdReq({
        title,
        minimumExperience: experience,
        createdAt: new Date(),
        expiredAt,
        keyResponsibilities: htmlKeyResponsibilities,
        requirements: htmlRequirements,
        offer: htmlOffer,
        workHour,
        employmentType,
        technologiesIds,
        onSuccessAddAd,
      })
    );
    handleClose();
  };

  const completeFirstStage = () => {
    // console.log(title, employmentType, workHour, expiredAt);
  };

  const incrementStageHandler = () => {
    setStage((oldState) => oldState + 1);
  };

  const decrementStageHandler = () => {
    setStage((oldState) => oldState - 1);
  };

  return (
    <Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="parent-modal-title"
      aria-describedby="parent-modal-description"
    >
      <Box
        sx={{ ...style, width: 512 }}
        className="add-ad-modal"
        data-testid="add-ad-modal"
      >
        <div className="add-ad-modal-header">
          <div className="add-ad-modal-header-title">
            <img src={plus} alt="plus" />
            <h3>Dodavanje</h3>
            <h4>
              <span className="add-ad-modal-header-title-span">| Oglas</span>
            </h4>
            <h4></h4>
          </div>
          <div className="add-ad-modal-header-icon">
            <button onClick={handleClose}>
              <img src={xIcon} alt="xIcon" />
            </button>
          </div>
        </div>

        <div className="add-ad-modal-stages">
          {stage === 1 && (
            <AddAdModalFirstStage
              title={title}
              setTitle={setTitle}
              employmentType={employmentType}
              setEmploymentType={setEmploymentType}
              workHour={workHour}
              setWorkHour={setWorkHour}
              expiredAt={expiredAt}
              setExpiredAt={setExpiredAt}
              onCompleteFirstStage={completeFirstStage}
              onIncrementStage={incrementStageHandler}
              onDecrementStage={decrementStageHandler}
            />
          )}
          {stage === 2 && (
            <AddAdModalSecondStage
              onIncrementStage={incrementStageHandler}
              onDecrementStage={decrementStageHandler}
              technologies={technologies}
              experience={experience}
              setExperience={setExperience}
            />
          )}
          {stage === 3 && (
            <AddAdModalThirdStage
              onDecrementStage={decrementStageHandler}
              onAddAd={addAdHandler}
            />
          )}
        </div>
      </Box>
    </Modal>
  );
};

AddAdModal.propTypes = {
  open: PropType.any,
  handleClose: PropType.func,
};

export default AddAdModal;
