import { Component, Element, h, Host, Method, Prop, State } from '@stencil/core';
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',
  }];
export class DvnRichEditorOverlayMenu {
  constructor() {
    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 h(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 (h(Host, null,
      h("div", { class: {
          'menu-container': true,
          'has-animation': this.showAnimation,
        }, style: style },
        h("dvn-input-group", { leaned: true },
          shownActions.map(action => (h("dvn-button", { onClick: () => this.onActionClick(action.name), scale: "small", tint: "primary", view: "ghost" },
            h("dvn-icon", { iconName: action.icon })))),
          isShowingLinkInput &&
            h("dvn-input", { ref: (el) => this.inputElement = el, scale: "small", onChange: (e) => this.onTextChange(e.detail), onKeyDown: this.onKeyDown, value: this.urlInputValue, width: "200px" })))));
  }
  static get is() { return "dvn-rich-editor-overlay-menu"; }
  static get originalStyleUrls() { return {
    "$": ["./dvn-rich-editor-overlay-menu.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-rich-editor-overlay-menu.css"]
  }; }
  static get properties() { return {
    "enabledActions": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "OverlayMenuActionName[]",
        "resolved": "OverlayMenuActionName[]",
        "references": {
          "OverlayMenuActionName": {
            "location": "import",
            "path": "@dvn/alaca/components/dvn-rich-editor/constants"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "onOverlayMenuAction": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "(range: any, action: OverlayMenuActionName, value?: any) => void",
        "resolved": "(range: any, action: OverlayMenuActionName, value?: any) => void",
        "references": {
          "OverlayMenuActionName": {
            "location": "import",
            "path": "@dvn/alaca/components/dvn-rich-editor/constants"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "rect": {},
    "range": {},
    "isShowingLinkInput": {},
    "isShown": {},
    "urlInputValue": {},
    "shownActions": {}
  }; }
  static get methods() { return {
    "show": {
      "complexType": {
        "signature": "(range: QuillRange, existingFormat: any) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }, {
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "QuillRange": {
            "location": "import",
            "path": "@dvn/alaca/components/dvn-rich-editor/constants"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    },
    "hide": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
