import { Meta, Story } from '@storybook/angular/types-6-0';
import { moduleMetadata } from '@storybook/angular';
import { RouterModule } from '@angular/router';
import { InlineSVGModule } from 'ng-inline-svg';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { LayoutComponent } from './layout.component';
import { NavigationItemComponent } from './navigation/navigation-item/navigation-item.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SidebarDropdownItemComponent } from './sidebar/sidebar-dropdown-item/sidebar-dropdown-item.component';

import { Basic as BasicHeader} from './header/header.stories';
import { Basic as BasicNavigation } from './navigation/navigation.stories';
import { Basic as BasicSidebar } from './sidebar/sidebar.stories';
import { CollapseAnimatedModule } from '../../directives/collapse-animated/collapse-animated.module';
import { RotateAnimatedModule } from '../../directives/rotate-animated/rotate-animated.module';
import { LayoutModule } from './layout.module';




export default {
    title: 'Layout/Layout',
    component: LayoutComponent,
    decorators: [
        moduleMetadata({
            declarations: [
                // LayoutComponent,
                // NavigationComponent,
                // NavigationItemComponent,
                // HeaderComponent,
                // SidebarComponent,
                // SidebarDropdownItemComponent,
            ],
            imports: [
                RouterModule.forRoot([], { useHash: true }),
                BrowserAnimationsModule,
                InlineSVGModule.forRoot({ baseUrl: '/' }),
                HttpClientModule,
                CollapseAnimatedModule,
                RotateAnimatedModule,
                LayoutModule
            ],
            providers: [
                { provide: APP_BASE_HREF, useValue: '/' }
            ]
        }),
    ],
} as Meta;



export const Basic = () => ({
    component: NavigationComponent,
    template: `
    <onguard-layout>
        ${BasicSidebar().template}
        ${BasicNavigation().template}
        ${BasicHeader().template}
    <onguard-layout>
    `,
    props: {
        ...BasicSidebar().props,
        ...BasicNavigation().props,
        ...BasicHeader().props
    }
});