import React from "react";
import { useDispatch } from "react-redux";

import {
  deletePersonOnProject,
  modalToggle
} from "@redux/projectsTrackerSlice";

import { caseOfNum, urlForLocal } from "@utils/helper";

import { apiRequest } from "@api/request";

import ModalLayout from "@components/Common/ModalLayout/ModalLayout";

import close from "assets/icons/close.png";
import avatarMok from "assets/images/avatarMok.png";

import "./listEmployees.scss";

const ListEmployees = ({
  active,
  setActiveListEmpl,
  projectBoard,
  setModalAdd
}) => {
  const dispatch = useDispatch();

  function deletePerson(userId) {
    apiRequest("/project/del-user", {
      method: "DELETE",
      data: {
        project_id: projectBoard.id,
        user_id: userId
      }
    }).then(() => {
      dispatch(deletePersonOnProject(userId));
    });
  }

  return (
    <ModalLayout active={active} setActive={setActiveListEmpl}>
      <div className="persons__list">
        <img
          className="persons__list__close"
          src={close}
          alt="close"
          onClick={() => setActiveListEmpl(false)}
        />
        <div className="persons__list__count">
          <span>{projectBoard.projectUsers?.length}</span>
          {caseOfNum(projectBoard.projectUsers?.length, "persons")}
        </div>
        <div className="persons__list__info">
          <span>В проекте </span>
          <p>{projectBoard.name}</p>
        </div>
        <div className="persons__list__items">
          {projectBoard.projectUsers?.map((person) => {
            return (
              <div className="persons__list__item" key={person.user_id}>
                <img
                  className="avatar"
                  src={
                    person.user?.avatar
                      ? urlForLocal(person.user.avatar)
                      : avatarMok
                  }
                  alt="avatar"
                />
                <span>{person.user.fio}</span>
                <img
                  className="delete"
                  src={close}
                  alt="delete"
                  onClick={() => deletePerson(person.user_id)}
                />
              </div>
            );
          })}
        </div>
        <div
          className="persons__list__add"
          onClick={() => {
            dispatch(modalToggle("add-worker"));
            setModalAdd(true);
            setActiveListEmpl(false);
          }}
        >
          <span className="add-person">+</span>
          <p>Добавить участников</p>
        </div>
      </div>
    </ModalLayout>
  );
};

export default ListEmployees;
