import { number } from '@storybook/addon-knobs';

export const withNgContent = (): any => ({
    template: `
        <blui-app-bar
         [expandedHeight]="expandedHeight"
         [collapsedHeight]="collapsedHeight"
         [scrollThreshold]="scrollThreshold"
         [scrollContainerId]="scrollContainerId"
         (collapsedChange)="isCollapsed = $event"
         variant="snap">
             <blui-three-liner [style.top.px]="isCollapsed ? 0 : expandedYOffset">
                <blui-channel-value style="color: white" blui-title value="Temperature"></blui-channel-value>
                <div blui-subtitle>Subtitle</div>
                 <div blui-info class="info"
                    [matMenuTriggerFor]="dropdownToolbarMenu"
                    #menuTrigger="matMenuTrigger"
                    style="display: flex; align-items: center; cursor: pointer;"
                >
                    <span>Menu</span>
                    <mat-icon style="font-size: inherit; width: 16px; height: 16px;">arrow_drop_down</mat-icon>
                </div>
            </blui-three-liner>
        </blui-app-bar>

        <mat-menu #dropdownToolbarMenu="matMenu" [overlapTrigger]="false">
            <button mat-menu-item>Item 1</button>
            <button mat-menu-item>Item 2</button>
            <button mat-menu-item>Item 3</button>
        </mat-menu>
    `,
    props: {
        collapsedHeight: number('collapsedHeight', 64),
        expandedHeight: number('expandedHeight', 200),
        scrollThreshold: number('scrollThreshold', 100),
        isCollapsed: undefined,
        expandedYOffset: number('Expanded Y Offset', 80),
    },
});