import { far } from '@fortawesome/free-regular-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { SearchBehavior } from '../../interfaces/input-select-options.interface';
export class EdelInputSelectIconComponent {
    constructor() {
        this.inline = false;
        this.search = true;
        this.searchBehavior = SearchBehavior.searchWithStartsWith;
        this.value = null;
        this.autofocus = false;
        this.placeholder = '';
        this.maxCount = 8;
        this.iconNames = [];
    }
    componentDidLoad() {
        this.iconNames = this.getIconNames();
    }
    render() {
        return (h("edel-inputgroup", null,
            h("edel-inputgroup-item", { reversed: true, "first-child": true },
                h("edel-icon", { faStyle: this.getFaStyle(this.value), name: this.value })),
            h("edel-input-select", { autofocus: this.autofocus, inline: this.inline, search: this.search, searchBehavior: this.searchBehavior, placeholder: this.placeholder, maxCount: this.maxCount, options: this.iconNames, value: this.value, "last-child": true, onValueChange: $event => (this.value = $event.detail) })));
    }
    getFaStyle(iconName) {
        if (!iconName)
            return 'fas';
        if (fas[iconName])
            return 'fas';
        if (far[iconName])
            return 'far';
        return 'fas';
    }
    getIconNames() {
        const iconNames = [];
        for (const name in fas) {
            if (fas[name].iconName)
                iconNames.push(fas[name].iconName);
        }
        for (const name in far) {
            if (!fas[name]) {
                if (far[name].iconName)
                    iconNames.push(far[name].iconName);
            }
        }
        const options = iconNames.map(name => ({
            label: name,
            value: name,
            icon: name
        }));
        return options;
    }
    static get is() { return "edel-input-select-icon"; }
    static get properties() { return {
        "autofocus": {
            "type": Boolean,
            "attr": "autofocus"
        },
        "hostElement": {
            "elementRef": true
        },
        "iconNames": {
            "state": true
        },
        "inline": {
            "type": Boolean,
            "attr": "inline"
        },
        "maxCount": {
            "type": Number,
            "attr": "max-count"
        },
        "placeholder": {
            "type": String,
            "attr": "placeholder"
        },
        "search": {
            "type": Boolean,
            "attr": "search"
        },
        "searchBehavior": {
            "type": String,
            "attr": "search-behavior"
        },
        "value": {
            "type": String,
            "attr": "value",
            "mutable": true
        }
    }; }
}
