import React, { useRef } from 'react';
import { useClickAway } from 'react-use';
import {
  DeleteButton,
  NofillButton,
  NofillButtonsm,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import { RegularInput } from '../../components/common/inputs/TextInput';
import { CustomDropWMoreHIcons } from '../../components/dropdowns/DropWIcon';
import { nameShortner } from '../../utils/helpers';
import { ModalWrapper, SmallModal } from '../modals/ModalWrapper.modal';

const WorkspaceListItem = ({
  workspace,
  currentWorkspace,
  onSwitchWorkspace,
  setWorkspaceName,
  setActiveMenu,
  activeMenu,
  setrenameModal,
  setdeleteModal,
  renameModal,
  workspaceName,
  onRenameWorkspace,
  processingWorkspace,
  deleteModal,
}) => {
  let refName = `ref${workspace._id}`;
  refName = useRef(null);
  // refName.current.accessKey = workspace._id;
  useClickAway(refName, () => {
    if (activeMenu === workspace._id) {
      setActiveMenu('');
      setrenameModal(false);
      setdeleteModal(false);
    }
  });
  return (
    <li
      ref={refName}
      className={workspace._id === currentWorkspace?._id ? 'active' : ''}
      onClick={() => {
        setWorkspaceName(workspace.name);
      }}
    >
      <span
        style={{ cursor: 'pointer' }}
        onClick={() => onSwitchWorkspace(workspace)}
      >
        {nameShortner(workspace.name, 15)}
      </span>
      <CustomDropWMoreHIcons
        activeMenu={activeMenu}
        setActiveMenu={setActiveMenu}
        workspaceId={workspace._id}
        id={`id_${workspace._id}`}
      >
        <ul className="drop-list">
          <li
            className="drop-list-item"
            onClick={() => {
              setrenameModal(true);
            }}
          >
            <svg>
              <use href="/images/icons.svg#rename"></use>
            </svg>
            <span>Rename workspace</span>
          </li>
          <li
            className="drop-list-item co-error"
            onClick={() => {
              setdeleteModal(true);
            }}
          >
            <svg>
              <use href="/images/icons.svg#delete"></use>
            </svg>
            <span>Delete</span>
          </li>
        </ul>
        <ModalWrapper
          visible={renameModal}
          setvisible={setrenameModal}
          title="Rename workspace"
          height={290}
        >
          <div className="modal-body">
            <RegularInput
              type="text"
              value={workspaceName}
              onchange={val => setWorkspaceName(val)}
              label="Workspace name"
              placeholder="Enter workspace name"
            />
          </div>
          <div className="d-flx-alc-jfe modal-action-wrap">
            <NofillButton
              title="cancel"
              onclick={() => setrenameModal(false)}
            />
            <PrimaryButton
              onclick={() => onRenameWorkspace(workspace._id)}
              text={processingWorkspace ? 'Loading...' : 'Rename workspace'}
            />
          </div>
        </ModalWrapper>
        <SmallModal
          visible={deleteModal}
          setvisible={setdeleteModal}
          title="You’re about to delete a workspace"
        >
          <div className="px-4">
            <p>
              You’ll loose everything in this workspace, including{' '}
              <span>folders</span> and <span>forms</span>.
            </p>
          </div>
          <div className="d-flx-alc-jfe modal-action-wrap">
            <NofillButtonsm
              title="No, I’ll pass"
              onclick={() => setdeleteModal(false)}
            />
            <DeleteButton title="Delete" />
          </div>
        </SmallModal>
      </CustomDropWMoreHIcons>
    </li>
  );
};

export default WorkspaceListItem;
