import { moduleMetadata } from '@storybook/angular';
import { MultiSelectComponent } from './multi-select.component';
import { MultiSelectModule } from './multi-select.module';

export default {
    title: 'Input/Multi Select',
    component: MultiSelectComponent,
    decorators: [
        moduleMetadata({
            imports: [MultiSelectModule],
        }),
    ],
    args: {
        placeholder: 'select...           ',
        label: null,
        bindLabel: 'name',
        options: [
            {
                name: 'option 1',
                data: 4,
            },
            {
                name: 'option 2',
                data: 43,
            },
            {
                name: 'option 3',
                data: 2,
            },
            {
                name: 'option 4',
                data: 49,
            },
        ],
        selected: [],
    },
};

const Template = (args: MultiSelectComponent<any>) => ({
    component: MultiSelectComponent,
    props: args,
    template: `
    <onguard-multi-select 
        [(selected)]="selected"
        [placeholder]="placeholder"
        [options]="options"
        [styleType]="styleType"
        [bindLabel]="bindLabel"
        [label]="label"
        [multiple]="multiple"
        [clearable]="clearable"
    ></onguard-multi-select>
    <p>{{selected}}</p>
    <button (click)="selected = options[0]">External Selection</button>
    `,
});

//   _____ _             _
//  / ____| |           (_)
// | (___ | |_ ___  _ __ _  ___  ___
//  \___ \| __/ _ \| '__| |/ _ \/ __|
//  ____) | || (_) | |  | |  __/\__ \
// |_____/ \__\___/|_|  |_|\___||___/

export const Primary = Template.bind({});
Primary.args = {
    label: 'Primary',
};

export const WithSelection = Template.bind({});
WithSelection.args = {
    selected: [
        {
            name: 'option 4',
            data: 49,
        },
    ],
};

export const SingleSelect = Template.bind({});
SingleSelect.args = {
    label: 'Single',
    multiple: false,
    clearable: false,
};

export const Alternate = Template.bind({});
Alternate.args = {
    label: 'Alternate',
    styleType: 'alternate',
    multiple: false,
    clearable: false,
};