import { moduleMetadata } from '@storybook/angular';
import { DrawerContainerComponent } from './drawer-container.component';
import { CollapseAnimatedDirective } from '../../../directives/collapse-animated/collapse-animated.directive';
import { RotateAnimatedDirective } from '../../../directives/rotate-animated/rotate-animated.directive';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AuditRowComponent } from '../../app-specific/audit/audit-row/audit-row.component';
import { TimePipe } from '../../../pipes/date-time/time.pipe';
import { DatePipe } from '../../../pipes/date-time/date.pipe';
import { InlineSVGModule } from 'ng-inline-svg';
import { Basic as BasicAuditRow } from '../../app-specific/audit/audit-row/audit-row.stories';
import { CollapseAnimatedModule } from '../../../directives/collapse-animated/collapse-animated.module';
import { RotateAnimatedModule } from '../../../directives/rotate-animated/rotate-animated.module';
import { AuditRowModule } from '../../app-specific/audit/audit-row/audit-row.module';
import { DateTimeModule } from '../../../pipes/date-time/date-time.module';
import { DrawerContainerModule } from './drawer-container.module';


export default {
    title: 'Structure/Drawer Container',
    component: DrawerContainerComponent,
    decorators: [
        moduleMetadata({
            imports: [
                DrawerContainerModule,
                AuditRowModule,
            ]
        })
    ]
};

export const Basic = () => ({
    component: DrawerContainerComponent,
    template: `
    <onguard-drawer-container
        id="0"
        [containerData]="data"
    >
        <ng-template let-context #container>
            <h2>
                container
            </h2>
            <div>
                <p>Dynamic Content</p>
                <p>The value of context.a is: {{context.data.a}}</p>
                <p>The value of context.b is: {{context.data.b}}</p>
            </div>
        </ng-template>

        <ng-template let-context #drawer>
            <p>
                Drawer
            </p>
            <div>
                <p>Dynamic Content</p>
                <p>The value of context.data.a is: {{context.data.a}}</p>
                <p>The value of context.data.b is: {{context.data.b}}</p>
            </div>
        </ng-template>
    </onguard-drawer-container>
    `,
    props: {
        data: {
            a: 'value of a',
            b: 'value of b'
        }
    },
});

export const Audit = () => ({
    component: DrawerContainerComponent,
    template: `
    <onguard-drawer-container
        id="1"
        [containerData]="data"
    >
        <ng-template let-context #container>
           <onguard-audit-row [data]="context.data"></onguard-audit-row>
        </ng-template>

        <ng-template let-context #drawer>
            TODO: Add Drawer Content
        </ng-template>
    </onguard-drawer-container>
    `,
    props: {
        ...BasicAuditRow().props
    }
});