import { r as registerInstance, c as createEvent, h, g as getElement } from './core-095fd691.js';
import { N as NativeEvent } from './native-event-23d5d7d1.js';

const BceOptionCreator = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.value = [];
        this.allowImage = true;
        this.allowColor = false;
        this.allowOther = false;
        this.other = false;
        this.labelOCAddButton = 'Add';
        this.labelOCRemoveButton = 'Delete';
        this.labelOCOther = 'Other';
        this.labelOCImage = 'Image';
        this.handleInput = (event, index) => {
            event.cancelBubble = true;
            const input = event.target;
            if (!input)
                return;
            // Update value
            const copy = [...this.value];
            const update = Object.assign({}, this.value[index], { text: input.value });
            copy.splice(index, 1, update);
            this.value = copy;
            this.el.dispatchEvent(new NativeEvent('input'));
        };
        this.handleKeyDown = async (event) => {
            if (event.code === 'Enter')
                this.handleAdd();
        };
        this.handleAdd = (focus = true) => {
            const insert = { text: '' };
            this.value = this.other
                ? [...this.value.slice(0, -1), insert, ...this.value.slice(-1)]
                : [...this.value, insert];
            if (focus)
                this.focusLast(true);
        };
        this.handleOther = () => {
            this.other = !this.other;
            this.value = this.other
                ? [...this.value, { text: this.labelOCOther }]
                : this.value.slice(0, -1);
            this.onOther.emit(this.other);
        };
        this.handleRemove = (index) => {
            const copy = [...this.value];
            copy.splice(index, 1);
            this.value = copy;
            this.el.dispatchEvent(new NativeEvent('input'));
        };
        this.handleColor = (index) => { };
        this.handleImage = (index) => {
            const current = this.value[index];
            if ('image' in current && current.image)
                this.deleteImage(current, index);
            else
                this.uploadImage(index);
        };
        this.onOther = createEvent(this, "other", 7);
        this.onFile = createEvent(this, "file", 7);
        this.onFileDelete = createEvent(this, "file-delete", 7);
    }
    watchValue(value) {
        if (!value.length)
            this.handleAdd(false);
    }
    async focusLast(nextTick = false) {
        if (nextTick)
            await new Promise(res => setTimeout(res, 100));
        // Find last input element
        const options = this.el.querySelectorAll('[data-option]');
        const option = options[options.length - (this.other ? 2 : 1)];
        const input = option && option.querySelector('bce-input input');
        // Set focus to new element
        if (input)
            input.focus();
    }
    async uploadImage(index) {
        const root = this.el.closest('bce-root');
        const input = document.createElement('bce-upload-input');
        // Trigger upload button
        const file = await root.execute(input, res => {
            input.addEventListener('file', e => {
                e.cancelBubble = true;
                res(e.detail);
            });
            input.upload();
        });
        // Emit file
        this.onFile.emit(file);
        // Update value
        const copy = [...this.value];
        copy.splice(index, 1, Object.assign({}, this.value[index], { image: file.path }));
        // Emit value
        this.value = copy;
        this.el.dispatchEvent(new NativeEvent('input'));
    }
    deleteImage(option, index) {
        if (!('image' in option) || !option.image)
            return;
        // Emit file delete
        const match = option.image.match(/BCE:\/\/([^/]+)\//);
        if (match)
            this.onFileDelete.emit({ id: match[1], path: option.image });
        // Update value
        const copy = [...this.value];
        const value = Object.assign({}, this.value[index]);
        if ('image' in value)
            delete value.image;
        copy.splice(index, 1, value);
        // Emit value
        this.value = copy;
        this.el.dispatchEvent(new NativeEvent('input'));
    }
    componentDidLoad() {
        this.watchValue(this.value);
    }
    renderTooltip(icon, content) {
        if (!content)
            return null;
        return (h("bce-tooltip", { placement: "left", icon: icon }, content));
    }
    renderMetadata(option) {
        if (!('image' in option) || !option.image)
            return;
        return h("div", { "data-meta": true }, this.renderTooltip('fas:image', option.image));
    }
    renderOption(option, index, other = false) {
        if (!option.hasOwnProperty('text'))
            return null;
        const placeholder = this.placeholder && `${this.placeholder} ${index + 1}`;
        const icon = this.other
            ? 'fas:font'
            : Array.isArray(this.icon)
                ? this.icon[index]
                : this.icon;
        return (h("div", { key: index, "data-option": true }, h("bce-input", { value: option.text, onInput: e => this.handleInput(e, index), onKeyDown: this.handleKeyDown, placeholder: placeholder }), h("bce-icon", { raw: icon, "fixed-width": true }), this.renderMetadata(option), h("bce-dropdown-menu", null, h("slot", { name: "option" }), this.allowColor && (h("bce-button", { icon: "fas:palette", onClick: () => this.handleColor(index) }, "Color")), this.allowImage && !other && (h("bce-button", { icon: "fas:image", onClick: () => this.handleImage(index) }, 'image' in option && option.image
            ? this.labelOCRemoveButton
            : this.labelOCAddButton, "\u00A0", this.labelOCImage)), this.value.length > 1 && (h("bce-button", { icon: "fas:trash", onClick: () => this.handleRemove(index) }, this.labelOCRemoveButton)))));
    }
    render() {
        const options = this.other ? this.value.slice(0, -1) : this.value;
        const other = this.other && this.value[this.value.length - 1];
        return [
            this.label && h("label", null, this.label),
            options.map((option, i) => this.renderOption(option, i)),
            other && this.renderOption(other, this.value.length - 1, true),
            h("slot", null),
            h("div", null, h("bce-button", { type: "text", icon: "fas:plus", onClick: () => this.handleAdd() }, this.labelOCAddButton, " ", this.placeholder), this.allowOther && (h("bce-button", { type: "text", icon: "fas:font", onClick: this.handleOther }, this.other ? this.labelOCRemoveButton : this.labelOCAddButton, "\u00A0\"", this.labelOCOther, "\"")), h("slot", { name: "action" }))
        ];
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "value": ["watchValue"]
    }; }
    static get style() { return "bce-option-creator{position:relative;display:block;margin-bottom:40px}bce-option-creator bce-icon,bce-option-creator bce-input{--bce-input-height:40px;z-index:2}bce-option-creator>:last-child{position:absolute;left:16px;bottom:-32px}bce-option-creator [data-option]{position:relative}bce-option-creator [data-option]>bce-input{margin:5px 0}bce-option-creator [data-option]>bce-input input{padding:13px 38px}bce-option-creator [data-option]>bce-icon{position:absolute;top:50%;left:10px;opacity:.6;-webkit-transform:translateY(-50%);transform:translateY(-50%)}bce-option-creator [data-option]>[data-meta]{position:absolute;right:30px;z-index:3;bottom:0;padding:4px}bce-option-creator [data-option]>[data-meta] bce-icon{font-size:14px;opacity:.5}bce-option-creator [data-option]>bce-dropdown-menu{position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:3}\@media screen and (min-width:1024px){bce-option-creator [data-option]>bce-input:not([compact]) input{padding:6px 38px}}"; }
};

export { BceOptionCreator as bce_option_creator };
