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


export default {
    title: 'Input/From To Select',
    component: FromToComponent,
    decorators: [
        moduleMetadata({
            imports: [
                FromToModule
            ]
        }),
    ],
    args: {
        siteOptions: [
            {
                name: 'Site 1',
                facility: 'f1'
            },
            {
                name: 'Site 2',
                facility: 'f2'
            },
            {
                name: 'Site 3',
                facility: 'f3'
            },
            {
                name: 'Site 4',
                facility: 'f4'
            }
        ]
    }
};


// @Input() siteOptions: T[];
//   @Input() siteBindLabel = 'name';

//   @Input() typeOptions = [
//     'FROM AND TO'
//   ];
//   @Input() selectedTypeOption = 'FROM AND TO';

//   @Input() selectedFrom: T;
//   @Input() selectedTo: T;

const Template = (args: FromToComponent<any>) => ({
    component: FromToComponent,
    props: args,
    template: `
    <onguard-from-to
      [siteOptions]='siteOptions'
      [siteBindLabel]='siteBindLabel'
      [(selectedFrom)]='selectedFrom'
      [(selectedTo)]='selectedTo'
      (typeChage)="log($event)"
    ></onguard-from-to>
    <p>Selected From {{selectedFrom}}</p>
    <p>Selected To {{selectedTo}}</p>
    <button (click)="selectedFrom = siteOptions[0]; selectedTo = siteOptions[1]">External Selection</button>
    `
});

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


export const Primary = Template.bind({});
Primary.args = {
    label: 'Primary',
    selectedFrom: [],
    selectedTo: [],
    siteBindLabel: 'name'
}


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

export const WithSelection = Template.bind({});
WithSelection.args = {
    ...Primary.args,
    selectedFrom: 
        {
            name: 'Site 4',
            facility: 'f4'
        }
    
}