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 { HeaderComponent } from './header.component';
import { CollapseAnimatedDirective } from '../../../directives/collapse-animated/collapse-animated.directive';

export default {
    title: 'Layout/Header',
    component: HeaderComponent,
    decorators: [
        moduleMetadata({
            declarations: [
                HeaderComponent,
                CollapseAnimatedDirective
            ],
            imports: [
                RouterModule.forRoot([], { useHash: true }),
                BrowserAnimationsModule,
                InlineSVGModule.forRoot({ baseUrl: '/' }),
                HttpClientModule
            ],
            providers: [
                { provide: APP_BASE_HREF, useValue: '/' }
            ]
        }),
    ],
} as Meta;


// const Template: Story<HeaderComponent> = (args: HeaderComponent) => ({
//     component: HeaderComponent,
//     props: args
// });


// export const Basic = Template.bind({});


export const Basic = () => ({
    component: HeaderComponent,
    template: `
    <onguard-header
        [title]="title"
    >
        <div class='filters'>
            <div class="item filter company-filter-dropdown">
            <span class="filter-label">Company:</span>
            </div>
        </div>
    </onguard-header>
    `,
    props: {
        // mobileLogo: 'assets/logos/logo-mobile.png',
        title: 'Audit'
    }
});