import { Fragment, h } from "@stencil/core";
// import { IRoute } from '../dga-drawer/dga-drawer';
const SidePanelRoutes = [
    {
        name: 'Link',
        path: '/',
        icon: {
            name: 'home-01',
            variant: 'stroke',
            size: 16,
        },
        disabled: false,
        children: [
            {
                name: 'Link',
                path: '1',
                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
                // badge: 39,
            },
            {
                name: 'Link',
                path: '2',
                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
                // badge: 21,
            },
            {
                name: 'Link',
                path: '3',
                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
                // badge: 2,
            },
            // {
            //   name: "Home 4",
            //   path: "4",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 20,
            // },
            // {
            //   name: "Home 5",
            //   path: "5",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 150,
            //   children: [
            //     {
            //       name: "Home 1",
            //       path: "1",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 39,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 4",
            //       path: "4",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 20,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 5",
            //       path: "5",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 150,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 6",
            //       path: "6",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 200,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 7",
            //       path: "7",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 24,
            //       level: 2,
            //     },
            //   ],
            // },
            // {
            //   name: "Home 6",
            //   path: "6",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 200,
            // },
            // {
            //   name: "Home 7",
            //   path: "7",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 24,
            // },
        ],
    },
    {
        name: 'Components',
        path: '/components',
        icon: {
            name: 'home-01',
            variant: 'stroke',
            size: 16,
        },
        disabled: false,
        children: [
            {
                name: 'Buttons',
                path: '/buttons',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Badges',
                path: '/badges',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Paths',
                path: '/Paths',
                children: [
                    {
                        name: 'Buttons',
                        path: '/buttons',
                        icon: {
                            name: 'home-01',
                            variant: 'stroke',
                            size: 16,
                        },
                        badge: 100,
                    },
                    {
                        name: 'Badges',
                        path: '/badges',
                        icon: {
                            name: 'home-01',
                            variant: 'stroke',
                            size: 16,
                        },
                        badge: 100,
                    },
                    {
                        name: 'Paths',
                        path: '/Paths',
                        icon: {
                            name: 'home-01',
                            variant: 'stroke',
                            size: 16,
                        },
                        badge: 100,
                    },
                ],
            },
            {
                name: 'Inputs',
                path: '/inputs',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Accordions',
                path: '/accordions',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Tabs',
                path: '/tabs',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
        ],
    },
    {
        name: 'Components 2',
        path: '/components',
        icon: {
            name: 'home-01',
            variant: 'stroke',
            size: 16,
        },
        disabled: false,
        children: [
            {
                name: 'Buttons',
                path: '/buttons',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Badges',
                path: '/badges',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Paths',
                path: '/Paths',
                children: [
                    {
                        name: 'Buttons',
                        path: '/buttons',
                        badge: 100,
                    },
                    {
                        name: 'Badges',
                        path: '/badges',
                        badge: 100,
                    },
                    {
                        name: 'Paths',
                        path: '/Paths',
                        badge: 100,
                    },
                ],
            },
            {
                name: 'Inputs',
                path: '/inputs',
                badge: 100,
            },
            {
                name: 'Accordions',
                path: '/accordions',
                badge: 100,
            },
            {
                name: 'Tabs',
                path: '/tabs',
                badge: 100,
            },
        ],
    },
];
export class DgaHeaderUsage {
    constructor() {
        this.activeLink = 'link-1';
        this.collapsed = false;
        this.open = false;
    }
    render() {
        return (h(Fragment, { key: 'ca095d248e5576a9385d64f23f3a7d021b54bc5c' }, h("dga-second-nav-header", { key: '0afa653407b278704d87d0b45404f6dd6fc848e9', hideDivider: true }, h("dga-second-nav-header-actions", { key: '5c497c60eff87cf62c69c63b85b8a636fb8e5eb1' }, h("dga-button-v2", { key: 'e567fb4e18bf8705f7477d03106a1e03e45907cf', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                name: 'mic-01',
                type: 'rounded',
                variant: 'stroke',
                color: '#FFFFFF',
            } }), h("dga-button-v2", { key: '25de5226b21320688dd53f2be35703ad7d71b568', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                name: 'zoom-in-area',
                type: 'rounded',
                variant: 'stroke',
                color: '#FFFFFF',
            } }), h("dga-button-v2", { key: '419f4dffab6fab6db8ce4a994be01d3a3ae9584b', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                name: 'zoom-out-area',
                type: 'rounded',
                variant: 'stroke',
                color: '#FFFFFF',
            } }), h("dga-button-v2", { key: '860f5d49fc593223d36977ef142fd3546ae9f306', label: "Button", variant: "transparent", size: "sm", iconOnly: true, leadIcon: true, leadIconProps: {
                name: 'view',
                type: 'rounded',
                variant: 'stroke',
                color: '#FFFFFF',
            } })), h("dga-second-nav-header-content", { key: 'cc9897a95dc8543a5ab6908958eade209011c7a1' }, h("dga-second-nav-header-item", { key: '073a82e23d1c54c32e75861875bb9b18edd3b21c', label: "Cloudy" }, h("dga-icon", { key: '06ca725d112d2b1a167e56dc97bc6ba95c4ab564', icon: "cloud", variant: "stroke", type: "rounded" })), h("dga-second-nav-header-item", { key: '59b5939f7520e0c89e13d1b7eea7d517e5ce47d3', label: "21 Jan 2024" }, h("dga-icon", { key: 'ee424bc538bfb6da7538b3e8e2d0c9420851b24e', icon: "calendar-04", variant: "stroke", type: "rounded" })))), h("dga-nav-header", { key: '39b39a9a558b93f8696c5382c9ca6317e8168c25', fullWidth: true, divider: true, sticky: true }, h("dga-nav-header-main", { key: 'fe469bc35bfae3fa15cef5a5b6f9ece742263e17', collapsed: this.collapsed, onToggleCollapsed: e => {
                this.collapsed = e.detail;
                console.log('collapsed', e.detail);
            } }, h("dga-button", { key: 'eb22c38ffb83455ba6cde70b3942cc1696f95457', iconOnly: true, leadIcon: true, leadIconType: this.collapsed ? 'cancel01' : 'menu01', leadIconProps: {
                name: this.collapsed ? 'menu01' : 'cancel01',
                size: 24,
                variant: 'stroke',
                type: 'rounded',
            }, variant: "transparent", onClick: () => (this.collapsed = !this.collapsed), class: "header-menu__btn", sx: {
                display: { xs: 'block', md: 'none' },
            } }), h("dga-nav-header-logos", { key: 'f38e72d4cae3e3b436deaa5ac8a58c27d52a99eb', logoSrc: "https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg", govSrc: "https://dga-nds-fbhtx.ondigitalocean.app/mobile-logo.svg", logoLink: "#", govLink: "#" }), h("dga-nav-header-menu", { key: '3439d83cda19a0f418ae9bbb739af93f29d26bd1' }, h("dga-nav-header-link", { key: 'a8722c299b74e2457838bd2488e73153886e5c6d', label: "Item 1", icon: "arrow-down-01", active: this.activeLink === 'link-1', subMenuBackground: "white", onClick: () => {
                this.activeLink = 'link-1';
            } }, h("dga-nav-header-sub-menu", { key: '2b787b54c0457fc3af0b8e49da6843adec25a41a', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '104c9775f19dfda988ce5d541aa4a3ea9c1d8c7b', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '5e2fae54c3dea16e5c7550b1069c04632a0ae2ba', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '759a8383b8ebe753056dfb360ff37d1cc946a0a4', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '64bc74cae9c909cb0d8e293771a0a3886be2c6d8', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '086de61786723237772cf528764bed14db5c624c', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '9f4bc3dfbdf4c0bbd48b6a393b83268e48befd5f', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '11eeb4a75cb0db93957836b984e03d5911196322', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '53b79cb22e4b1dad10652f6b156a93095bdb70d6', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'a8fe2056111b9c6003ad7649072b41672fd86a64', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '672df772a6c4153bd4896164a7a1669be3a65691', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '48cf1385a19224520a71cda151bda56167ea1d8c', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '1fef442be555b3648b2d6bf8a13f746632f74882', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))), h("dga-nav-header-link", { key: '4e36b092108d9ec3bb12b7c38b152abaea185031', label: "Item  2", icon: "arrow-down-01", active: this.activeLink === 'link-2', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
                this.activeLink = 'link-2';
            } }, h("dga-nav-header-sub-menu", { key: '890a8cf8bca52e510d8b071d24055796ee2f49b4', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '434e824f0af90a727ab63a6cd98d9ed4f1b84440', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'd5fe605c34ca64269f424f45c0a367c88e00f366', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '67108cf8b4f8345d4dd264cea8e072febcee11b2', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'de680071bbeee4625df98c6b3c1e47c18811188d', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'ce9a9e0126de448191695612d05d2dc95a27ae46', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '210190d91e41ad9c773ba45f9358b347de625aef', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))), h("dga-nav-header-link", { key: '56c9c4822b93d489c17ccf88d5175ba2cb3cde7a', label: "Item  3", icon: "arrow-down-01", active: this.activeLink === 'link-3', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
                this.activeLink = 'link-3';
            } }), h("dga-nav-header-link", { key: 'dd5d86bc25abd4510fcd52473ee704fcd2bfd4a4', label: "Item  4", icon: "arrow-down-01", active: this.activeLink === 'link-4', subMenuBackground: "white", subMenuFullWidth: true, onClick: () => {
                this.activeLink = 'link-4';
            } }, h("dga-nav-header-sub-menu", { key: '8ce63021bec5b1cb2a4bdd18ce27503f9e0a8f96', "sub-menu-full-width": true, background: 'white' }, h("dga-nav-header-sub-menu-column", { key: '3c24c825c93cda5f098a7bd346dcbf5b71511807', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '4f84e37f124880ab5b29bab803d7ba84a034e8ac', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '4a1924ae69f924fa0b1a519b3cb7c82105e887a8', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '00223959e3cf5260734bfddf8fbb06f63bdf0967', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: 'ddd75f9eeeecccd9b9bcfd279154aa9dbe873758', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: '4d69bc4f3a784f662a80c11c4fc58dadd718b877', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'b7eaac25f19055e9f4bdb0fa4f240978d28d8921', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '511f5359c473c32a0deda75ab9ed8dd3f6e83e99', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'fd91b2ffc2a08a21d695c8a5ecedf2bf8b80a889', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: 'bf2bcf942d0b47f6f8058e1c0ac4a844bcbcc1a1', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '6bbd79e150755a7bcef937c7f9d9bcff097adfe5', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'ebc0b929582fa0f1bc9ca78e5e2dae14b4e83e1f', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '64ff23eb8d7bf3f191dceb1132a4823246e28d10', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '93102b4ce9a6fda7a503271e92318574481bd0df', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'bbb149abb3283a27cf31252c231704869ce37540', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })), h("dga-nav-header-sub-menu-column", { key: '9914be35904a937c63af05ca26bf6f12ab5aba91', label: "Group Label" }, h("dga-nav-header-sub-menu-link", { key: '35ffa31addcf744556d5273e9f8acbfe8ff16028', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" }), h("dga-nav-header-sub-menu-link", { key: 'b50896ae86ab2b387a127bfa06f39ecb962623be', label: "Submenu Link", link: "#", icon: "document", helperText: "This is a description" })))))), h("dga-nav-header-actions", { key: '9cac51f0c3a9fe7a8dd8ef1c4fa4be6559e392f8' }, h("dga-header-action-btn", { key: '1d5c63b372b2f55e93201cb5bfa0ca9404bb5d71', label: "Search", icon: "search-01", subMenuBackground: "white" }, h("dga-nav-header-sub-menu", { key: '8c71a6f48f3ff2d59a77325c5441cc7caabaa1af', "sub-menu-full-width": true, background: 'white' }, h("dga-flex", { key: 'd558a7274611f3abf078a343d7eeb417f60c6e6f', spacing: 16 }, h("dga-search-box", { key: '97576b407c497ab3089a9109a19c2b625b6780f9', placeholder: "Search" }), h("dga-button", { key: 'c18d7773669261a357099bb087aeccf93513888e', label: "Search" })))), h("dga-header-action-btn", { key: '8b7c7e7e133e61e0985aa4ff6561abb708aa2ba5', label: "\u0639\u0631\u0628\u064A", icon: "translation" }), h("dga-header-action-btn", { key: 'd7e608adce4550036bc1cad5def613f82d9a897b', label: "Login", icon: "user" })), h("dga-header-mobile-actions", { key: 'c2886649e671af1d7e929b6be83b484f254668ea' }, h("dga-header-menu", { key: '432555a743bca9b76b3549d2213029ef0ec5068f', actions: [
                {
                    label: 'Search',
                    icon: 'search-01',
                    onClick: () => {
                        console.log('clicked');
                    },
                },
                {
                    label: 'عربي',
                    icon: 'translation',
                    onClick: () => {
                        console.log('clicked');
                    },
                },
                {
                    label: 'Login',
                    icon: 'user',
                    onClick: () => {
                        console.log('clicked');
                    },
                }
            ] }))), h("dga-drawer", { key: 'b95e3d853d6f749306460dbfa3a795dd53a99ee6', routes: SidePanelRoutes, open: this.collapsed, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
                '& > .sidepanel': {
                    top: '112px',
                },
            } }), h("div", { key: '0420ffdf629e128257528e9533f5c5051d047465' }, "Test")));
    }
    static get is() { return "dga-header-usage"; }
    static get states() {
        return {
            "activeLink": {},
            "collapsed": {},
            "open": {}
        };
    }
}
