import { Add, AddSmall } from "@wix/wix-ui-icons-common";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { getIsModalOpen, useModalState } from "./../../ricos-modals/modal-service-provider.js";
import { createPluginToolbarButton } from "./../../_shared/create-plugin-toolbar-button.js";
import { DropdownButton } from "./../../_shared/dropdown-button.js";
import { DropdownModal } from "./../../_shared/dropdown-modal/dropdown-modal.js";
import { ListItemSelect } from "./../../_shared/list-item-select/list-item-select.js";
import { getNodeInSelection } from "./../../_shared/resolvers/get-node-in-selection.js";
import { DATA_HOOKS } from "../data-hooks.js";
import { canAddCell, isCellSelected } from "./resolvers.js";
const ADD_CELL_DROPDOWN_MODAL_ID = "SmartBlockAddCellDropdown.modal";
const ADD_CELL_OPTIONS = [
  {
    id: "before",
    dataHook: DATA_HOOKS.CELL_ADD_BEFORE_BUTTON,
    labelKey: "SmartBlock_CellAddBefore_Tooltip",
    icon: AddSmall,
    iconMobile: AddSmall
  },
  {
    id: "after",
    dataHook: DATA_HOOKS.CELL_ADD_AFTER_BUTTON,
    labelKey: "SmartBlock_CellAddAfter_Tooltip",
    icon: AddSmall,
    iconMobile: AddSmall
  }
];
const createAddCellDropdownButton = ({ services }) => createPluginToolbarButton({
  id: "smartBlockCellAddDropdown",
  type: "dropdown",
  icon: Add,
  tooltip: "SmartBlock_CellAddDropdown_Tooltip",
  dataHook: DATA_HOOKS.CELL_ADD_DROPDOWN_BUTTON,
  attributes: {
    selectedNode: getNodeInSelection,
    visible: isCellSelected,
    canAddCell
  },
  renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(AddCellDropdownButton, { toolbarItem }),
  // Cast so `getComponentProps` is typed with the TABLE.insert shape (see
  // packages/www-ricos/src/exported-components/asset-header/index.tsx): `options: [{ id,
  // text, dataHook, icon }]` + `onSelect: () => (id) => void` factory. The `command`
  // below converts back to the legacy `dropdownOptions` / direct `onSelect` shape that
  // the ricos-native AddCellPanel still consumes.
  Component: AddCellPanel,
  command: (props) => {
    const {
      modals,
      referenceElement,
      getComponentProps,
      tiptapEditor,
      attributes,
      publicCommands
    } = props;
    const componentProps = getComponentProps?.({
      tiptapEditor,
      attributes,
      publicCommands,
      t: services.t,
      modals,
      languageDir: services.context.languageDir
    });
    if (!componentProps) {
      return;
    }
    if (modals.isModalOpen(ADD_CELL_DROPDOWN_MODAL_ID)) {
      modals.closeModal(ADD_CELL_DROPDOWN_MODAL_ID);
      return;
    }
    const { options, onSelect: onSelectFactory, ...rest } = componentProps;
    modals.openModal({
      id: ADD_CELL_DROPDOWN_MODAL_ID,
      Component: AddCellPanel,
      type: "exclusive",
      componentProps: {
        ...rest,
        dropdownOptions: options.map(({ id, text, dataHook, icon, iconMobile }) => ({
          id,
          dataHook,
          label: text,
          icon,
          iconMobile
        })),
        onSelect: onSelectFactory()
      },
      layout: services.context.isMobile ? "drawer" : "floating",
      positioning: { referenceElement, placement: "bottom" }
    });
  },
  getComponentProps: ({ tiptapEditor, attributes, t, modals }) => ({
    options: ADD_CELL_OPTIONS.map((o) => ({
      id: o.id,
      dataHook: o.dataHook,
      text: t(o.labelKey),
      icon: o.icon,
      iconMobile: o.iconMobile
    })),
    onSelect: () => (position) => {
      const cellId = attributes.selectedNode?.attrs?.id;
      if (!cellId) {
        return;
      }
      if (position === "before") {
        tiptapEditor.commands.addSmartBlockCellBefore(cellId);
      } else {
        tiptapEditor.commands.addSmartBlockCellAfter(cellId);
      }
      modals.closeModal(ADD_CELL_DROPDOWN_MODAL_ID);
    },
    closeModal: () => modals.closeModal(ADD_CELL_DROPDOWN_MODAL_ID)
  })
});
const AddCellPanel = ({ dropdownOptions, onSelect, closeModal }) => {
  const { isMobile, t } = useContext(RicosContext);
  const onKeyDown = (e, id) => {
    if (e.key === "Enter") {
      onSelect(id);
      e.stopPropagation();
    }
  };
  return /* @__PURE__ */ React.createElement(
    DropdownModal,
    {
      title: t("SmartBlock_CellAddDropdown_Tooltip"),
      onCloseButtonClick: closeModal,
      options: dropdownOptions.map(
        ({ id, dataHook, label, icon: Icon, iconMobile: IconMobile }) => /* @__PURE__ */ React.createElement(
          ListItemSelect,
          {
            key: id,
            dataHook,
            prefix: isMobile && IconMobile ? /* @__PURE__ */ React.createElement(IconMobile, null) : Icon ? /* @__PURE__ */ React.createElement(Icon, null) : null,
            title: label,
            selected: false,
            onClick: () => onSelect(id),
            onKeyDown: (e) => onKeyDown(e, id)
          }
        )
      )
    }
  );
};
const AddCellDropdownButton = ({ toolbarItem }) => {
  const isModalOpen = useModalState(getIsModalOpen(ADD_CELL_DROPDOWN_MODAL_ID));
  const [referenceElement, setReferenceElement] = useState(null);
  const { t } = useContext(RicosContext);
  return /* @__PURE__ */ React.createElement(
    DropdownButton,
    {
      dataHook: DATA_HOOKS.CELL_ADD_DROPDOWN_BUTTON,
      disabled: !toolbarItem.attributes.canAddCell,
      active: isModalOpen,
      onClick: () => {
        toolbarItem.commands?.click({ referenceElement });
      },
      icon: Add,
      ref: setReferenceElement,
      tooltip: t("SmartBlock_CellAddDropdown_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  createAddCellDropdownButton
};
//# sourceMappingURL=create-add-cell-dropdown-button.js.map
