import { h, Host } from "@stencil/core";
/**
 * @swedishName Kategorifilter
 */
export class FormCategoryFilter {
    constructor() {
        this.afCategories = [];
        this.afAllCategories = true;
        this.afAllCategoriesSelected = true;
        this.afAllCategoriesText = 'Alla kategorier';
        this.afVisibleCollapsed = 0;
        this.afStartCollapsed = false;
        this.afMultiselect = true;
        this.afHideToggle = false;
        this.selectedCategories = [];
        this.collapsed = false;
    }
    afCategoriesChangeHandler() {
        this.selectedCategories = this.afCategories
            .filter((category) => category.selected)
            .map((category) => category.name);
        if (this.selectedCategories.length === 0 &&
            this.afAllCategories &&
            this.afAllCategoriesSelected)
            this.selectedCategories = [this.afAllCategoriesText];
    }
    componentDidLoad() {
        this.afCategoriesChangeHandler();
        this.collapsed = this.afStartCollapsed;
    }
    displayCategories() {
        if (this.afHideToggle) {
            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
        }
        if (this.afAllCategories) {
            if (this.collapsed &&
                this.afCategories.length + 1 > this.afVisibleCollapsed)
                return [
                    { name: this.afAllCategoriesText },
                    ...this.afCategories.slice(0, this.afVisibleCollapsed - 1)
                ];
            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
        }
        if (this.collapsed && this.afCategories.length > this.afVisibleCollapsed)
            return this.afCategories.slice(0, this.afVisibleCollapsed);
        return this.afCategories;
    }
    toggleCategory(category) {
        if (!this.afMultiselect) {
            if (this.afAllCategories && category.name === this.afAllCategoriesText) {
                if (this.selectedCategories.includes(this.afAllCategoriesText)) {
                    this.selectedCategories = [];
                    this.afOnSelectedCategoryChange.emit([]);
                }
                else {
                    this.selectedCategories = [this.afAllCategoriesText];
                    this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
                }
            }
            // Not allCategories
            this.selectedCategories = [category.name];
            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
            return;
        }
        if (this.afAllCategories && category.name === this.afAllCategoriesText) {
            if (this.selectedCategories.includes(this.afAllCategoriesText)) {
                this.selectedCategories = [];
                this.afOnSelectedCategoryChange.emit([]);
            }
            else {
                this.selectedCategories = [this.afAllCategoriesText];
                this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
            }
        }
        else {
            if (this.selectedCategories.findIndex((name) => name === category.name) >= 0)
                this.selectedCategories = this.selectedCategories.filter((name) => name !== category.name);
            else if (this.afAllCategories)
                this.selectedCategories = [
                    ...this.selectedCategories.filter((name) => name !== this.afAllCategoriesText),
                    category.name
                ];
            else
                this.selectedCategories = [...this.selectedCategories, category.name];
            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
        }
    }
    toggleCollapsed() {
        this.collapsed = !this.collapsed;
    }
    toggleHidden() {
        this.afHideToggle = !this.toggleHidden;
    }
    render() {
        return (h(Host, { key: 'd12f4ac366631a31dd0578b1241510210c1a2eec' }, h("div", { key: 'b24c2101967cdf45646831bbc81121be8050557b', class: {
                'digi-form-category-filter': true
            } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                'digi-form-category-filter--category': true,
                'digi-form-category-filter--category--not-selected': !this.selectedCategories.includes(category.name)
            }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                this.toggleCategory(category);
            } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '2ab08f68cc055f2e5dfc6d507079654c8ae59af4' }, h("digi-button", { key: '0286e062fa8df32f71e9149a35e3af51a8f35f7d', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                this.toggleCollapsed();
            } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
    }
    static get is() { return "digi-form-category-filter"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-category-filter.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-category-filter.css"]
        };
    }
    static get properties() {
        return {
            "afCategories": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<FormCategory>",
                    "resolved": "FormCategory[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "FormCategory": {
                            "location": "import",
                            "path": "./form-category-filter.interfaces",
                            "id": "src/components/_form/form-category-filter/form-category-filter.interfaces.ts::FormCategory"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "A list of categories"
                        }],
                    "text": "En lista av kategorier"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "afAllCategories": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If the list should start with a 'All categories' category"
                        }],
                    "text": "Ifall listan ska b\u00F6rja med en 'Alla kategorier' kategori"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-all-categories",
                "reflect": false,
                "defaultValue": "true"
            },
            "afAllCategoriesSelected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If the 'All categories' category should start selected"
                        }],
                    "text": "Ifall 'Alla kategorier' kategorin ska b\u00F6rja vald"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-all-categories-selected",
                "reflect": false,
                "defaultValue": "true"
            },
            "afAllCategoriesText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The name of the 'All categories' category"
                        }],
                    "text": "Namnet p\u00E5 'Alla kategorier' kategorin"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-all-categories-text",
                "reflect": false,
                "defaultValue": "'Alla kategorier'"
            },
            "afVisibleCollapsed": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Number of visible categories when the list is collapsed (the 'Show more/less'-button is not shown if there are fewer selectable categories than this number)"
                        }],
                    "text": "Antal synliga kategorier n\u00E4r listan \u00E4r kollapsad (ifall det finns f\u00E4rre valbara kategorier \u00E4n detta v\u00E4rde s\u00E5 syns inte 'Visa fler/f\u00E4rre'-knappen)"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-visible-collapsed",
                "reflect": false,
                "defaultValue": "0"
            },
            "afStartCollapsed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If the list should start out collapsed"
                        }],
                    "text": "Ifall listan ska var kollapsad fr\u00E5n b\u00F6rjan"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-start-collapsed",
                "reflect": false,
                "defaultValue": "false"
            },
            "afMultiselect": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set if filtering should use multiselect."
                        }],
                    "text": "V\u00E4lj om man ska kunna filtrera p\u00E5 flera kategorier \u00E5t g\u00E5ngen."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-multiselect",
                "reflect": false,
                "defaultValue": "true"
            },
            "afHideToggle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Show all categories and hide button to \"visa fler\"/\"visa f\u00E4rre\""
                        }],
                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att \"visa fler/visa f\u00E4rre"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-hide-toggle",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "selectedCategories": {},
            "collapsed": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnSelectedCategoryChange",
                "name": "afOnSelectedCategoryChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When selected categories is changed"
                        }],
                    "text": "Sker vid \u00E4ndrade valda kategorier"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afCategories",
                "methodName": "afCategoriesChangeHandler"
            }];
    }
}
