import { h } from "@stencil/core";
export class DgaFilterationUsage {
    constructor() {
        this.filterBlocks = [
            {
                id: 'status',
                label: 'Status',
                type: 'checkbox',
                options: [
                    { id: 'active', label: 'Active', value: 'active', count: 22 },
                    { id: 'inactive', label: 'Inactive', value: 'inactive', count: 22 },
                    { id: 'pending', label: 'Pending', value: 'pending', count: 22 },
                    { id: 'archived', label: 'Archived', value: 'archived', count: 22 },
                    { id: 'draft', label: 'Draft', value: 'draft', count: 22 },
                    { id: 'published', label: 'Published', value: 'published', count: 22 },
                    { id: 'unpublished', label: 'Unpublished', value: 'unpublished', count: 22 },
                    { id: 'deleted', label: 'Deleted', value: 'deleted', count: 22 },
                    { id: 'restored', label: 'Restored', value: 'restored', count: 22 },
                ],
            },
            {
                id: 'select',
                label: 'Variant',
                type: 'select',
                options: [
                    { id: 'option1', label: 'Option 1', value: 'option1' },
                    { id: 'option2', label: 'Option 2', value: 'option2' },
                    { id: 'option3', label: 'Option 3', value: 'option3' },
                    { id: 'option4', label: 'Option 4', value: 'option4' },
                ],
            },
            {
                id: 'userType',
                label: 'User Type',
                type: 'radio',
                options: [
                    { id: 'admin', label: 'Administrator', value: 'admin' },
                    { id: 'editor', label: 'Editor', value: 'editor' },
                    { id: 'viewer', label: 'Viewer', value: 'viewer' },
                    { id: 'contributor', label: 'Contributor', value: 'contributor' },
                ],
            },
            {
                id: 'categories',
                label: 'Categories',
                type: 'chips',
                options: [
                    { id: 'tech', label: 'Technology', value: 'tech' },
                    { id: 'design', label: 'Design', value: 'design' },
                    { id: 'marketing', label: 'Marketing', value: 'marketing' },
                    { id: 'sales', label: 'Sales', value: 'sales' },
                    { id: 'support', label: 'Support', value: 'support' },
                    { id: 'hr', label: 'HR', value: 'hr' },
                    { id: 'finance', label: 'Finance', value: 'finance' },
                ],
            },
            {
                id: 'rating',
                label: 'Rating',
                type: 'slider',
                min: 20,
                max: 70,
            },
            {
                id: 'price',
                label: 'Price Range',
                type: 'range',
            },
            {
                id: 'dateCreated',
                label: 'Created Date',
                type: 'date',
            },
        ];
        this.handleFilterChange = (event) => {
            const selectedFilters = event.detail;
            console.log('Applied Filters:', selectedFilters);
            selectedFilters.forEach(filter => {
                console.log('Filter:', filter);
            });
        };
        this.initialValue = {
            checkbox: {
                blockId: "status",
                options: [{
                        id: 'active', label: 'Active', value: 'active'
                    }]
            },
            chips: {
                blockId: "categories",
                options: [{ id: 'tech', label: 'Technology', value: 'tech' }, { id: 'design', label: 'Design', value: 'design' },]
            },
            // date:{
            //   blockId:"dateCreated",
            //   options:[{
            //     id: 'active', label: 'Active', value: 'active'
            //   }]
            // },
            radio: {
                blockId: "userType",
                options: [{ id: 'admin', label: 'Administrator', value: 'admin' }]
            },
            range: {
                blockId: "price",
                options: { min: 10, max: 20 }
            },
            select: {
                blockId: "select",
                options: [{ id: 'option1', label: 'Option 1', value: 'option1' }]
            },
            slider: {
                blockId: "rating",
                options: { min: 30, max: 50 }
            },
        };
    }
    render() {
        return (h("div", { key: '227fa817a4bd303ece02efccef17407ddd0caa15', class: "filteration-usage" }, h("h2", { key: '53341de64acc673159a8f4b560a9bbeb58c26c01' }, "Filteration Component Examples"), h("div", { key: '46a51291254ddfdcc21589bb9eb6d256827bd731', class: "filteration-container", style: { margin: '20px 0' } }, h("h3", { key: 'af9086a5a48aabf00bb210c0a9d2bc3563e2b05c' }, "Default Filteration"), h("dga-filteration", { key: 'f0c8563d2a700cbff5c385c3b6921104319d6cc8', buttonLabel: "Filter Items", filterBlocks: this.filterBlocks, onOnFilterChange: this.handleFilterChange, initvalue: this.initialValue }))));
    }
    static get is() { return "dga-filteration-usage"; }
    static get states() {
        return {
            "filterBlocks": {},
            "initialValue": {}
        };
    }
}
//# sourceMappingURL=dga-filteration-usage.js.map
