'use strict';

var index = require('./index-BjHIBY-I.js');
var translations = require('./translations-Bu_0fli7.js');
var keycodes = require('./keycodes-B75-uKOK.js');

const editorLinkMenuCss = () => `:host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}`;

const TextEditorLinkMenu = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.cancel = index.createEvent(this, "cancel");
        this.save = index.createEvent(this, "save");
        this.linkChange = index.createEvent(this, "linkChange");
        /**
         * Defines the language for translations.
         */
        this.language = 'en';
        /**
         * Open state of the link-menu dialog
         */
        this.isOpen = false;
        this.getTranslation = (key) => {
            return translations.translate.get(key, this.language);
        };
        this.isValid = (href) => {
            try {
                new URL(href);
            }
            catch (_a) {
                return false;
            }
            return true;
        };
        this.handleKeyDown = (event) => {
            var _a;
            if (event.key !== keycodes.ENTER) {
                return;
            }
            if (this.saveButton) {
                this.saveButton.focus();
            }
            event.preventDefault();
            if (this.isValid((_a = this.link) === null || _a === void 0 ? void 0 : _a.href)) {
                this.handleSave(event);
            }
        };
        this.handleCancel = (event) => {
            if (event instanceof KeyboardEvent && event.key !== keycodes.ESCAPE) {
                return;
            }
            event.stopPropagation();
            event.preventDefault();
            this.cancel.emit();
        };
        this.handleSave = (event) => {
            event.stopPropagation();
            this.save.emit();
        };
        this.handleLinkInputAction = (event) => {
            window.open(this.link.href, '_blank');
            event.stopPropagation();
        };
        this.handleLinkTitleChange = (event) => {
            var _a;
            this.emitLinkChange(event.detail, (_a = this.link) === null || _a === void 0 ? void 0 : _a.href);
        };
        this.handleLinkValueChange = (event) => {
            var _a;
            const href = event.detail;
            this.emitLinkChange((_a = this.link) === null || _a === void 0 ? void 0 : _a.text, href);
        };
        this.emitLinkChange = (text, href) => {
            const newLink = {
                text: text,
                href: href,
            };
            this.linkChange.emit(newLink);
        };
    }
    connectedCallback() {
        this.setupGlobalHandlers();
    }
    disconnectedCallback() {
        this.teardownGlobalHandlers();
    }
    setupGlobalHandlers() {
        if (this.isOpen) {
            document.addEventListener('keyup', this.handleCancel);
        }
    }
    teardownGlobalHandlers() {
        document.removeEventListener('keyup', this.handleCancel);
    }
    componentDidLoad() {
        this.focusOnTextInput();
    }
    focusOnTextInput() {
        if (this.textInput) {
            const inputField = this.textInput.shadowRoot.querySelector('input');
            if (inputField) {
                requestAnimationFrame(() => {
                    inputField.focus();
                });
            }
        }
    }
    render() {
        var _a, _b;
        const isValid = this.isValid(this.link.href);
        return [
            index.h("limel-input-field", { key: '453392d104185e6ad22ee90e204960da0c0f1def', label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
            index.h("limel-input-field", { key: '78c1dcc14cde3e8e6a053560e92fa9828b55d266', label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
            index.h("div", { key: '2d77225e278410cb4af77b35ba756f0805f30b8c', class: "actions" }, index.h("limel-button", { key: 'bf2ad2a86c6231517e18f50a65a41785f5d0c38b', label: this.getTranslation('cancel'), onClick: this.handleCancel }), index.h("limel-button", { key: 'b86cddda73e5027fb88c0cb36ed784341b1081a7', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
        ];
    }
};
TextEditorLinkMenu.style = editorLinkMenuCss();

exports.limel_text_editor_link_menu = TextEditorLinkMenu;
