import React, { useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import { useClickAway } from 'react-use';
import { useToasts } from 'react-toast-notifications';
import styled from 'styled-components';
import {
  LargeModal,
  ModalWrapper,
  SmallModal,
} from '../../containers/modals/ModalWrapper.modal';
import InviteFormUser from '../../pages/form-builder/InviteFormUser';
import { IconButton, IconTxtButton } from '../common/buttons/IconButton';
import {
  DeleteButton,
  NofillButton,
  NofillButtonsm,
  PrimaryButton,
} from '../common/buttons/PrimaryBtn';
import {
  SelectFolderOption,
  SelectTemplateCategory,
} from '../common/inputs/Select';
import { RegularInput } from '../common/inputs/TextInput';
export const DropWIcons = () => {
  const [drop, setdrop] = useState(false);
  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more',
      onclick: () => setdrop(!drop),
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `drop-wrapper ${drop ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'drop-list',
        },
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#add-to-folder',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Add to folder')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#rename',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Rename')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#view',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'View')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#add-collab',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Add Collaborators')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#make-template',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Make a Template')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#responses',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Responses')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#delete',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Delete')
        )
      )
    )
  );
};
export const FormCardActions = ({
  openMenu,
  openedAction,
  id,
  form,
  selectedFolder,
  allFolders,
  setSelectedFolder,
  loading,
  onMoveFormToFolder,
  formName,
  setFormName,
  onUpdateForm,
  getFormUsers,
  templateName,
  setTemplateName,
  templateCategory,
  setTemplateCategory,
  categoryOptions,
  onCreateTemplate,
  deleteForm,
  activeFolder,
  getAllForms,
  history,
}) => {
  const [openFolderModal, setOpenFolderModal] = useState(false);
  const [openRenameModal, setOpenRenameModal] = useState(false);
  const [templateModal, settemplateModal] = useState(false);
  const [deleteModal, setdeleteModal] = useState(false);
  const [addColab, setaddColab] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const { addToast } = useToasts();

  const onDeleteForm = async formId => {
    setDeleting(true);
    const res = await deleteForm(formId);

    if (res && res.success) {
      addToast('Form deleted successfully', {
        appearance: 'success',
      });
      getAllForms(activeFolder);
    } else {
      addToast(res?.error, {
        appearance: 'success',
      });
    }

    setDeleting(false);
  };

  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more',
      onclick: () => openMenu(id),
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `drop-wrapper ${openedAction === id ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'drop-list',
        },
        /*#__PURE__*/ React.createElement(
          'li',
          {
            onClick: () => setOpenFolderModal(true),
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#add-to-folder',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Add to folder')
        ),
        /*#__PURE__*/ React.createElement(
          ModalWrapper,
          {
            visible: openFolderModal,
            setvisible: setOpenFolderModal,
            title: 'Add form to a folder',
            height: 306,
          },
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'modal-body',
            },
            /*#__PURE__*/ React.createElement(
              'div',
              {
                style: {
                  paddingBottom: '3rem',
                },
              },
              /*#__PURE__*/ React.createElement(IconTxtButton, {
                title: 'Create New Group',
                svg: 'folder-group',
              })
            ),
            /*#__PURE__*/ React.createElement(SelectFolderOption, {
              type: 'text',
              value: selectedFolder,
              list: allFolders?.folders,
              onchange: folder => setSelectedFolder(folder),
              placeholder: 'Select folder',
              label: 'Folder',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc-jfe modal-action-wrap modal-footer',
            },
            /*#__PURE__*/ React.createElement(NofillButton, {
              title: 'Cancel',
              onclick: () => setOpenFolderModal(false),
            }),
            /*#__PURE__*/ React.createElement(PrimaryButton, {
              onclick: async () => {
                const res = await onMoveFormToFolder();

                if (res?.success) {
                  setOpenFolderModal(false);
                }
              },
              text: loading ? 'processing' : 'Move to folder',
            })
          )
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            onClick: () => setOpenRenameModal(true),
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#rename',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Rename')
        ),
        /*#__PURE__*/ React.createElement(
          ModalWrapper,
          {
            visible: openRenameModal,
            setvisible: setOpenRenameModal,
            title: 'Rename form',
            height: 306,
          },
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'modal-body',
            },
            /*#__PURE__*/ React.createElement(RegularInput, {
              value: formName,
              onchange: val => setFormName(val),
              placeholder: 'Form name',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc-jfe modal-action-wrap modal-footer',
            },
            /*#__PURE__*/ React.createElement(NofillButton, {
              title: 'Cancel',
              onclick: () => setOpenRenameModal(false),
            }),
            /*#__PURE__*/ React.createElement(PrimaryButton, {
              onclick: async () => {
                const res = await onUpdateForm();

                if (res?.success) {
                  setOpenRenameModal(false);
                }
              },
              text: loading ? 'processing' : 'Rename form',
            })
          )
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#view',
            })
          ),
          /*#__PURE__*/ React.createElement(
            Link,
            {
              style: {
                textDecoration: 'none',
                color: 'unset',
              },
              to: `/builder/${form._id}`,
            },
            /*#__PURE__*/ React.createElement('span', null, 'View')
          )
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            onClick: () => {
              getFormUsers(form?._id);
              setaddColab(true);
            },
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#add-collab',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Add Collaborators')
        ),
        /*#__PURE__*/ React.createElement(
          LargeModal,
          {
            visible: addColab,
            setvisible: setaddColab,
            title: 'Bring colleagues onboard',
            height: 650,
          },
          /*#__PURE__*/ React.createElement(InviteFormUser, {
            formId: form._id,
            setvisible: setaddColab,
          })
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            onClick: () => settemplateModal(true),
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#make-template',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Make a Template')
        ),
        /*#__PURE__*/ React.createElement(
          ModalWrapper,
          {
            visible: templateModal,
            setvisible: settemplateModal,
            title: 'Make this form a template',
            height: 344,
          },
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'modal-body',
            },
            /*#__PURE__*/ React.createElement(RegularInput, {
              type: 'text',
              value: templateName,
              placeholder: 'Enter your template name',
              label: 'Template name',
              onchange: val => setTemplateName(val),
            }),
            /*#__PURE__*/ React.createElement(SelectTemplateCategory, {
              type: 'text',
              placeholder: 'Select category',
              label: 'Category',
              list: categoryOptions,
              onchange: setTemplateCategory,
              value: templateCategory,
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc-jfe modal-action-wrap',
            },
            /*#__PURE__*/ React.createElement(NofillButton, {
              title: 'Cancel',
              onclick: () => settemplateModal(false),
            }),
            /*#__PURE__*/ React.createElement(PrimaryButton, {
              onclick: async () => {
                const res = await onCreateTemplate();

                if (res?.success) {
                  settemplateModal(false);
                }
              },
              text: loading ? 'Creating...' : 'Create Template',
            })
          )
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            onClick: () => {
              history.push({
                pathname: `/builder/${form._id}`,
                state: 'results',
              });
            },
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#responses',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Responses')
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          {
            className: 'drop-list-item',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#delete',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'span',
            {
              onClick: () => setdeleteModal(true),
            },
            'Delete'
          ),
          /*#__PURE__*/ React.createElement(
            SmallModal,
            {
              visible: deleteModal,
              setvisible: setdeleteModal,
              title: 'You\u2019re about to delete a form',
            },
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'px-4',
              },
              /*#__PURE__*/ React.createElement(
                'p',
                null,
                'Are you sure you want to delete',
                /*#__PURE__*/ React.createElement('span', null, form?.name),
                '.'
              )
            ),
            /*#__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(
                'span',
                null,
                /*#__PURE__*/ React.createElement(DeleteButton, {
                  onclick: () => onDeleteForm(form._id),
                  title: deleting ? 'Deleting...' : 'Delete',
                })
              )
            )
          )
        )
      )
    )
  );
};
export const FolderActions = ({ children, openMenu, onOpenMenu, id }) => {
  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more',
      onclick: () => onOpenMenu(id),
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `drop-wrapper ${openMenu === id ? 'active' : ''}`,
      },
      children
    )
  );
};
export const DropWMoreIcons = ({ children, index, activeIndex }) => {
  const [drop, setdrop] = useState(false);
  const dropRef = useRef(null);
  useClickAway(dropRef, () => {
    setdrop(false);
  });
  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      ref: dropRef,
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more',
      onclick: () => setdrop(!drop),
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `drop-wrapper ${
          drop && index === activeIndex ? 'active' : ''
        }`,
      },
      children
    )
  );
};
export const DropWMoreHIcons = ({ children }) => {
  const [drop, setdrop] = useState(false);
  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more-h',
      onclick: () => setdrop(!drop),
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `drop-wrapper ${drop ? 'active' : ''}`,
      },
      children
    )
  );
};
export const CustomDropWMoreHIcons = ({
  children,
  id,
  setActiveMenu,
  activeMenu,
  workspaceId,
}) => {
  const handleClick = id => {
    const parentEl = document.querySelector(`#${id}`);
    const dropWrap = parentEl.querySelector('.drop-wrapper');
    dropWrap.style.top =
      parentEl.offsetTop - parentEl.parentElement.scrollTop + 'px';
    dropWrap.style.left = Math.round(parentEl.parentElement.offsetWidth) + 'px';
  };

  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
      id: id,
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more-h',
      onclick: () => {
        handleClick(id);

        if (activeMenu !== workspaceId) {
          setActiveMenu(workspaceId);
        } else {
          setActiveMenu('');
        }
      },
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        onClick: () => {},
        className: `drop-wrapper ${activeMenu === workspaceId ? 'active' : ''}`,
      },
      children
    )
  );
};
export const DropWMoreHIconsWId = ({ children, id }) => {
  const [drop, setdrop] = useState(false);

  const handleClick = id => {
    const parentEl = document.querySelector(`#${id}`);
    const dropWrap = parentEl.querySelector('.drop-wrapper');
    dropWrap.style.top =
      parentEl.offsetTop - parentEl.parentElement.scrollTop + 'px';
    dropWrap.style.left = Math.round(parentEl.parentElement.offsetWidth) + 'px';
    setdrop(!drop);
  };

  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
      id: id,
    },
    /*#__PURE__*/ React.createElement(IconButton, {
      svg: 'more-h',
      onclick: () => handleClick(id),
      className: 'btnicon',
    }),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        onClick: () => {},
        className: `drop-wrapper ${drop ? 'active' : ''}`,
      },
      children
    )
  );
};
const DropDown = styled.div`
  position: relative;
  .btnicon {
    svg {
      width: 20px !important;
      height: 20px !important;
    }
  }
  .drop-wrapper {
    position: absolute;
    ${''}
    /* visibility: hidden; */
    display: none;
    box-shadow: var(--shadow);
    width: 208px;
    border-radius: 8px;
    background: #fff;
    right: 0;
    top: 100%;
    z-index: 6;
    &.active {
      display: block;
    }
  }

  .drop-list {
    padding: 1rem 0;
    .drop-list-item {
      display: flex;
      align-items: center;
      font-family: var(--ff-medium);
      font-size: var(--font-14);
      color: var(--co-body);
      padding: 0.6rem 1.5rem;
      text-transform: none;
      cursor: pointer;
      svg {
        min-width: 32px;
        max-width: 32px;
        width: 32px;
        height: 32px;
      }
      span {
        margin-left: 1rem;
        &:first-letter {
          text-transform: uppercase;
        }
      }
      &:last-child {
        border-top: 1px solid #e8edff;
        color: #d53232;
      }
      &:hover {
        color: var(--co-primary);
      }
    }
  }
`;
