import { moduleMetadata, Story } from '@storybook/angular';
import { withA11y } from '@storybook/addon-a11y';
import { SequenceDiagramComponent } from './sequence-diagram.component';
import { DeviceDetailsComponent } from '../../common/device-details/device-details.component';
import { DeviceIconComponent } from '../../common/device-icon/device-icon.component';
import { HopSequenceDeviceComponent } from './hop-sequence-device/hop-sequence-device.component';

export default {
    title: 'Visualizations/Sequence Diagram',
    component: SequenceDiagramComponent,
    decorators: [
        moduleMetadata({
            declarations: [
                SequenceDiagramComponent,
                HopSequenceDeviceComponent,
                DeviceDetailsComponent,
                DeviceIconComponent
            ]
        }),
    ]
};

const Template = (args: SequenceDiagramComponent) => ({
    component: SequenceDiagramComponent,
    props: args,
    template: `
    <onguard-sequence-diagram
        [forward]='forward'
        [reverse]='reverse'
    >
        <ng-template let-context #item>
            <onguard-hop-sequence-device [leftDevice]='context.forward' [rightDevice]='context.reverse'></onguard-hop-sequence-device>
        </ng-template>
    </onguard-sequence-diagram>
    `
});

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


export const Primary = Template.bind({});
Primary.args = {
    forward: [
        {
            "Number": "0",
            "IpAddress": "172.18.1.1",
            "Delay": "XX",
            "Type": 'phone'
        },
        {
            "Number": "1",
            "IpAddress": "172.18.1.2",
            "Delay": "0"
        },
        {
            "Number": "2",
            "IpAddress": "172.21.254.10",
            "Delay": "10"
        },
        {
            "Number": "3",
            "IpAddress": "192.168.90.1",
            "Delay": "20",
            "Name": "Cool Device Name",
            "Ext": "version 2"
        },
        {
            "Number": "4",
            "IpAddress": "172.25.212.94",
            "Delay": "30",
            "Type": 'phone'
        },
        {
            "Number": "4",
            "IpAddress": "172.25.212.92",
            "Delay": "40",
            "Type": 'phone'
        }
    ],
    reverse: [
        
        {
            "Number": "0",
            "IpAddress": "172.18.1.1",
            "Delay": "XX"
        },
        {
            "Number": "4",
            "IpAddress": "172.16.0.9",
            "Name": "Different IP",
            "Ext": "Something Crazy",
            "Delay": "50"
        },
        {
            "Number": "3",
            "IpAddress": "172.21.254.10",
            "Delay": "60"
        },
        {
            "Number": "2",
            "IpAddress": "192.168.90.1",
            "Delay": "70",
            "Name": "Cool Device Name",
            "Ext": "version 2"
        },
        {
            "Number": "1",
            "IpAddress": "172.25.212.94",
            "Delay": "80"
        },
        {
            "Number": "4",
            "IpAddress": "172.25.212.92",
            "Delay": "90"
        },
    ],
}


export const NoReverseData = Template.bind({});
NoReverseData.args = {
    forward: Primary.args.forward
}



export const InScrollContainer: Story<SequenceDiagramComponent> = (args) => ({
    props: args,
    template: `
    <div id="frame" style="height: 250px; width: 1000px; overflow: scroll">
    <onguard-sequence-diagram
        [forward]='forward'
        [reverse]='reverse'
    >
        <ng-template let-context #item>
            <onguard-hop-sequence-device [leftDevice]='context.forward' [rightDevice]='context.reverse'></onguard-hop-sequence-device>
        </ng-template>
    </onguard-sequence-diagram>
    </div>`
  });
  InScrollContainer.args = {
    ...Primary.args 
  }