import { Host, h } from "@stencil/core";
export class DgaFilteration {
    constructor() {
        this.buttonLabel = 'Filter';
        this.filterBlocks = [];
        this.maxBlockHeight = 200;
        this.isFilterPanelOpen = false;
        this.selectedFilters = [];
        this.expandedBlocks = new Set();
        this.tempFilters = [];
        this.sliderValues = {};
        this.rangeValues = {};
        this.dateValues = {};
        this.chipsValues = {};
        this.searchQuery = '';
        this.handleInitValue = () => {
            this.selectedFilters = [
                'checkbox' in this.initvalue
                    ? {
                        blockId: this.initvalue.checkbox.blockId,
                        items: this.initvalue.checkbox.options,
                    }
                    : undefined,
                'select' in this.initvalue
                    ? {
                        blockId: this.initvalue.select.blockId,
                        items: this.initvalue.select.options,
                    }
                    : undefined,
                'radio' in this.initvalue
                    ? {
                        blockId: this.initvalue.radio.blockId,
                        items: this.initvalue.radio.options,
                    }
                    : undefined,
                'slider' in this.initvalue
                    ? {
                        blockId: this.initvalue.slider.blockId,
                        items: [
                            {
                                id: this.initvalue.slider.blockId,
                                label: `${this.initvalue.slider.options.min} - ${this.initvalue.slider.options.max}`,
                                value: {
                                    min: this.initvalue.slider.options.min,
                                    max: this.initvalue.slider.options.max,
                                },
                            },
                        ],
                    }
                    : undefined,
                'range' in this.initvalue
                    ? {
                        blockId: this.initvalue.range.blockId,
                        items: [
                            {
                                id: this.initvalue.range.blockId,
                                label: `${this.initvalue.range.options.min} - ${this.initvalue.range.options.max}`,
                                value: {
                                    min: this.initvalue.range.options.min,
                                    max: this.initvalue.range.options.max,
                                },
                            },
                        ],
                    }
                    : undefined,
                'chips' in this.initvalue
                    ? {
                        blockId: this.initvalue.chips.blockId,
                        items: this.initvalue.chips.options,
                    }
                    : undefined,
            ];
            if ('slider' in this.initvalue) {
                this.sliderValues = Object.assign(Object.assign({}, this.sliderValues), { [this.initvalue.slider.blockId]: {
                        min: this.initvalue.slider.options.min,
                        max: this.initvalue.slider.options.max,
                    } });
            }
            if ('range' in this.initvalue) {
                this.rangeValues = Object.assign(Object.assign({}, this.rangeValues), { [this.initvalue.range.blockId]: {
                        min: this.initvalue.range.options.min.toString(),
                        max: this.initvalue.range.options.max.toString(),
                    } });
            }
            if ('checkbox' in this.initvalue || 'radio' in this.initvalue) {
                this.tempFilters = [
                    ...this.tempFilters,
                    {
                        blockId: this.initvalue.checkbox.blockId,
                        items: this.initvalue.checkbox.options,
                    },
                ];
            }
            if ('radio' in this.initvalue) {
                this.tempFilters = [
                    ...this.tempFilters,
                    {
                        blockId: this.initvalue.radio.blockId,
                        items: this.initvalue.radio.options,
                    },
                ];
            }
            if ('select' in this.initvalue) {
                this.tempFilters = [
                    ...this.tempFilters,
                    {
                        blockId: this.initvalue.select.blockId,
                        items: this.initvalue.select.options,
                    },
                ];
            }
            if ('chips' in this.initvalue) {
                this.chipsValues = Object.assign(Object.assign({}, this.chipsValues), { [this.initvalue.chips.blockId]: this.initvalue.chips.options });
            }
        };
        this.toggleFilterPanel = () => {
            this.isFilterPanelOpen = !this.isFilterPanelOpen;
            if (!this.isFilterPanelOpen) {
                this.tempFilters = [...this.selectedFilters];
            }
        };
        this.toggleBlockExpansion = (blockId) => {
            const newExpandedBlocks = new Set(this.expandedBlocks);
            if (newExpandedBlocks.has(blockId)) {
                newExpandedBlocks.delete(blockId);
            }
            else {
                newExpandedBlocks.add(blockId);
            }
            this.expandedBlocks = newExpandedBlocks;
        };
        this.handleFilterSelection = (blockId, item, checked) => {
            const blockIndex = this.tempFilters.findIndex(f => f.blockId === blockId);
            if (blockIndex === -1) {
                if (checked) {
                    this.tempFilters = [...this.tempFilters, { blockId, items: [item] }];
                }
            }
            else {
                const block = this.tempFilters[blockIndex];
                if (checked) {
                    block.items = [...block.items, item];
                }
                else {
                    block.items = block.items.filter(i => i.id !== item.id);
                }
                this.tempFilters = [...this.tempFilters];
            }
        };
        this.handleSliderChange = (blockId, min, max) => {
            this.sliderValues = Object.assign(Object.assign({}, this.sliderValues), { [blockId]: { min, max } });
        };
        this.handleRangeChange = (blockId, min, max) => {
            this.rangeValues = Object.assign(Object.assign({}, this.rangeValues), { [blockId]: { min, max } });
        };
        this.handleDateChange = (blockId, start, end) => {
            this.dateValues = Object.assign(Object.assign({}, this.dateValues), { [blockId]: { start, end } });
        };
        this.handleChipsSelection = (blockId, item, selected) => {
            const currentChips = this.chipsValues[blockId] || [];
            let updatedChips;
            if (selected) {
                updatedChips = [...currentChips, item];
            }
            else {
                updatedChips = currentChips.filter(chip => chip.id !== item.id);
            }
            this.chipsValues = Object.assign(Object.assign({}, this.chipsValues), { [blockId]: updatedChips });
        };
        this.applyFilters = () => {
            const appliedFilters = [];
            // Combine all filter types
            this.tempFilters.forEach(filter => appliedFilters.push(filter));
            // Add slider filters
            Object.entries(this.sliderValues).forEach(([blockId, { min, max }]) => {
                appliedFilters.push({
                    blockId,
                    items: [{ id: 'slider', label: `${min} - ${max}`, value: { min, max } }],
                });
            });
            // Add range filters
            Object.entries(this.rangeValues).forEach(([blockId, { min, max }]) => {
                if (min !== null || max !== null) {
                    appliedFilters.push({
                        blockId,
                        items: [{ id: 'range', label: `${min || 'Min'} - ${max || 'Max'}`, value: { min, max } }],
                    });
                }
            });
            // Add date filters
            Object.entries(this.dateValues).forEach(([blockId, { start, end }]) => {
                if (start || end) {
                    appliedFilters.push({
                        blockId,
                        items: [
                            {
                                id: 'date',
                                label: `${(start === null || start === void 0 ? void 0 : start.toLocaleDateString()) || 'Start'} - ${(end === null || end === void 0 ? void 0 : end.toLocaleDateString()) || 'End'}`,
                                value: { start, end },
                            },
                        ],
                    });
                }
            });
            // Add chips filters
            Object.entries(this.chipsValues).forEach(([blockId, chips]) => {
                if (chips.length > 0) {
                    appliedFilters.push({
                        blockId,
                        items: chips,
                    });
                }
            });
            this.selectedFilters = appliedFilters;
            this.onFilterChange.emit(this.selectedFilters);
            this.isFilterPanelOpen = false;
        };
        this.clearFilters = () => {
            this.selectedFilters = [];
            this.onFilterChange.emit(this.selectedFilters);
            this.isFilterPanelOpen = false;
            this.tempFilters = [];
            this.sliderValues = {};
            this.rangeValues = {};
            this.dateValues = {};
            this.chipsValues = {};
            this.expandedBlocks = new Set();
            this.searchQuery = '';
        };
        this.removeFilter = (blockId, itemId) => {
            // Remove from selected filters
            this.selectedFilters = this.selectedFilters
                .map(block => {
                if (block.blockId === blockId) {
                    return Object.assign(Object.assign({}, block), { items: block.items.filter(item => item.id !== itemId) });
                }
                return block;
            })
                .filter(block => block.items.length > 0);
            // Clear specific filter type state
            if (blockId in this.sliderValues)
                delete this.sliderValues[blockId];
            if (blockId in this.rangeValues)
                delete this.rangeValues[blockId];
            if (blockId in this.dateValues)
                delete this.dateValues[blockId];
            if (this.tempFilters
                .map(i => {
                return i.blockId;
            })
                .includes(blockId)) {
                this.tempFilters = this.tempFilters
                    .map(item => {
                    var _a;
                    if (blockId === item.blockId) {
                        return Object.assign(Object.assign({}, item), { items: (_a = item === null || item === void 0 ? void 0 : item.items) === null || _a === void 0 ? void 0 : _a.filter(i => i.id !== itemId) });
                    }
                    return item;
                })
                    .filter(i => i.items.length);
            }
            if (blockId in this.chipsValues) {
                this.chipsValues[blockId] = this.chipsValues[blockId].filter(item => item.id !== itemId);
            }
            this.onFilterChange.emit(this.selectedFilters);
        };
    }
    componentWillLoad() {
        this.handleInitValue();
    }
    watchInitValue() {
        this.handleInitValue();
    }
    render() {
        return (h(Host, { key: '53b41e9c002d4468fe080081bbc60490e998055a', class: "filteration" }, h("dga-button", { key: 'f7f636bc5d72d0748bf0a5aec0d5e3245ad2fe81', label: this.buttonLabel, leadIcon: true, leadIconProps: {
                color: 'white',
                size: 24,
                type: 'stroke',
                variant: 'sharp',
            }, leadIconType: "FilterIcon", onClick: this.toggleFilterPanel, size: "lg", trailIcon: true, trailIconProps: {
                color: 'white',
                size: 24,
                type: 'stroke',
                variant: 'sharp',
            }, trailIconType: "ArrowDown01Icon", variant: "primary-neutral" }), h("div", { key: 'b7beb3e52e70ec8e2998855c3516722df6fbcfd8', class: "filteration__selected-filters" }, this.selectedFilters.map(block => block.items.map(filter => (h("dga-button", { key: `${block.blockId}-${filter.id}`, label: filter.label, onClick: () => this.removeFilter(block.blockId, filter.id), size: "lg", trailIcon: true, trailIconProps: {
                color: 'white',
                size: 24,
                type: 'stroke',
                variant: 'sharp',
            }, trailIconType: "MultiplicationSignIcon", variant: "primary-brand" }))))), this.isFilterPanelOpen && (h("div", { key: '743c3e40f9c603aeab6a084ae3db6dd6702152e5', class: { 'filteration__panel': true, 'filteration__panel--open': this.selectedFilters.length === 0 } }, this.filterBlocks.map(block => (h("div", { class: "filteration__block", key: block.id }, h("h3", { class: "filteration__block-title" }, block.label), h("div", { class: {
                'filteration__block-content': true,
                'filteration__block-content--checkbox': block.type === 'checkbox',
                'filteration__block-content--radio': block.type === 'radio',
                'filteration__block-content--slider': block.type === 'slider',
                'filteration__block-content--range': block.type === 'range',
                'filteration__block-content--date': block.type === 'date',
                'filteration__block-content--chips': block.type === 'chips',
                'filteration__block-content--select': block.type === 'select',
                'filteration__block-content--collapsed': block.type === 'checkbox' && this.expandedBlocks.has(block.id),
            } }, this.renderFilterBlock(block)), h("div", { class: "filteration__block-actions" }, block.type === 'checkbox' && block.options.length > 5 && !this.searchQuery && (h("dga-button", { label: this.expandedBlocks.has(block.id) ? 'Show less' : `Show ${block.options.length - 3} more`, onClick: () => this.toggleBlockExpansion(block.id), size: "md", variant: "transparent", leadIcon: true, trailIcon: true, trailIconType: this.expandedBlocks.has(block.id) ? 'ArrowUp01Icon' : 'ArrowDown01Icon', trailIconProps: { size: 16, color: 'black', variant: 'stroke', type: 'standard' } }))), h("div", { class: "filteration__divider" })))), h("div", { key: '31b88b6a63fa959c60440ab60c76c9bf3ac1c8fe', class: "filteration__actions" }, h("dga-button", { key: 'd8d17dcc02f526cd923b70f392fc9f2ced10e99b', label: "Apply filters", onClick: this.applyFilters, variant: "primary-neutral", size: "lg" }), h("dga-button", { key: '6cb2a98c2d0e40b6b3e4c856ba5d650aff9369d3', label: "Clear filters", onClick: this.clearFilters, variant: "secondary-outline", size: "lg" }))))));
    }
    renderFilterBlock(block) {
        var _a, _b, _c, _d, _e, _f, _g;
        switch (block.type) {
            case 'checkbox':
                const options = this.expandedBlocks.has(block.id) ? block.options : block.options.slice(0, 3);
                // Filter options based on the search query
                const filteredOptions = options.filter(option => option.label.toLowerCase().includes(this.searchQuery.toLowerCase()));
                return (h("div", null, h("div", { class: "filteration__search" }, h("dga-text-input", { icon: { name: 'Search01Icon', type: 'sharp', variant: 'stroke' }, size: "md", placeholder: "Search", value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) })), filteredOptions === null || filteredOptions === void 0 ? void 0 :
                    filteredOptions.map(option => {
                        var _a, _b, _c;
                        const isChecked = (_c = (_b = (_a = this.tempFilters) === null || _a === void 0 ? void 0 : _a.find(f => f.blockId === block.id)) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.some(i => (i === null || i === void 0 ? void 0 : i.id) == option.id);
                        return (h("div", { key: option.id, class: "checkbox_check_box_container" }, h("dga-checkbox", { key: option.id, color: "neutral", label: option.label, checked: isChecked, onChange: e => this.handleFilterSelection(block.id, option, e.target.checked) }), option.count && h("span", null, "(", option.count, ")")));
                    })));
            case 'radio':
                return (_a = block.options) === null || _a === void 0 ? void 0 : _a.map(option => {
                    var _a;
                    return (h("dga-radio-button", { key: option.id, label: option.label, name: block.id, value: option.value, onChange: e => {
                            if (e.target.checked) {
                                this.tempFilters = this.tempFilters.filter(f => f.blockId !== block.id);
                                this.handleFilterSelection(block.id, option, true);
                            }
                        }, checked: (_a = this.tempFilters.find(i => i.blockId == block.id)) === null || _a === void 0 ? void 0 : _a.items.some(value => value.value === option.value) }));
                });
            case 'chips':
                return (_b = block.options) === null || _b === void 0 ? void 0 : _b.map(option => {
                    var _a, _b;
                    return (h("dga-chip", { key: option.id, label: option.label,
                        // selected={this.chipsValues[ .id]?.some(chip => chip.id === option.id) || false}
                        // onSelect={() => this.handleChipsSelection(block.id, option, true)}
                        // onDeselect={() => this.handleChipsSelection(block.id, option, false)}
                        onChange: isSelected => {
                            if (isSelected) {
                                this.handleChipsSelection(block.id, option, true);
                            }
                            else {
                                this.handleChipsSelection(block.id, option, false);
                            }
                        }, isSelected: ((_a = this.chipsValues[block.id]) === null || _a === void 0 ? void 0 : _a.some(chip => chip.id === option.id)) || false, leadIcon: true, trailIcon: ((_b = this.chipsValues[block.id]) === null || _b === void 0 ? void 0 : _b.some(chip => chip.id === option.id)) || false ? 'MultiplicationSignIcon' : 'PlusSignIcon', trailIconProps: { size: 16, color: 'black', variant: 'stroke', type: 'standard' } }));
                });
            case 'slider':
                return (h("dga-slider", { min: block.min || 0, max: block.max || 100, step: block.step || 1,
                    // value={this.sliderValues[block.id]?.min || block.min || 0}
                    // endValue={this.sliderValues[block.id]?.max || block.max || 100}
                    onChange: props => {
                        const { min, max } = props;
                        this.handleSliderChange(block.id, min, max);
                    }, initialMin: ((_c = this.sliderValues[block.id]) === null || _c === void 0 ? void 0 : _c.min) || block.min || 0, initialMax: ((_d = this.sliderValues[block.id]) === null || _d === void 0 ? void 0 : _d.max) || block.max || 100 }));
            case 'range':
                return (h("div", { class: "filteration__range" }, h("dga-text-input", { type: "number", size: "md", placeholder: "Min", value: ((_e = this.rangeValues[block.id]) === null || _e === void 0 ? void 0 : _e.min) || null, onChange: e => {
                        var _a;
                        const min = e.target.value ? e.target.value : null;
                        this.handleRangeChange(block.id, min, ((_a = this.rangeValues[block.id]) === null || _a === void 0 ? void 0 : _a.max.toString()) || null);
                    } }), h("i", { class: 'hgi-duotone hgi-solid-line-01', style: { fontSize: '20px' } }), h("dga-text-input", { type: "number", size: "md", placeholder: "Max", value: ((_f = this.rangeValues[block.id]) === null || _f === void 0 ? void 0 : _f.max) || null, onChange: e => {
                        var _a;
                        const max = e.target.value ? e.target.value : null;
                        this.handleRangeChange(block.id, ((_a = this.rangeValues[block.id]) === null || _a === void 0 ? void 0 : _a.min.toString()) || null, max);
                    } })));
            case 'date':
                return (h("div", { class: "filteration__search" }, h("dga-text-input", { size: "md", placeholder: "DD/MM/YY", onChange: e => this.handleDateChange(block.id, e.detail.start, e.detail.end) })));
            // <dga-datepicker inputField={true} onChange={e => this.handleDateChange(block.id, e.detail.start, e.detail.end)} />;
            case 'select':
                return (_g = block.options) === null || _g === void 0 ? void 0 : _g.map(option => (h("div", { key: option.id, onClick: () => this.handleFilterSelection(block.id, option, !this.tempFilters.some(f => f.blockId === block.id && f.items.some(i => i.id === option.id))), class: 'filteration__select' }, h("div", null, option.label), h("i", { class: { 'hgi-stroke hgi-solid hgi-tick-02': this.tempFilters.some(f => f.blockId === block.id && f.items.some(i => i.id === option.id)) }, style: { fontSize: '20px' } }))));
            default:
                return null;
        }
    }
    static get is() { return "dga-filteration"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-filteration.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-filteration.css"]
        };
    }
    static get properties() {
        return {
            "initvalue": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{\n    [key in FilterBlock['type']]?: {\n      blockId: string;\n      options: Omit<FilterItem, 'count'>[] | { min: number; max: number };\n    };\n  }",
                    "resolved": "{ select?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; checkbox?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; radio?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; chips?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; slider?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; range?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; date?: { blockId: string; options: { min: number; max: number; } | Omit<FilterItem, \"count\">[]; }; }",
                    "references": {
                        "FilterBlock": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-filteration/dga-filteration.tsx",
                            "id": "src/components/dga-filteration/dga-filteration.tsx::FilterBlock"
                        },
                        "Omit": {
                            "location": "global",
                            "id": "global::Omit"
                        },
                        "FilterItem": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-filteration/dga-filteration.tsx",
                            "id": "src/components/dga-filteration/dga-filteration.tsx::FilterItem"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "buttonLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "button-label",
                "reflect": false,
                "defaultValue": "'Filter'"
            },
            "filterBlocks": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FilterBlock[]",
                    "resolved": "FilterBlock[]",
                    "references": {
                        "FilterBlock": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-filteration/dga-filteration.tsx",
                            "id": "src/components/dga-filteration/dga-filteration.tsx::FilterBlock"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "maxBlockHeight": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "max-block-height",
                "reflect": false,
                "defaultValue": "200"
            }
        };
    }
    static get states() {
        return {
            "isFilterPanelOpen": {},
            "selectedFilters": {},
            "expandedBlocks": {},
            "tempFilters": {},
            "sliderValues": {},
            "rangeValues": {},
            "dateValues": {},
            "chipsValues": {},
            "searchQuery": {}
        };
    }
    static get events() {
        return [{
                "method": "onFilterChange",
                "name": "onFilterChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ blockId: string; items: FilterItem[] }[]",
                    "resolved": "{ blockId: string; items: FilterItem[]; }[]",
                    "references": {
                        "FilterItem": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-filteration/dga-filteration.tsx",
                            "id": "src/components/dga-filteration/dga-filteration.tsx::FilterItem"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "initvalue",
                "methodName": "watchInitValue"
            }];
    }
}
//# sourceMappingURL=dga-filteration.js.map
