import React, { useCallback, useMemo, useRef } from "react";
import ContextMenu from "../ContextMenu";
import { useContextMenu } from "../../hooks/contextMenu";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { startSetSelectedItem } from "../../actions/selectedItem";
import mobilecheck from "../../utils/mobileCheck";
import moment from "moment";

const FolderItem = React.memo((props) => {
  const { folder } = props;
  const elementSelected = useSelector(
    (state) => state.selectedItem.selected === folder._id
  );
  const lastSelected = useRef(0);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const {
    onContextMenu,
    closeContextMenu,
    onTouchStart,
    onTouchMove,
    onTouchEnd,
    clickStopPropagation,
    ...contextMenuState
  } = useContextMenu();

  const folderClick = useCallback(() => {
    const currentDate = Date.now();

    if (!elementSelected) {
      dispatch(startSetSelectedItem(folder._id, false, false));
      lastSelected.current = Date.now();
      return;
    }

    const isMobile = mobilecheck();

    if (isMobile || currentDate - lastSelected.current < 1500) {
      navigate(`/folder/${folder._id}`);
    }

    lastSelected.current = Date.now();
  }, [
    dispatch,
    startSetSelectedItem,
    mobilecheck,
    navigate,
    folder._id,
    elementSelected,
  ]);

  return (
    <div
      className={classNames(
        "p-[12px] border border-[#ebe9f9] rounded-[4px] overflow-hidden cursor-pointer animate ",
        {
          "bg-[#3c85ee]": elementSelected,
        }
      )}
      onClick={folderClick}
      onContextMenu={onContextMenu}
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      {contextMenuState.selected && (
        <div onClick={clickStopPropagation}>
          <ContextMenu
            gridMode={true}
            folderMode={true}
            quickItemMode={props.folder.parent !== "/"}
            contextSelected={contextMenuState}
            closeContext={closeContextMenu}
            folder={props.folder}
          />
        </div>
      )}

      <div>
        <svg
          className={classNames(
            "w-[40px] h-[40px]",
            elementSelected ? "text-white" : "text-[#3c85ee]"
          )}
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="folder"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          data-fa-i2svg=""
        >
          <path
            fill="currentColor"
            d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
          ></path>
        </svg>
      </div>
      <div
        className={classNames(
          "overflow-hidden text-ellipsis block w-full animate mt-2",
          elementSelected
            ? "bg-[#3c85ee] text-white"
            : "bg-white text-[#637381]"
        )}
      >
        <p
          className={classNames(
            "m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
            elementSelected ? "text-white" : "text-black"
          )}
        >
          {props.folder.name}
        </p>
        <span
          className={classNames(
            "m-0 font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
            elementSelected ? "text-white" : "text-[#637381]"
          )}
        >
          Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")}
        </span>
      </div>
    </div>
  );
});

export default FolderItem;