import React, { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { useToasts } from 'react-toast-notifications';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { Avatar, FormUserAvatar } from '../../components/common/avatars/Avatar';
import {
  IconTxtButton,
  MoreDropButton,
  RoundIconButton,
  PrimaryIconButton,
  IconButton,
} from '../../components/common/buttons/IconButton';
import {
  NofillButton,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import { SelectTemplateCategory } from '../../components/common/inputs/Select';
import {
  RegularInput,
  RegularTextArea,
} from '../../components/common/inputs/TextInput';
import { SingleProfileDrop } from '../../components/dropdowns/NavDrop';
import FormSettingsModal from '../../components/form-builder/FormSettingsModal';
import InviteFormUser from '../../pages/form-builder/InviteFormUser';
import { getNameInitials, nameShortner } from '../../utils/helpers';
import { LargeModal, ModalWrapper } from '../modals/ModalWrapper.modal';
import { FormBuilderNavigation } from './Navigation';
export const FormBuilderNav = ({
  formName,
  formId,
  description,
  onUpdateForm,
  updating,
  editFormDescription,
  editFormName,
  updatingForm,
  userProfile,
}) => {
  const [showProfile, setShowProfile] = useState(false);
  const [renameModal, setRenameModal] = useState(false);
  const [shareModal, setShareModal] = useState(false);
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      Header,
      null,
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'first-child',
        },
        /*#__PURE__*/ React.createElement(
          Link,
          {
            to: '/',
            className: 'back-link',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            null,
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#logo',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Back to Forms')
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'center-child',
        },
        /*#__PURE__*/ React.createElement(MoreDropButton, {
          title: nameShortner(formName, 15),
          svg: 'drop',
          onclick: () => {
            setRenameModal(true);
          },
          color: '#61677C',
        }),
        /*#__PURE__*/ React.createElement(
          ModalWrapper,
          {
            visible: renameModal,
            setvisible: setRenameModal,
            title: 'Save your form',
            height: 468,
            width: 515,
          },
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'modal-body',
            },
            /*#__PURE__*/ React.createElement(RegularInput, {
              value: formName,
              onchange: value => editFormName(value),
              label: 'form name',
              placeholder: 'Enter your form name',
            }),
            /*#__PURE__*/ React.createElement(RegularTextArea, {
              label: 'Form Description',
              value: description,
              onchange: value => editFormDescription(value),
              placeholder: 'Enter your form description',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc-jfe modal-action-wrap',
            },
            /*#__PURE__*/ React.createElement(NofillButton, {
              title: 'close',
              onclick: () => setRenameModal(false),
            }),
            /*#__PURE__*/ React.createElement(PrimaryButton, {
              text: updating ? 'saving...' : 'Save Form',
              onclick: () => onUpdateForm('manual'),
            })
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'last-child',
        },
        /*#__PURE__*/ React.createElement(
          UserNav,
          null,
          /*#__PURE__*/ React.createElement(
            Link,
            {
              to: `/preview/${formId}`,
              target: '_blank',
            },
            /*#__PURE__*/ React.createElement(PrimaryIconButton, {
              opt: 'a',
              title: 'Preview',
              svg: 'show',
              color: '#61677C',
              className: 'mr-1 responsive',
            })
          ),
          /*#__PURE__*/ React.createElement(PrimaryIconButton, {
            title: 'Share',
            svg: 'share',
            color: '#61677C',
            className: 'mr-1 responsive',
            onclick: () => {
              setShareModal(true);
            },
          }),
          /*#__PURE__*/ React.createElement(
            LargeModal,
            {
              visible: shareModal,
              setvisible: setShareModal,
              title: 'Form Settings',
              height: 650,
            },
            /*#__PURE__*/ React.createElement(FormSettingsModal, {
              setShareModal: setShareModal,
            })
          ),
          /*#__PURE__*/ React.createElement(PrimaryIconButton, {
            title: updatingForm ? 'saving...' : 'Save',
            svg: 'save',
            color: '#61677C',
            className: 'responsive',
            onclick: () => {
              setRenameModal(true);
            },
          }),
          /*#__PURE__*/ React.createElement(SingleProfileDrop, {
            userProfile: userProfile,
            showProfile: showProfile,
            setShowProfile: setShowProfile,
          })
        )
      )
    )
  );
};
export const FormBuilderPageNav = ({
  formUsers,
  bg,
  opt,
  deco,
  formId,
  onDuplicateForm,
  createTemplate,
  categoryOptions,
  activeTab,
  setActiveTab,
  allFolders,
  addFormToFolder,
}) => {
  const [addColab, setaddColab] = useState(false);
  const [settingsModal, setSettingsModal] = useState(false);
  const [templateModal, settemplateModal] = useState(false);
  const [creatingTemplate, setCreatingTemplate] = useState(false);
  const [addToFolderModal, setaddToFolderModal] = useState(false);
  const [templateName, setTemplateName] = useState('');
  const [category, setCategory] = useState({});
  const [folderToAddForm, setFolderToAddForm] = useState({});
  const { addToast } = useToasts();
  const [formAction, setformAction] = useState(false);
  const [loading, setLoading] = useState(false);

  const onCreateTemplate = async () => {
    setCreatingTemplate(true);
    const templateDetails = {
      form: formId,
      category: category._id,
      name: templateName,
    };
    const templateData = await createTemplate(templateDetails);

    if (templateData?.success) {
      addToast('Template created successfully', {
        appearance: 'success',
      });
      settemplateModal(false);
      setCreatingTemplate(false);
    } else {
      addToast(templateData?.error, {
        appearance: 'error',
      });
      setCreatingTemplate(false);
    }
  };

  const onAddFormToFolder = async () => {
    setLoading(true);
    const details = {
      forms: [formId],
    };
    const res = await addFormToFolder(folderToAddForm._id, details);

    if (res?.success) {
      addToast('Form added to folder', {
        appearance: 'success',
      });
      setaddToFolderModal(false);
    } else {
      addToast(res?.error, {
        appearance: 'error',
      });
    }

    setLoading(false);
  };

  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      Header,
      {
        as: opt,
        bg: bg,
        deco: deco,
      },
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'first-child',
        },
        /*#__PURE__*/ React.createElement(IconButton, {
          svg: 'more-h',
          className: 'toggle-btn',
          onclick: () => setformAction(!formAction),
        }),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: `form-actions ${formAction ? 'active' : ''}`,
          },
          /*#__PURE__*/ React.createElement(
            'div',
            null,
            /*#__PURE__*/ React.createElement(ReactTooltip, {
              id: 'addToFolder',
            }),
            /*#__PURE__*/ React.createElement(
              'span',
              {
                'data-for': 'addToFolder',
                'data-tip': 'Add to a folder',
              },
              /*#__PURE__*/ React.createElement(RoundIconButton, {
                bg: 'rgba(0, 75, 255, 0.1)',
                svg: 'folder',
                onclick: () => setaddToFolderModal(true),
              })
            ),
            /*#__PURE__*/ React.createElement(
              ModalWrapper,
              {
                visible: addToFolderModal,
                setvisible: setaddToFolderModal,
                title: 'Add form to a folder',
                height: 306,
              },
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'modal-body',
                },
                /*#__PURE__*/ React.createElement(SelectTemplateCategory, {
                  type: 'text',
                  placeholder: 'Select folder',
                  label: 'Folder',
                  list: allFolders?.folders,
                  value: folderToAddForm,
                  onchange: setFolderToAddForm,
                })
              ),
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'd-flx-alc-jsb modal-action-wrap modal-footer',
                },
                /*#__PURE__*/ React.createElement(IconTxtButton, {
                  title: 'Create New Folder',
                  svg: 'folder-group',
                }),
                /*#__PURE__*/ React.createElement(PrimaryButton, {
                  onclick: onAddFormToFolder,
                  text: loading ? 'Loading...' : 'Move to folder',
                })
              )
            )
          ),
          /*#__PURE__*/ React.createElement(ReactTooltip, {
            id: 'duplicateForm',
          }),
          /*#__PURE__*/ React.createElement(
            'span',
            {
              'data-for': 'duplicateForm',
              'data-tip': 'Duplicate form',
              onClick: () => onDuplicateForm(),
            },
            /*#__PURE__*/ React.createElement(RoundIconButton, {
              bg: 'rgba(0, 75, 255, 0.1)',
              svg: 'duplicate',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            null,
            /*#__PURE__*/ React.createElement(ReactTooltip, {
              id: 'createTemplate',
            }),
            /*#__PURE__*/ React.createElement(
              'span',
              {
                'data-for': 'createTemplate',
                'data-tip': 'Create template',
              },
              /*#__PURE__*/ React.createElement(RoundIconButton, {
                bg: 'rgba(0, 75, 255, 0.1)',
                svg: 'template',
                onclick: () => settemplateModal(true),
              })
            ),
            /*#__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',
                  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: setCategory,
                  value: category,
                })
              ),
              /*#__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, {
                  text: creatingTemplate ? 'Creating...' : 'Create Template',
                  onClick: () => onCreateTemplate(),
                })
              )
            )
          ),
          /*#__PURE__*/ React.createElement(ReactTooltip, {
            id: 'Plugins',
          }),
          /*#__PURE__*/ React.createElement(
            'span',
            {
              'data-for': 'Plugins',
              'data-tip': 'Plugins',
            },
            /*#__PURE__*/ React.createElement(
              Link,
              {
                to: `/plugins/${formId}`,
              },
              /*#__PURE__*/ React.createElement(RoundIconButton, {
                bg: 'rgba(0, 75, 255, 0.1)',
                svg: 'plugin', // opt="a"
                // link="/plugins/"
              })
            )
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            null,
            /*#__PURE__*/ React.createElement(RoundIconButton, {
              bg: 'rgba(0, 75, 255, 0.1)',
              svg: 'settings',
              onclick: () => {
                setSettingsModal(true);
              },
            }),
            /*#__PURE__*/ React.createElement(
              LargeModal,
              {
                visible: settingsModal,
                setvisible: setSettingsModal,
                title: 'Form Settings',
                height: 650,
              },
              /*#__PURE__*/ React.createElement(FormSettingsModal, {
                setShareModal: setSettingsModal,
              })
            )
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'center-child alt',
        },
        /*#__PURE__*/ React.createElement(FormBuilderNavigation, {
          setActiveTab: setActiveTab,
          activeTab: activeTab,
        })
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'd-flx-alc page-extras last-child form-colab',
        },
        formUsers && formUsers.users
          ? formUsers.users.map((user, i) => {
              if (i < 3) {
                return /*#__PURE__*/ React.createElement(FormUserAvatar, {
                  key: i,
                  image: user.profilePicture ? user.profilePicture : '',
                  initials: getNameInitials(
                    `${user.firstName} ${user.lastName}`
                  ),
                });
              }
            })
          : '',
        formUsers &&
          formUsers.users &&
          formUsers.users.length > 3 &&
          /*#__PURE__*/ React.createElement(
            'span',
            {
              style: {
                cursor: 'pointer',
              },
              onClick: () => setaddColab(true),
            },
            /*#__PURE__*/ React.createElement(Avatar, {
              initials: `+ ${formUsers.users.length - 3}`,
            })
          ),
        /*#__PURE__*/ React.createElement(
          'div',
          null,
          /*#__PURE__*/ React.createElement(ReactTooltip, {
            id: 'addFormUser',
          }),
          /*#__PURE__*/ React.createElement(
            'span',
            {
              'data-for': 'delete',
              'data-tip': 'Invite form collaborators',
            },
            /*#__PURE__*/ React.createElement(RoundIconButton, {
              svg: 'plus',
              onclick: () => setaddColab(true),
            })
          ),
          /*#__PURE__*/ React.createElement(
            LargeModal,
            {
              visible: addColab,
              setvisible: setaddColab,
              title: 'Bring colleagues onboard',
              height: 650,
            },
            /*#__PURE__*/ React.createElement(InviteFormUser, {
              formId: formId,
              setvisible: setaddColab,
            })
          )
        )
      )
    )
  );
};
export const SettingsNav = () => {
  const [showProfile, setShowProfile] = useState(false);
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      Header,
      null,
      /*#__PURE__*/ React.createElement(
        Link,
        {
          to: '/',
          className: 'back-link',
        },
        /*#__PURE__*/ React.createElement(
          'svg',
          null,
          /*#__PURE__*/ React.createElement('use', {
            href: '/images/icons.svg#logo',
          })
        ),
        /*#__PURE__*/ React.createElement('span', null, 'Back to Forms')
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'absolute-center',
        },
        /*#__PURE__*/ React.createElement(
          NavLink,
          {
            to: '/profile/',
          },
          'Settings'
        )
      ),
      /*#__PURE__*/ React.createElement(
        UserNav,
        null,
        /*#__PURE__*/ React.createElement(SingleProfileDrop, {
          showProfile: showProfile,
          setShowProfile: setShowProfile,
        })
      )
    )
  );
};
const Header = styled.header`
  position: relative;
  background: ${props => (props.bg ? props.bg : ' var(--main-background)')};
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: ${props => (props.deco ? props.deco : '')};
  > * {
    flex: 1;
    &.first-child {
    }
    &.center-child {
      display: flex;
      justify-content: center;
      &.alt {
        flex: 3;
        justify-content: flex-start;
        @media (min-width: 768px) {
          flex: 1;
          justify-content: center;
        }
      }
    }
    &.last-child {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  &.save-nav {
    padding: 2rem;
  }
  .back-link {
    display: flex;
    align-items: center;
    svg {
      width: 30px;
      height: 36px;
      @media (min-width: 768px) {
        width: 20px;
        height: 26px;
      }
    }
    span {
      font-size: 1.6rem;
      font-weight: 500;
      font-family: var(--ff-medium);
      margin-left: 1.5rem;
      display: none;
      @media (min-width: 768px) {
        display: inline-block;
      }
    }
  }
  .toggle-btn {
    padding-left: 0;
    color: var(--co-head);
    svg {
      width: 25px;
      height: 25px;
    }
    @media (min-width: 768px) {
      display: none;
    }
  }
  .form-actions {
    position: absolute;
    position: absolute;
    display: flex;
    ${''}
    /* flex-direction: column; */
    justify-content: space-between;
    width: 0;
    overflow: hidden;
    top: 5px;
    left: 5rem;
    background: #ffffff;
    box-shadow: 0px 10px 70px rgba(224, 228, 237, 0.7);
    transition: all 0.3s ease-in-out;
    z-index: 1;
    border-radius: 4px;
    &.active {
      width: 240px;
      overflow: auto;
      padding: 1rem;
      @media (min-width: 768px) {
        width: auto;
        left: 0;
        padding: 0;
      }
    }
    @media (min-width: 768px) {
      position: relative;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: auto;
      top: 0;
      left: 0;
      background: transparent;
      box-shadow: none;
      overflow: auto;
      z-index: auto;
      border-radius: 0;
      > * {
        &:not(:last-child) {
          margin-right: 1rem;
          @media (min-width: 1280px) {
            margin-right: 2.5rem;
          }
        }
      }
    }
  }

  .form-colab {
    display: none;
    @media (min-width: 768px) {
      display: flex;
    }
  }
`;
const UserNav = styled.div`
  display: flex;
  align-items: center;
  .space {
    margin-left: 1rem;
  }
`; // const Logo = styled.img`
//   height: 20px;
//   @media (min-width: 768px) {
//     height: 26px;
//   }
// `;
