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

export default WorkspaceListItem;
