HRCenter/src/pages/SelectionProcessPage/SelectionProcessOfApplicantPage.js

import React, { useEffect, useRef } from "react";
import arrow_left from "../../assets/images/arrow_left.png";
import arrow_right from "../../assets/images/arrow_right.png";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useTheme } from "@emotion/react";
import { useMediaQuery } from "@mui/material";
import ApplicantSelection from "../../components/Selection/ApplicantSelection";
import { setProcessesReq } from "../../store/actions/processes/processesAction"
import { selectProcesses } from "../../store/selectors/processesSelectors"
import { selectApplicant } from "../../store/selectors/applicantWithProcessSelector"
import { setApplicantReq } from "../../store/actions/processes/applicantAction"

const SelectionProcessOfApplicantPage = () => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("sm"));
  const applicant = useSelector(selectApplicant)
  const processes = applicant?.selectionProcesses;
  const levels = useSelector(selectProcesses)
  const { id } = useParams();
  const activeAdsSliderRef = useRef();
  const { t } = useTranslation();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setApplicantReq(id));
    dispatch(setProcessesReq());
  }, []);


  var settings = {
    dots: false,
    infinite: false,
    speed: 500,
    initialSlide: 0,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
          infinite: true,
          dots: false,
        },
      },
      {
        breakpoint: 900,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          initialSlide: 0,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };

  const activeAdsArrowLeftHandler = () => {
    activeAdsSliderRef.current.slickPrev();
  };

  const activeAdsArrowRightHandler = () => {
    activeAdsSliderRef.current.slickNext();
  };


  const concatLevels = () => {
    const applicantSelections = [];

    for (var i = processes.length; i < levels.length; i++) {
      applicantSelections.push(<ApplicantSelection
        levelNumber={levels[i].id}
        levelName={levels[i].name}
        schedguler={""}
        date={""}
        status={"Čeka na zakazivanje"}
        id={id}
        key={i} />);
    }
    applicantSelections.push(<ApplicantSelection key={i} className="hiddenAd"
      date={""} />);
    return applicantSelections;
  };

  return (
    <>
      <div className="l-t-rectangle"></div>
      <div className="r-b-rectangle"></div>
      {/* <AdFilters /> */}
      <div className="ads">
        {processes && processes.length > 0 && (
          <div className="active-ads">
            <div className="active-ads-header">
              <h1>{t("selection.title")}
                <span className="level-header-spliter">
                  |
                </span>
                <span className="level-header-subheader">
                  {applicant.firstName + " " + applicant.lastName}
                </span>
              </h1>
            </div>
            <div className="active-ads-ads">
              <div className="active-ads-ads-a">
                {!matches && (
                  <div className="active-ads-ads-arrows">
                    <button onClick={activeAdsArrowLeftHandler}>
                      <img src={arrow_left} alt="arrow-left" />
                    </button>
                    <button onClick={activeAdsArrowRightHandler}>
                      <img src={arrow_right} alt="arrow-right" />
                    </button>
                  </div>
                )}
              </div>
              <div className="active-ads-ads-ad">
                <Slider
                  {...settings}
                  slidesToShow={4}
                  slidesToScroll={4}
                  style={{ width: "100%" }}
                  ref={activeAdsSliderRef}
                >
                  {processes.map((process, index) => {
                    return <ApplicantSelection
                      levelNumber={index + 1}
                      levelName={process.selectionLevel.name}
                      schedguler={`${process?.scheduler?.firstName} ${process?.scheduler?.lastName}`}
                      link={process.link}
                      date={new Date(process.date)}
                      status={process.status}
                      id={id}
                      key={index}
                      className={index === processes.length - 1 ? "active-process" : ""}
                    />
                  })}
                  {processes.length <= levels.length && concatLevels()}
                </Slider>
              </div>
            </div>
          </div>
        )}
        {matches && (
          <div className="active-ads-ads-arrows">
            <button onClick={activeAdsArrowLeftHandler}>
              <img src={arrow_left} alt="arrow-left" />
            </button>
            <button onClick={activeAdsArrowRightHandler}>
              <img src={arrow_right} alt="arrow-right" />
            </button>
          </div>
        )}
        <div className="active-process-tip">
          <h3>
            {t("selection.tipHeader")}
          </h3>
          <p>
            {t("selection.tipBody")}
          </p>
        </div>
      </div>
      <div className="add-ad">
        <Link className="ad-details-buttons-link" to="/selectionflow">
          Nazad na sve kandidate
        </Link>
      </div>
    </>
  );
};



export default SelectionProcessOfApplicantPage;