import { moduleMetadata } from '@storybook/angular';
import { ActionsDropdownComponent } from './actions-dropdown.component';
import {MatMenuModule} from '@angular/material/menu';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


export default {
    title: 'Common/Actions Dropdown',
    component: ActionsDropdownComponent,
    decorators: [
        moduleMetadata({
            declarations: [
                ActionsDropdownComponent
            ], imports: [
                MatMenuModule,
                BrowserAnimationsModule
            ]
        }),
    ]
};

const Template = (args: ActionsDropdownComponent) => ({
    component: ActionsDropdownComponent,
    props: args,
    template: `
        <onguard-actions-dropdown>
            <button mat-menu-item >Option 1</button>
            <button mat-menu-item >Option 2</button>
        </onguard-actions-dropdown>
    `
});

export const Primary = Template.bind({});
Primary.args = {
};
Primary.storyName = 'Primary';

const RightTemplate = (args: ActionsDropdownComponent) => ({
    component: ActionsDropdownComponent,
    props: args,
    template: `
        <div style="width: 100%; display: flex; justify-content: flex-end">
        <onguard-actions-dropdown [entries]="entries"></onguard-actions-dropdown>
        </div>
    `
});
export const RightAligned = RightTemplate.bind({});
RightAligned.args = {
    entries: new Map([['Export CSV', 'csv'],
        ['Export Visio', 'visio'],
        ['Export Raw JSON', 'json'],
    ]),
};


const CenterTemplate = (args: ActionsDropdownComponent) => ({
    component: ActionsDropdownComponent,
    props: args,
    template: `
        <div style="width: 100%; display: flex; justify-content: center">
            <onguard-actions-dropdown [entries]="entries" [xPosition]="xPosition"></onguard-actions-dropdown>
        </div>
    `
});
export const CenterAlignedWithXPositionBeforeSpecified = CenterTemplate.bind({});
CenterAlignedWithXPositionBeforeSpecified.args = {
    xPosition: 'before',
    entries: new Map([['Export CSV', 'csv'],
        ['Export Visio', 'visio'],
        ['Export Raw JSON', 'json'],
    ]),
};

export const CenterAlignedWithXPositionAfterSpecified = CenterTemplate.bind({});
CenterAlignedWithXPositionAfterSpecified.args = {
    xPosition: 'after',
    entries: new Map([['Export CSV', 'csv'],
        ['Export Visio', 'visio'],
        ['Export Raw JSON', 'json'],
    ]),
};