import { moduleMetadata } from '@storybook/angular';
import { DeviceDetailsComponent } from '../../../common/device-details/device-details.component';
import { DeviceIconComponent } from '../../../common/device-icon/device-icon.component';
import { HopSequenceDeviceComponent } from './hop-sequence-device.component';


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

const Template = (args: HopSequenceDeviceComponent) => ({
    component: HopSequenceDeviceComponent,
    props: args,
});

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


export const Primary = Template.bind({});
Primary.args = {
    leftDevice: {
        "Number": "3",
        "IpAddress": "192.168.90.1",
        "Delay": "20",
        "Name": "Cool Device Name",
        "Ext": "version 2"
    },
    rightDevice: {
        "Number": "3",
        "IpAddress": "192.168.90.1",
        "Delay": "20",
        "Name": "Cool Device Name",
        "Ext": "version 2"
    }
}

export const OnlyOneDevice = Template.bind({});
OnlyOneDevice.args = {
    leftDevice: {
        "Number": "3",
        "IpAddress": "192.168.90.1",
        "Delay": "20",
        "Name": "Cool Device Name",
        "Ext": "version 2",
        "Type": "phone"
    }
}

export const LongDeviceName = Template.bind({});
LongDeviceName.args = {
    leftDevice: {
        "Number": "3",
        "IpAddress": "192.168.90.1",
        "Delay": "20",
        "Name": "Cool Device Name This will cause some problems",
        "Ext": "version 2",
        "Type": "phone"
    }
}