import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { memo, createElement, useState, useMemo, useRef, useEffect } from 'react';
import classnames from 'classnames';
import { noop, isNotEmpty, isPresent, findById, hyphenate } from '@bigbinary/neeto-cist';
import { withT, useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
import Collapse from '@bigbinary/neeto-icons/Collapse';
import Button from '@bigbinary/neetoui/Button';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { joinHyphenCase, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
import Search from '@bigbinary/neeto-icons/Search';
import Input from '@bigbinary/neetoui/Input';
import Typography from '@bigbinary/neetoui/Typography';
import { isEmpty, assoc, mergeRight } from 'ramda';
import { useTranslation } from 'react-i18next';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { n } from './inject-css-C2dztUxs.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Draggable, Droppable } from '@hello-pangea/dnd';
import Drag from '@bigbinary/neeto-icons/Drag';
import Tooltip from '@bigbinary/neetoui/Tooltip';
import Close from '@bigbinary/neeto-icons/Close';
import Reorder from '@bigbinary/neeto-icons/Reorder';
import MoreDropdown from './MoreDropdown.js';
import { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
import Flash from '@bigbinary/neeto-icons/Flash';
import Plus from '@bigbinary/neeto-icons/Plus';
import withT$1 from '@bigbinary/neeto-commons-frontend/react-utils/withT';
import DownArrow from '@bigbinary/neeto-icons/DownArrow';
import '@bigbinary/neeto-icons/MenuHorizontal';
import '@bigbinary/neeto-icons/MenuVertical';
import '@bigbinary/neetoui/Dropdown';

var PANEL_TYPES = {
  SUMMARY: "summary",
  ELEMENTS: "elements"
};
var SELECTED_ELEMENTS_LIST_DROPPABLE_ID = "droppable-selected-element-container";
var ELEMENTS_LIST_DROPPABLE_ID = "droppable-element-container";
var PREVIEW_CONTAINER_DROPPABLE_ID = "droppable-form-preview-container";
var DROPPABLE_TYPES = {
  ELEMENT: "element",
  SELECTED_ELEMENT: "selected_element"
};

var css = ":root{--neeto-molecule-builder-left-sidebar-width:288px;--neeto-molecule-builder-left-sidebar-width-lg:360px;--neeto-molecule-builder-left-sidebar-header-height:4.375rem;--neeto-molecule-builder-left-sidebar-search-height:2.5rem;--neeto-molecule-builder-right-sidebar-width:420px}.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);position:relative;transition:all .15s;width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg);z-index:101}@media (prefers-reduced-motion:reduce){.neeto-molecules-builder-elements-list-panel__wrapper{transition:none}}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel__wrapper{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper{inset-inline-start:0;position:fixed;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{transform:scaleX(-1)}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{top:109px}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{inset-inline-end:auto;inset-inline-start:8px}}.neeto-molecules-builder-elements-list-panel__container{height:100%;overflow:hidden;width:100%}.neeto-molecules-builder-elements-list-panel{border-inline-end:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-direction:column;height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg)}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel{min-width:0;padding-top:1.5rem;width:100%}}.neeto-molecules-builder-elements-list-panel__toggler{flex-shrink:0;inset-inline-start:calc(100% + 8px);position:absolute;top:8px;transition:color .3s ease-in-out}@media (prefers-reduced-motion:reduce){.neeto-molecules-builder-elements-list-panel__toggler{transition:none}}@media screen and (min-width:1024px){.neeto-molecules-builder-elements-list-panel__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__toggler{inset-inline-end:24px;inset-inline-start:auto}}.neeto-molecules-builder-questions-list-panel__scroll{flex-grow:1;height:calc(100% - 4.375rem);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height));min-height:0;overflow-y:auto;padding-block:0 .5rem;padding-inline:1.5rem;width:100%}.neeto-molecules-builder-questions-list-panel__scroll.neeto-molecules-builder-questions-list-panel__scroll--small{height:calc(100% - 6.875rem);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height) - var(--neeto-molecule-builder-left-sidebar-search-height))}.neeto-molecules-builder-element-properties-panel__wrapper{border-inline-start:1px solid rgb(var(--neeto-ui-gray-200));height:100%;min-width:420px;min-width:var(--neeto-molecule-builder-right-sidebar-width);position:relative;transition:all .15s;width:420px;width:var(--neeto-molecule-builder-right-sidebar-width);z-index:101}@media (prefers-reduced-motion:reduce){.neeto-molecules-builder-element-properties-panel__wrapper{transition:none}}.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{inset-inline-end:8px;opacity:0;pointer-events:none;position:absolute;top:8px}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:1;pointer-events:all}.neeto-molecules-builder-element-properties-panel__wrapper{inset-inline-end:0;position:fixed;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-element-properties-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-element-properties-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-element-properties-panel{display:flex;flex-direction:column;height:100%;min-width:0;overflow-y:auto;padding:1.5rem;width:100%}.neeto-molecules-builder-element-properties-panel--collapsed{max-width:0;min-width:0;padding:0;width:0}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel{padding-top:3rem}}.neeto-molecules-builder-element--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-builder-panel__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;inset-inline-start:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-molecules-builder-panel__backdrop{display:block;visibility:visible}}@media screen and (max-width:1279px){.neeto-molecules-builder-panel__backdrop--extended{display:block;visibility:visible}}[dir=rtl] .neeto-molecules-builder-elements-list-panel__toggler{transform:scaleX(-1);transition:none}[dir=rtl] .neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{transform:scaleX(1)}";
n(css,{});

var _excluded$1 = ["size"];
function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Body = function Body(_ref) {
  var size = _ref.size,
    props = _objectWithoutProperties(_ref, _excluded$1);
  return /*#__PURE__*/jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
    className: classnames("neeto-molecules-builder-questions-list-panel__scroll", {
      "neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
    })
  }));
};

var NoResults = withT(function (_ref) {
  var t = _ref.t;
  return /*#__PURE__*/jsx(Typography, {
    className: "neeto-ui-text-gray-800 text-md flex h-full items-center justify-center",
    weight: "bold",
    children: t("neetoMolecules.builderSidebar.noElements")
  });
});
var NoResults$1 = /*#__PURE__*/memo(NoResults);

var Element = function Element(_ref) {
  var label = _ref.label,
    Icon = _ref.icon,
    _ref$isCreatable = _ref.isCreatable,
    isCreatable = _ref$isCreatable === void 0 ? true : _ref$isCreatable,
    onClick = _ref.onClick,
    _ref$isDragDisabled = _ref.isDragDisabled,
    isDragDisabled = _ref$isDragDisabled === void 0 ? false : _ref$isDragDisabled,
    disabledElementTooltip = _ref.disabledElementTooltip,
    isPlaceholder = _ref.isPlaceholder,
    isDraggingOver = _ref.isDraggingOver,
    isAddingNewElement = _ref.isAddingNewElement;
  var handleClick = function handleClick(event) {
    if (!isCreatable || isAddingNewElement) {
      event.preventDefault();
      return;
    }
    onClick(event);
  };
  return /*#__PURE__*/jsx(Tooltip, {
    content: disabledElementTooltip === null || disabledElementTooltip === void 0 ? void 0 : disabledElementTooltip(label),
    disabled: !disabledElementTooltip || isCreatable || isDraggingOver,
    position: "top",
    touch: ["hold", 500],
    children: /*#__PURE__*/jsxs("div", {
      "data-testid": "add-".concat(joinHyphenCase(label), "-element"),
      className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg relative mb-2 flex h-10 items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
        "neeto-ui-bg-gray-300 cursor-not-allowed": !isCreatable,
        "cursor-pointer": isCreatable,
        "opacity-50": isPlaceholder
      }),
      onClick: handleClick,
      children: [!isDragDisabled && /*#__PURE__*/jsx("span", {
        className: "absolute end-full top-1/2 me-0.5 flex-shrink-0 -translate-y-1/2 cursor-grab",
        "data-testid": "drag-handle",
        children: /*#__PURE__*/jsx(Drag, {
          size: 16
        })
      }), /*#__PURE__*/jsxs("div", {
        className: "flex flex-grow items-center gap-2",
        children: [Icon && /*#__PURE__*/jsx(Icon, {
          "data-testid": "form-icon"
        }), /*#__PURE__*/jsx(Typography, {
          className: "leading-4",
          style: "body2",
          children: label
        })]
      })]
    })
  });
};

function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ElementContainer = function ElementContainer(_ref) {
  var index = _ref.index,
    isDragDisabled = _ref.isDragDisabled,
    element = _ref.element,
    disabledElementTooltip = _ref.disabledElementTooltip,
    isCreatable = _ref.isCreatable,
    onSelect = _ref.onSelect,
    isDraggingOver = _ref.isDraggingOver,
    isAddingNewElement = _ref.isAddingNewElement,
    setVisiblePanel = _ref.setVisiblePanel;
  var isCreatableElement = isCreatable(element.value);
  if (isDragDisabled) {
    return /*#__PURE__*/jsx(Element, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, element), {}, {
      disabledElementTooltip: disabledElementTooltip,
      isAddingNewElement: isAddingNewElement,
      isDragDisabled: isDragDisabled,
      setVisiblePanel: setVisiblePanel
    })), {}, {
      isCreatable: isCreatableElement,
      onClick: function onClick() {
        return onSelect(element);
      }
    }));
  }
  return /*#__PURE__*/createElement(Draggable, {
    index: index,
    draggableId: element.value,
    key: element.label,
    isDragDisabled: isDragDisabled || !isCreatableElement || isAddingNewElement
  }, function (provided, snapshot) {
    return /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4(_objectSpread$4({
        ref: provided.innerRef
      }, provided.draggableProps), provided.dragHandleProps), {}, {
        style: _objectSpread$4(_objectSpread$4({}, provided.draggableProps.style), !snapshot.isDragging && {
          transform: "none"
        }),
        children: /*#__PURE__*/jsx(Element, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, element), {}, {
          disabledElementTooltip: disabledElementTooltip,
          isAddingNewElement: isAddingNewElement,
          isDragDisabled: isDragDisabled,
          isDraggingOver: isDraggingOver,
          setVisiblePanel: setVisiblePanel
        })), {}, {
          isCreatable: isCreatableElement,
          onClick: function onClick() {
            return onSelect(element);
          }
        }))
      })), snapshot.isDragging && /*#__PURE__*/jsx(Element, _objectSpread$4(_objectSpread$4({
        disabledElementTooltip: null
      }, _objectSpread$4(_objectSpread$4({}, element), {}, {
        isAddingNewElement: isAddingNewElement,
        setVisiblePanel: setVisiblePanel
      })), {}, {
        isCreatable: false,
        onClick: noop
      }))]
    });
  });
};

var Section = function Section(_ref) {
  var title = _ref.title,
    elements = _ref.elements,
    onSelect = _ref.onSelect,
    isCreatable = _ref.isCreatable,
    disabledElementTooltip = _ref.disabledElementTooltip,
    isDragDisabled = _ref.isDragElementsDisabled,
    isDraggingOver = _ref.isDraggingOver,
    isAddingNewElement = _ref.isAddingNewElement,
    setVisiblePanel = _ref.setVisiblePanel;
  if (isEmpty(elements)) {
    return null;
  }
  return /*#__PURE__*/jsxs(Fragment, {
    children: [title && /*#__PURE__*/jsx(Typography, {
      className: "mb-3 mt-1",
      children: title
    }), elements.map(function (element) {
      return /*#__PURE__*/createElement(ElementContainer, {
        disabledElementTooltip: disabledElementTooltip,
        element: element,
        isAddingNewElement: isAddingNewElement,
        isCreatable: isCreatable,
        isDragDisabled: isDragDisabled,
        isDraggingOver: isDraggingOver,
        onSelect: onSelect,
        setVisiblePanel: setVisiblePanel,
        index: element.elementIndex,
        key: element.label
      });
    })]
  });
};

function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SectionsContainer = function SectionsContainer(_ref) {
  var isDragElementsDisabled = _ref.isDragElementsDisabled,
    filteredSections = _ref.filteredSections,
    isAddingNewElement = _ref.isAddingNewElement,
    onSelect = _ref.onSelect,
    setVisiblePanel = _ref.setVisiblePanel;
  if (isEmpty(filteredSections)) {
    return /*#__PURE__*/jsx(NoResults$1, {});
  }
  if (isDragElementsDisabled) {
    return /*#__PURE__*/jsx(Fragment, {
      children: filteredSections.map(function (section) {
        return /*#__PURE__*/createElement(Section, _objectSpread$3(_objectSpread$3({}, _objectSpread$3({
          isAddingNewElement: isAddingNewElement,
          isDragElementsDisabled: isDragElementsDisabled,
          onSelect: onSelect,
          setVisiblePanel: setVisiblePanel
        }, section)), {}, {
          key: section.key
        }));
      })
    });
  }
  return /*#__PURE__*/jsx(Droppable, {
    droppableId: ELEMENTS_LIST_DROPPABLE_ID,
    type: DROPPABLE_TYPES.ELEMENT,
    children: function children(provided, snapshot) {
      return /*#__PURE__*/jsx("div", {
        ref: provided.innerRef,
        children: filteredSections.map(function (section) {
          return /*#__PURE__*/createElement(Section, _objectSpread$3(_objectSpread$3({}, _objectSpread$3({
            isAddingNewElement: isAddingNewElement,
            isDragElementsDisabled: isDragElementsDisabled,
            onSelect: onSelect,
            setVisiblePanel: setVisiblePanel
          }, section)), {}, {
            isDraggingOver: snapshot.isDraggingOver,
            key: section.key
          }));
        })
      });
    }
  });
};

var TitleBar$1 = withT(function (_ref) {
  var t = _ref.t,
    setVisiblePanel = _ref.setVisiblePanel;
  return /*#__PURE__*/jsxs("div", {
    className: "flex items-center justify-between p-6 pb-1",
    "data-testid": "elements-panel-title",
    children: [/*#__PURE__*/jsx(Typography, {
      "data-testid": "elements-list-title",
      lineHeight: "normal",
      style: "h3",
      weight: "semibold",
      children: t("neetoMolecules.builderSidebar.addNewElement")
    }), /*#__PURE__*/jsx(Button, {
      "data-testid": "cancel-button",
      icon: Close,
      size: "medium",
      style: "text",
      onClick: function onClick() {
        return setVisiblePanel(PANEL_TYPES.SUMMARY);
      }
    })]
  });
});

function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ElementList = function ElementList(_ref) {
  var setVisiblePanel = _ref.setVisiblePanel,
    _ref$elementSections = _ref.elementSections,
    elementSections = _ref$elementSections === void 0 ? [] : _ref$elementSections,
    onSelect = _ref.onSelect,
    isDragElementsDisabled = _ref.isDragElementsDisabled,
    isAddingNewElement = _ref.isAddingNewElement;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    searchString = _useState2[0],
    setSearchString = _useState2[1];
  var filteredSections = useMemo(function () {
    var elementIndex = 0;
    return elementSections.map(function (section) {
      return _objectSpread$2(_objectSpread$2({}, section), {}, {
        elements: section.elements.filter(function (element) {
          return element.label.toLowerCase().includes(searchString.toLowerCase());
        }).map(function (element) {
          return assoc("elementIndex", elementIndex++, element);
        })
      });
    }).filter(function (section) {
      return isPresent(searchString) ? isNotEmpty(section.elements) : true;
    });
  }, [searchString, elementSections]);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(TitleBar$1, {
      setVisiblePanel: setVisiblePanel
    }), /*#__PURE__*/jsxs("div", {
      className: "mb-1 px-6",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "mb-3",
        style: "body3",
        children: t("neetoMolecules.builderSidebar.addNewElementDescription")
      }), /*#__PURE__*/jsx(Input, {
        autoFocus: true,
        "data-testid": "elements-panel-search-field",
        placeholder: t("neetoMolecules.builderSidebar.searchElements"),
        prefix: /*#__PURE__*/jsx(Search, {}),
        type: "search",
        value: searchString,
        onChange: withEventTargetValue(setSearchString)
      })]
    }), /*#__PURE__*/jsx(Body, {
      "data-testid": "elements-container",
      size: "small",
      children: /*#__PURE__*/jsx(SectionsContainer, {
        filteredSections: filteredSections,
        isAddingNewElement: isAddingNewElement,
        isDragElementsDisabled: isDragElementsDisabled,
        onSelect: onSelect,
        setVisiblePanel: setVisiblePanel
      })
    })]
  });
};

var _excluded = ["element", "isActive", "isSelectedElementActionsDisabled", "selectedElementActionsTooltipProps", "handleSelectElement", "isSelectable", "errors", "actions", "isDraggable"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SelectedElement = function SelectedElement(_ref) {
  var element = _ref.element,
    isActive = _ref.isActive,
    isSelectedElementActionsDisabled = _ref.isSelectedElementActionsDisabled,
    selectedElementActionsTooltipProps = _ref.selectedElementActionsTooltipProps,
    handleSelectElement = _ref.handleSelectElement,
    _ref$isSelectable = _ref.isSelectable,
    isSelectable = _ref$isSelectable === void 0 ? true : _ref$isSelectable,
    _ref$errors = _ref.errors,
    errors = _ref$errors === void 0 ? [] : _ref$errors,
    _ref$actions = _ref.actions,
    actions = _ref$actions === void 0 ? [] : _ref$actions,
    _ref$isDraggable = _ref.isDraggable,
    isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
    props = _objectWithoutProperties(_ref, _excluded);
  var Icon = element.icon;
  var rootElementRef = useRef();
  var onClick = function onClick() {
    return handleSelectElement(element);
  };
  var shouldShowDropdown = isNotEmpty(actions);
  var menuItems = typeof actions === "function" ? actions(element) : actions.map(function (action) {
    return mergeRight(action, {
      onClick: function onClick() {
        action.onClick(element);
      }
    });
  });
  useEffect(function () {
    var rootElement = rootElementRef.current;
    if (!rootElement || !isActive || typeof (rootElement === null || rootElement === void 0 ? void 0 : rootElement.scrollIntoView) !== "function") {
      return;
    }
    rootElement.scrollIntoView({
      behavior: "smooth",
      block: "nearest"
    });
  }, [isActive, rootElementRef]);
  var error = findById(element.id, errors);
  return /*#__PURE__*/jsxs("div", {
    "data-testid": props["data-testid"],
    ref: rootElementRef,
    className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg relative mb-2 flex h-10 cursor-pointer items-center gap-2 border py-3 pe-3 ps-4 transition-all duration-300 ease-in-out", {
      "neeto-molecules-builder-element--active": isActive
    }, {
      "hover:neeto-ui-bg-error-100 neeto-ui-bg-error-100": error
    }),
    onClick: isSelectable ? onClick : noop,
    children: [isDraggable && /*#__PURE__*/jsx("span", {
      className: "absolute end-full top-1/2 me-0.5 flex-shrink-0 -translate-y-1/2 cursor-grab",
      "data-testid": "drag-handle",
      children: /*#__PURE__*/jsx(Reorder, {
        size: 16
      })
    }), /*#__PURE__*/jsxs("div", {
      className: "flex flex-grow items-center gap-2 overflow-hidden",
      "data-testid": "new-element-field",
      children: [Icon && /*#__PURE__*/jsx("div", {
        className: "flex-shrink-0",
        children: /*#__PURE__*/jsx(Icon, {})
      }), /*#__PURE__*/jsx(Typography, {
        className: "truncate leading-snug",
        "data-testid": "".concat(hyphenate(element.label, "new-element"), "-label"),
        style: "body2",
        children: element.label
      })]
    }), shouldShowDropdown && /*#__PURE__*/jsx(MoreDropdown, {
      menuItems: menuItems,
      isDisabled: element.isPending || isSelectedElementActionsDisabled,
      dropdownButtonProps: _objectSpread$1({
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        className: "min-h-0 flex-shrink-0",
        "data-testid": "".concat(hyphenate(element.label), "-more-dropdown"),
        loading: element.isPending
      }, isPresent(selectedElementActionsTooltipProps) && {
        tooltipProps: selectedElementActionsTooltipProps
      })
    })]
  });
};
var SelectedElement$1 = /*#__PURE__*/memo(SelectedElement);

var TitleBar = function TitleBar(_ref) {
  var setVisiblePanel = _ref.setVisiblePanel,
    isLoading = _ref.isLoading,
    showElementsFillButton = _ref.showElementsFillButton,
    isAddingAllElements = _ref.isAddingAllElements,
    addAllElements = _ref.addAllElements,
    isAddingNewElement = _ref.isAddingNewElement,
    addNewElement = _ref.addNewElement,
    addNewElementLabel = _ref.addNewElementLabel;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var handleAddNewElementClick = function handleAddNewElementClick() {
    if (typeof addNewElement === "function") addNewElement();else setVisiblePanel(PANEL_TYPES.ELEMENTS);
  };
  return /*#__PURE__*/jsxs("div", {
    className: "flex items-center justify-between p-6 pb-1",
    "data-testid": "selected-elements-title",
    children: [/*#__PURE__*/jsx(Typography, {
      "data-testid": "elements-title",
      lineHeight: "normal",
      style: "h3",
      weight: "semibold",
      children: t("neetoMolecules.builderSidebar.element", PLURAL)
    }), /*#__PURE__*/jsxs("div", {
      className: "flex items-center justify-between gap-x-2",
      children: [/*#__PURE__*/jsx(Button, {
        "data-testid": "add-element-button",
        disabled: isLoading,
        icon: Plus,
        iconPosition: "left",
        loading: isAddingNewElement,
        size: "small",
        style: "link",
        label: addNewElementLabel || t("neetoMolecules.builderSidebar.addNewElement"),
        onClick: handleAddNewElementClick
      }), showElementsFillButton && /*#__PURE__*/jsx(Button, {
        "data-testid": "add-all-elements-button",
        disabled: isAddingAllElements,
        icon: Flash,
        loading: isAddingAllElements,
        size: "small",
        style: "secondary",
        tooltipProps: {
          content: t("neetoMolecules.builderSidebar.addAllElements"),
          touch: ["hold", 500]
        },
        onClick: addAllElements
      })]
    })]
  });
};

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SelectedElementsList = function SelectedElementsList(_ref) {
  var handleSelectElement = _ref.handleSelectElement,
    isReorderDisabled = _ref.isReorderDisabled,
    isElementVisible = _ref.isElementVisible,
    selectedElementId = _ref.selectedElementId,
    selectedElements = _ref.selectedElements,
    setVisiblePanel = _ref.setVisiblePanel,
    fixedLastElement = _ref.fixedLastElement,
    fixedFirstElement = _ref.fixedFirstElement,
    anchoredElementIds = _ref.anchoredElementIds,
    selectedElementActions = _ref.selectedElementActions,
    addAllElements = _ref.addAllElements,
    isAddingAllElements = _ref.isAddingAllElements,
    showElementsFillButton = _ref.showElementsFillButton,
    isAddingNewElement = _ref.isAddingNewElement,
    addNewElement = _ref.addNewElement,
    addNewElementLabel = _ref.addNewElementLabel,
    isSelectedElementActionsDisabled = _ref.isSelectedElementActionsDisabled,
    selectedElementActionsTooltipProps = _ref.selectedElementActionsTooltipProps;
  var renderSelectedElement = function renderSelectedElement(element) {
    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    return /*#__PURE__*/createElement(SelectedElement$1, {
      element: element,
      handleSelectElement: handleSelectElement,
      index: index,
      isSelectedElementActionsDisabled: isSelectedElementActionsDisabled,
      selectedElementActionsTooltipProps: selectedElementActionsTooltipProps,
      isSelectable: true,
      actions: element.actions,
      isActive: selectedElementId === element.id,
      key: element.id || index,
      "data-testid": "welcome-element".concat(Array.isArray(fixedFirstElement) ? "-".concat(index + 1) : "")
    });
  };
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(TitleBar, {
      addAllElements: addAllElements,
      addNewElement: addNewElement,
      addNewElementLabel: addNewElementLabel,
      isAddingAllElements: isAddingAllElements,
      isAddingNewElement: isAddingNewElement,
      setVisiblePanel: setVisiblePanel,
      showElementsFillButton: showElementsFillButton
    }), /*#__PURE__*/jsxs(Body, {
      "data-testid": "selected-elements-container",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "mb-3",
        style: "body3",
        children: t("neetoMolecules.builderSidebar.elementsReorderDescription")
      }), Array.isArray(fixedFirstElement) ? isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsx(Droppable, {
        droppableId: SELECTED_ELEMENTS_LIST_DROPPABLE_ID,
        type: DROPPABLE_TYPES.SELECTED_ELEMENT,
        children: function children(_ref2) {
          var innerRef = _ref2.innerRef,
            droppableProps = _ref2.droppableProps,
            placeholder = _ref2.placeholder;
          return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
            ref: innerRef
          }, droppableProps), {}, {
            "data-testid": "selected-elements-droppable-container",
            children: [selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.map(function (element, index) {
              var _isElementVisible, _element$id, _element$id2;
              var isVisible = (_isElementVisible = isElementVisible === null || isElementVisible === void 0 ? void 0 : isElementVisible(element)) !== null && _isElementVisible !== void 0 ? _isElementVisible : true;
              if (!isVisible) return null;
              var isAnchoredElement = anchoredElementIds.includes(element.id);
              var isDragDisabled = isReorderDisabled || isAnchoredElement;
              var key = (_element$id = element.id) !== null && _element$id !== void 0 ? _element$id : "element-".concat(joinHyphenCase(element.label));
              return /*#__PURE__*/createElement(Draggable, {
                index: index,
                isDragDisabled: isDragDisabled,
                draggableId: (_element$id2 = element.id) !== null && _element$id2 !== void 0 ? _element$id2 : "element-".concat(index),
                key: key
              }, function (_ref3) {
                var _element$id3;
                var innerRef = _ref3.innerRef,
                  draggableProps = _ref3.draggableProps,
                  dragHandleProps = _ref3.dragHandleProps;
                return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
                  ref: innerRef
                }, draggableProps), dragHandleProps), {}, {
                  children: /*#__PURE__*/createElement(SelectedElement$1, {
                    element: element,
                    handleSelectElement: handleSelectElement,
                    isSelectedElementActionsDisabled: isSelectedElementActionsDisabled,
                    selectedElementActionsTooltipProps: selectedElementActionsTooltipProps,
                    isSelectable: true,
                    actions: selectedElementActions,
                    isActive: selectedElementId === element.id,
                    isDraggable: !isDragDisabled,
                    key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
                  })
                }));
              });
            }), placeholder]
          }));
        }
      }), isPresent(fixedLastElement) && /*#__PURE__*/jsx(SelectedElement$1, {
        handleSelectElement: handleSelectElement,
        isSelectedElementActionsDisabled: isSelectedElementActionsDisabled,
        selectedElementActionsTooltipProps: selectedElementActionsTooltipProps,
        isSelectable: true,
        actions: fixedLastElement.actions,
        "data-testid": "submit-button-element",
        element: fixedLastElement,
        isActive: selectedElementId === fixedLastElement.id
      })]
    })]
  });
};

var ElementsPanel = function ElementsPanel(_ref) {
  var elementSections = _ref.elementSections,
    _ref$selectedElements = _ref.selectedElements,
    selectedElements = _ref$selectedElements === void 0 ? [] : _ref$selectedElements,
    handleAddElement = _ref.handleAddElement,
    isElementVisible = _ref.isElementVisible,
    fixedFirstElement = _ref.fixedFirstElement,
    fixedLastElement = _ref.fixedLastElement,
    _ref$anchoredElementI = _ref.anchoredElementIds,
    anchoredElementIds = _ref$anchoredElementI === void 0 ? [] : _ref$anchoredElementI,
    _ref$isReorderDisable = _ref.isReorderDisabled,
    isReorderDisabled = _ref$isReorderDisable === void 0 ? true : _ref$isReorderDisable,
    _ref$isDragElementsDi = _ref.isDragElementsDisabled,
    isDragElementsDisabled = _ref$isDragElementsDi === void 0 ? true : _ref$isDragElementsDi,
    handleSelectElement = _ref.handleSelectElement,
    selectedElementId = _ref.selectedElementId,
    selectedElementActions = _ref.selectedElementActions,
    _ref$addAllElements = _ref.addAllElements,
    addAllElements = _ref$addAllElements === void 0 ? noop : _ref$addAllElements,
    _ref$isAddingAllEleme = _ref.isAddingAllElements,
    isAddingAllElements = _ref$isAddingAllEleme === void 0 ? false : _ref$isAddingAllEleme,
    _ref$showElementsFill = _ref.showElementsFillButton,
    showElementsFillButton = _ref$showElementsFill === void 0 ? false : _ref$showElementsFill,
    _ref$isAddingNewEleme = _ref.isAddingNewElement,
    isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme,
    addNewElement = _ref.addNewElement,
    addNewElementLabel = _ref.addNewElementLabel,
    _ref$isSelectedElemen = _ref.isSelectedElementActionsDisabled,
    isSelectedElementActionsDisabled = _ref$isSelectedElemen === void 0 ? false : _ref$isSelectedElemen,
    _ref$selectedElementA = _ref.selectedElementActionsTooltipProps,
    selectedElementActionsTooltipProps = _ref$selectedElementA === void 0 ? {} : _ref$selectedElementA;
  var _useState = useState(PANEL_TYPES.SUMMARY),
    _useState2 = _slicedToArray(_useState, 2),
    visiblePanel = _useState2[0],
    setVisiblePanel = _useState2[1];
  var _useBreakpoints = useBreakpoints(),
    isSize = _useBreakpoints.isSize;
  var isLargerScreen = !isSize("mobile");
  var _useState3 = useState(!isLargerScreen),
    _useState4 = _slicedToArray(_useState3, 2),
    isElementsPanelCollapsed = _useState4[0],
    setIsElementsPanelCollapsed = _useState4[1];
  useEffect(function () {
    setIsElementsPanelCollapsed(!isLargerScreen);
  }, [isLargerScreen]);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [!isElementsPanelCollapsed && /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-builder-panel__backdrop",
      onClick: function onClick() {
        setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
      }
    }), /*#__PURE__*/jsxs("div", {
      className: classnames("neeto-molecules-builder-elements-list-panel__wrapper", {
        "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
      }),
      children: [/*#__PURE__*/jsx("div", {
        className: "neeto-molecules-builder-elements-list-panel__container",
        children: /*#__PURE__*/jsx("div", {
          className: classnames("neeto-molecules-builder-elements-list-panel", {
            "neeto-ui-bg-white": visiblePanel === PANEL_TYPES.SUMMARY,
            "neeto-ui-bg-gray-50": visiblePanel !== PANEL_TYPES.SUMMARY
          }),
          onClick: function onClick(event) {
            return event.stopPropagation();
          },
          children: visiblePanel === PANEL_TYPES.SUMMARY ? /*#__PURE__*/jsx(SelectedElementsList, {
            addAllElements: addAllElements,
            addNewElement: addNewElement,
            addNewElementLabel: addNewElementLabel,
            anchoredElementIds: anchoredElementIds,
            fixedFirstElement: fixedFirstElement,
            fixedLastElement: fixedLastElement,
            handleSelectElement: handleSelectElement,
            isAddingAllElements: isAddingAllElements,
            isAddingNewElement: isAddingNewElement,
            isElementVisible: isElementVisible,
            isReorderDisabled: isReorderDisabled,
            isSelectedElementActionsDisabled: isSelectedElementActionsDisabled,
            selectedElementActions: selectedElementActions,
            selectedElementActionsTooltipProps: selectedElementActionsTooltipProps,
            selectedElementId: selectedElementId,
            selectedElements: selectedElements,
            setVisiblePanel: setVisiblePanel,
            showElementsFillButton: showElementsFillButton
          }) : /*#__PURE__*/jsx(ElementList, {
            elementSections: elementSections,
            isAddingNewElement: isAddingNewElement,
            isDragElementsDisabled: isDragElementsDisabled,
            setVisiblePanel: setVisiblePanel,
            onSelect: handleAddElement
          })
        })
      }), /*#__PURE__*/jsx(Button, {
        className: "neeto-molecules-builder-elements-list-panel__toggler",
        icon: Collapse,
        style: "secondary",
        onClick: function onClick() {
          setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
        }
      })]
    })]
  });
};

var EmptyProperty = withT$1(function (_ref) {
  var t = _ref.t;
  return /*#__PURE__*/jsxs("div", {
    className: "flex flex-col gap-y-4",
    children: [/*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-text-gray-600 neeto-ui-rounded-lg flex w-full flex-col items-center justify-center gap-y-2 px-16 py-8",
      children: /*#__PURE__*/jsx(Typography, {
        className: "text-center",
        "data-testid": "build-page-text-label",
        lineHeight: "normal",
        style: "body2",
        children: t("neetoMolecules.builderSidebar.noQuestionProperties")
      })
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-72 w-full"
    })]
  });
});

var Skeleton = withT$1(function (_ref) {
  var t = _ref.t;
  return /*#__PURE__*/jsxs("div", {
    className: "flex flex-col gap-y-4",
    children: [/*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
    }), /*#__PURE__*/jsxs("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-text-gray-600 neeto-ui-rounded-lg flex w-full flex-col items-center justify-center gap-y-2 px-16 py-8",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "text-center",
        "data-testid": "build-page-text-label",
        lineHeight: "normal",
        style: "body2",
        children: t("neetoMolecules.builderSidebar.emptyQuestionProperties")
      }), /*#__PURE__*/jsx(DownArrow, {})]
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-72 w-full"
    })]
  });
});

var PropertiesPanel = function PropertiesPanel(_ref) {
  var id = _ref.id,
    children = _ref.children,
    onClose = _ref.onClose;
  var _useBreakpoints = useBreakpoints(function (window) {
      return {
        largeDesktop: window.innerWidth >= 1280
      };
    }),
    isSize = _useBreakpoints.isSize;
  var isLargerScreen = isSize("largeDesktop");
  var _useState = useState(!isLargerScreen),
    _useState2 = _slicedToArray(_useState, 2),
    isPropertiesPanelCollapsed = _useState2[0],
    setIsPropertiesPanelCollapsed = _useState2[1];
  useEffect(function () {
    setIsPropertiesPanelCollapsed(!isLargerScreen);
  }, [isLargerScreen]);
  useEffect(function () {
    if (!id) return;
    setIsPropertiesPanelCollapsed(false);
  }, [id]);
  var handleCollapsePanel = function handleCollapsePanel() {
    setIsPropertiesPanelCollapsed(!isPropertiesPanelCollapsed);
    onClose === null || onClose === void 0 || onClose(id);
  };
  return /*#__PURE__*/jsxs(Fragment, {
    children: [!isPropertiesPanelCollapsed && /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
      onClick: handleCollapsePanel
    }), /*#__PURE__*/jsxs("div", {
      className: classnames("neeto-molecules-builder-element-properties-panel__wrapper", {
        "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
      }),
      children: [/*#__PURE__*/jsx("div", {
        className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-white",
        "data-testid": "properties-panel",
        children: children !== null && children !== void 0 ? children : /*#__PURE__*/jsx(Skeleton, {})
      }), !isPropertiesPanelCollapsed && /*#__PURE__*/jsx(Button, {
        className: "neeto-molecules-builder-properties-panel__close",
        icon: Close,
        style: "secondary",
        onClick: handleCollapsePanel
      })]
    })]
  });
};
PropertiesPanel.EmptyProperty = EmptyProperty;

export { DROPPABLE_TYPES, ELEMENTS_LIST_DROPPABLE_ID, ElementsPanel, PANEL_TYPES, PREVIEW_CONTAINER_DROPPABLE_ID, PropertiesPanel, SELECTED_ELEMENTS_LIST_DROPPABLE_ID };
//# sourceMappingURL=Builder.js.map
