'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-1ee80297.js');

const dvnRichEditorOverlayMenuCss = "dvn-rich-editor-overlay-menu{display:block;-webkit-transition:width 0.3s linear;transition:width 0.3s linear}dvn-rich-editor-overlay-menu .menu-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;outline:none}dvn-rich-editor-overlay-menu .menu-container.has-animation{-webkit-animation:rich-editor-overlay-menu-appear-animation 0.3s 0s both;animation:rich-editor-overlay-menu-appear-animation 0.3s 0s both}@-webkit-keyframes rich-editor-overlay-menu-appear-animation{0%{opacity:0;margin-top:8px}100%{opacity:1;margin-top:0}}@keyframes rich-editor-overlay-menu-appear-animation{0%{opacity:0;margin-top:8px}100%{opacity:1;margin-top:0}}";

const menuHeight = 36;
const actions = [{
    name: 'bold',
    icon: 'uil-bold',
  }, {
    name: 'italic',
    icon: 'uil-italic',
  }, {
    name: 'underline',
    icon: 'uil-underline',
  }, {
    name: 'strike',
    icon: 'uil-text-strike-through',
  }, {
    name: 'link',
    icon: 'uil-link-h',
  }];
const actionsWithRemoveLink = [{
    name: 'bold',
    icon: 'uil-bold',
  }, {
    name: 'italic',
    icon: 'uil-italic',
  }, {
    name: 'underline',
    icon: 'uil-underline',
  }, {
    name: 'strike',
    icon: 'uil-text-strike-through',
  }, {
    name: 'unlink',
    icon: 'uil-link-broken',
  }];
let DvnRichEditorOverlayMenu = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.isShowingLinkInput = false;
    this.isShown = false;
    this.urlInputValue = '';
    // used to enable/disable animation. without this, the animation also
    // starts when a text action is clicked and that causes a re-render on the parent
    this.showAnimation = false;
    this.getActions = () => actions.filter(a => !this.enabledActions || this.enabledActions.includes(a.name));
    this.getActionsWithRemoveLink = () => actionsWithRemoveLink.filter(a => a.name === 'unlink' || !this.enabledActions || this.enabledActions.includes(a.name));
    this.onActionClick = (action) => {
      if (action === 'link') {
        this.isShowingLinkInput = true;
        setTimeout(() => this.inputElement.focusOnInput(), 100);
        return;
      }
      else if (action === 'unlink') {
        this.onOverlayMenuAction(this.range, 'link', false);
        this.urlInputValue = '';
        this.isShowingLinkInput = false;
        this.shownActions = this.getActions();
        return;
      }
      this.onOverlayMenuAction(this.range, action);
    };
    this.onTextChange = (text) => {
      this.urlInputValue = text;
    };
    this.onKeyDown = (event) => {
      if (event.key === 'Enter') {
        this.onOverlayMenuAction(this.range, 'link', this.urlInputValue);
        this.isShowingLinkInput = false;
        this.hide();
      }
    };
  }
  async show(range, existingFormat) {
    if (range.length == 0) {
      // don't show it if the length is 0
      this.isShown = false;
      return;
    }
    this.shownActions = this.getActions();
    this.range = range;
    this.rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
    this.isShown = this.rect && Math.floor(this.rect.width) > 0;
    this.urlInputValue = '';
    this.isShowingLinkInput = false;
    if (existingFormat.link) {
      // show remove link button
      this.shownActions = this.getActionsWithRemoveLink();
      this.isShown = true;
      this.urlInputValue = existingFormat.link;
      this.isShowingLinkInput = true;
    }
    this.showAnimation = true;
    setTimeout(() => this.showAnimation = false, 300);
  }
  async hide() {
    if (this.isShowingLinkInput)
      return;
    this.rect = undefined;
    this.range = undefined;
    this.isShown = false;
  }
  render() {
    const { isShowingLinkInput, isShown, rect, shownActions } = this;
    if (!isShown) {
      return index.h(index.Host, null);
    }
    const parentRect = this.el.parentElement.getBoundingClientRect();
    const style = {
      top: `${(rect.top - parentRect.top - menuHeight)}px`,
      left: `${(rect.left - parentRect.left)}px`,
      height: `${menuHeight}px`,
      width: `${rect.width}px`,
    };
    return (index.h(index.Host, null, index.h("div", { class: {
        'menu-container': true,
        'has-animation': this.showAnimation,
      }, style: style }, index.h("dvn-input-group", { leaned: true }, shownActions.map(action => (index.h("dvn-button", { onClick: () => this.onActionClick(action.name), scale: "small", tint: "primary", view: "ghost" }, index.h("dvn-icon", { iconName: action.icon })))), isShowingLinkInput &&
      index.h("dvn-input", { ref: (el) => this.inputElement = el, scale: "small", onChange: (e) => this.onTextChange(e.detail), onKeyDown: this.onKeyDown, value: this.urlInputValue, width: "200px" })))));
  }
  get el() { return index.getElement(this); }
};
DvnRichEditorOverlayMenu.style = dvnRichEditorOverlayMenuCss;

exports.dvn_rich_editor_overlay_menu = DvnRichEditorOverlayMenu;
