import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";

import { filteredExecutorTasks } from "@redux/projectsTrackerSlice";

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

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

import "./trackerSelectExecutor.scss";

const TrackerSelectExecutor = ({
  selectedExecutor,
  setSelectedExecutor,
  deleteSelectedExecutor,
  projectBoard
}) => {
  const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
  const dispatch = useDispatch();

  const initListeners = () => {
    document.addEventListener("click", closeByClickingOut);
  };

  const closeByClickingOut = (event) => {
    const path = event.path || (event.composedPath && event.composedPath());

    if (
      event &&
      !path.find(
        (div) =>
          div.classList &&
          (div.classList.contains("tasks__head__executor") ||
            div.classList.contains("tasks__head__executor-dropdown"))
      )
    ) {
      setSelectedExecutorOpen(false);
    }
  };

  function executorFilter(user) {
    dispatch(filteredExecutorTasks(user.user_id));
    setSelectedExecutor(user);
  }

  useEffect(() => {
    initListeners();
  }, []);

  if (selectedExecutor) {
    return (
      <div className="tasks__head__executor-selected">
        <p>{removeLast(selectedExecutor.user.fio)}</p>
        <img
          className="avatar"
          src={
            selectedExecutor.user?.avatar
              ? urlForLocal(selectedExecutor.user.avatar)
              : avatarMok
          }
          alt="avatar"
        />
        <img
          className="delete"
          src={close}
          alt="delete"
          onClick={deleteSelectedExecutor}
        />
      </div>
    );
  } else {
    return (
      <div
        className="tasks__head__executor"
        onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
      >
        <p>Выберите исполнителя</p>
        <img
          className={selectExecutorOpen ? "open" : ""}
          src={arrowDown}
          alt="arrow"
        />
        {selectExecutorOpen && (
          <div className="tasks__head__executor-dropdown">
            {projectBoard.projectUsers.map((user) => {
              return (
                <div
                  className="executor-dropdown__person"
                  key={user.user_id}
                  onClick={() => executorFilter(user)}
                >
                  <p>{removeLast(user.user?.fio)}</p>
                  <img
                    src={
                      user.user?.avatar
                        ? urlForLocal(user.user.avatar)
                        : avatarMok
                    }
                    alt="avatar"
                  />
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  }
};

export default TrackerSelectExecutor;