'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7a477838.js');

const formCategoryFilterCss = ".sc-digi-form-category-filter-h{--digi--form-category-filter--gap:var(--digi--padding--small)}.sc-digi-form-category-filter-h .digi-form-category-filter.sc-digi-form-category-filter{display:flex;flex-wrap:wrap;gap:var(--digi--form-category-filter--gap)}.sc-digi-form-category-filter-h .digi-form-category-filter--category.sc-digi-form-category-filter{--digi--button--icon--spacing:0px}.sc-digi-form-category-filter-h .digi-form-category-filter--category--not-selected.sc-digi-form-category-filter{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--quaternary);--digi--button--color--text--primary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--quaternary)}.sc-digi-form-category-filter-h .digi-form-category-filter--category--thin-text.sc-digi-form-category-filter{font-weight:400}";
const DigiFormCategoryFilterStyle0 = formCategoryFilterCss;

const FormCategoryFilter = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.afOnSelectedCategoryChange = index.createEvent(this, "afOnSelectedCategoryChange", 7);
        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 (index.h(index.Host, { key: 'd12f4ac366631a31dd0578b1241510210c1a2eec' }, index.h("div", { key: 'b24c2101967cdf45646831bbc81121be8050557b', class: {
                'digi-form-category-filter': true
            } }, this.displayCategories().map((category) => (index.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' && (index.h("span", null, category.name, ' ', index.h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
            this.afCategories.length > this.afVisibleCollapsed && (index.h("div", { key: '2ab08f68cc055f2e5dfc6d507079654c8ae59af4' }, index.h("digi-button", { key: '0286e062fa8df32f71e9149a35e3af51a8f35f7d', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                this.toggleCollapsed();
            } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (index.h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (index.h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
    }
    get hostElement() { return index.getElement(this); }
    static get watchers() { return {
        "afCategories": ["afCategoriesChangeHandler"]
    }; }
};
FormCategoryFilter.style = DigiFormCategoryFilterStyle0;

exports.digi_form_category_filter = FormCategoryFilter;
