import { Meta, Story } from '@storybook/angular/types-6-0';
import { actions } from '@storybook/addon-actions';
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 { SidebarComponent } from './sidebar.component';
import { SidebarDropdownItemComponent } from './sidebar-dropdown-item/sidebar-dropdown-item.component';
import { RotateAnimatedModule } from '../../../directives/rotate-animated/rotate-animated.module';
import { CollapseAnimatedModule } from '../../../directives/collapse-animated/collapse-animated.module';
import { IcomoonIconModule } from '../../common/icomoon-icon/icomoon-icon.module';

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

export const Basic = () => ({
    component: SidebarComponent,
    args: {},
    template: `
    <onguard-sidebar
        [title]="title"
        [help]="help"
    >
        <onguard-sidebar-dropdown-item
            [action]="actionLaunchpad"
            label="LaunchPad"
            icon="assets/images/launchpad_inactive.svg"
        >
        </onguard-sidebar-dropdown-item>
        <onguard-sidebar-dropdown-item
            [action]="actionLogout"
            label="Log Out"
            icon="icon-key"
        >
        </onguard-sidebar-dropdown-item>
    </onguard-sidebar>
    `,
    props: {
        // TODO: figure out the new storybook action format
        // https://storybook.js.org/docs/react/essentials/actions
        actionLaunchpad: () => console.log('go to launchpad'),
        actionLogout: () => console.log('log out'),
        help: {
            topics: [
                {
                    url: '/reports/overall-call-quality',
                    title: 'Page Help Header',
                    content: [
                        {
                            title: 'Page Sub-Header',
                            body: ['Paragraph 1', 'Paragraph 2'],
                        },
                        {
                            title: 'What does the coloring mean?',
                            body: ['The color is an indicator of the numeric MOS Score.'],
                        },
                    ],
                },
                {
                    url: '/reports/overall-call-quality',
                    title: 'Page Help Header # 2',
                    content: [
                        {
                            title: 'Page Sub-Header',
                            body: ['Paragraph 1', 'Paragraph 2'],
                        },
                        {
                            title: 'What does the coloring mean?',
                            body: ['The color is an indicator of the numeric MOS Score.'],
                        },
                    ],
                },
                {
                    url: '/reports/overall-call-quality',
                    title: 'Page Help Header # 3',
                    content: [
                        {
                            title: 'Page Sub-Header',
                            body: ['Paragraph 1', 'Paragraph 2'],
                        },
                        {
                            title: 'What does the coloring mean?',
                            body: ['The color is an indicator of the numeric MOS Score.'],
                        },
                    ],
                },
            ],
        },
    },
});