import { moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';

// Components
import { TableComponent } from './table.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AuditRowModule } from '../../app-specific/audit/audit-row/audit-row.module';
import { CallQualityRowModule } from '../../app-specific/iq/call-quality-row/call-quality-row.module';
import { DrawerContainerModule } from '../../structure/drawer-container/drawer-container.module';
import { TableModule } from './table.module';
import { ColumnOptions, Table } from './table-settings.model';
import { Paging } from '@creedinteractive/onguard-models';


export default {
    title: 'Visualizations/Table',
    component: TableComponent,
    decorators: [
        moduleMetadata({
            // imports multiple components to allow component composition with storybook
            imports: [
                AuditRowModule,
                DrawerContainerModule,
                CallQualityRowModule,
                TableModule,
                BrowserAnimationsModule,
                // CollapseAnimatedModule,
                // RotateAnimatedModule
            ]
        }),
    ],
};

export const Basic = () => ({
    component: TableComponent,
    template: `
    <onguard-table
        [model]="table"
        [loading]="loading"
    >
        <ng-template let-rowContext #tableRow>
            <div>
                <span> {{rowContext.data.drillName}} |</span>
                <span> {{rowContext.data.start}} |</span>
                <span> {{rowContext.data.answeringLine}} </span>
            </div>
        </ng-template>
    </onguard-table>
    `,
    props: {
        table: new Table(checkdrillData, 'Basic', {
            drillName: new ColumnOptions({
                order: 0,
                width: 2,
                displayName: 'Test'
              }),
              start: new ColumnOptions({
                order: 1,
                width: 2,
                displayName: 'Date/Time',
              }),
              answeringLine: new ColumnOptions({
                order: 2,
                width: 2,
                displayName: 'Answering Line'
              })
        }),
        loading: false,
        sortChange: action('sortChange')
    },
});

export const Audit = () => ({
    component: TableComponent,
    template: `
    <onguard-table
        [model]="table"
        [loading]="loading"
    >
        <ng-template let-rowContext #tableRow>
            <onguard-drawer-container
                id="1"
                [containerData]="rowContext.data"
            >
                <ng-template let-context #container>
                <onguard-audit-row [data]="context.data"></onguard-audit-row>
                </ng-template>

                <ng-template let-context #drawer>
                    TODO: Add Drawer Content
                </ng-template>
            </onguard-drawer-container>
        </ng-template>
    </onguard-table>
    `,
    props: {
        table: new Table(checkdrillData, 'Audit', {
            drillName: new ColumnOptions({
                order: 0,
                width: 5,
                displayName: 'Test Name'
              }),
              start: new ColumnOptions({
                order: 1,
                width: 2,
                displayName: 'Date/Time',
              }),
              result: new ColumnOptions({
                order: 2,
                width: 2,
                displayName: 'Result'
              }),
              relatedTicket: new ColumnOptions({
                order: 3,
                width: 3,
                displayName: 'Related Incident'
              })
        }),
        loading: false,
        sortChange: action('sortChange')
    },
});

export const AvayaCallQuality = () => ({
    template: `
    <onguard-table
        [model]="table"
        [filterFunction]="filter"
        [loading]="loading"
    >
        <ng-template let-rowContext #tableRow>
            <onguard-call-quality-row [callData]='rowContext.data'></onguard-call-quality-row>
        </ng-template>
    </onguard-table>
    `,
    props: {
        table: new Table(
            callQualityData,
            null,
            {
                mosScore: new ColumnOptions({
                    order: 0,
                    width: 2,
                    displayName: 'MOS'
                }),
                startTimestamp: new ColumnOptions({
                    order: 1,
                    width: 2,
                    displayName: 'Started',
                }),
                originDevice: new ColumnOptions({
                    order: 2,
                    width: 3,
                    displayName: 'Origin'
                }),
                destinationDevice: new ColumnOptions({
                    order: 3,
                    width: 3,
                    displayName: 'Destination'
                })
            },
            new Paging(4)
        ),
        filter: (): boolean => {
            let start = Date.now();
            let now = Date.now();
            while (now - start < 50) {
                now = Date.now();
            }
            return true;
        },
        loading: false,
        sortChange: action('sortChange')
    },
});


export const AvayaCallQualityFiltered = () => ({
    template: `
    <onguard-table
        [model]="table"
        [loading]="loading"
        [filterFunction]="filter"
    >
        <ng-template let-rowContext #tableRow>
            <onguard-call-quality-row [callData]='rowContext.data'></onguard-call-quality-row>
        </ng-template>
    </onguard-table>
    `,
    props: {
        table: new Table(
            callQualityData, 
            null, 
            {
                mosScore: new ColumnOptions({
                    order: 0,
                    width: 2,
                    displayName: 'MOS'
                }),
                startTimestamp: new ColumnOptions({
                    order: 1,
                    width: 2,
                    displayName: 'Started',
                }),
                originDevice: new ColumnOptions({
                    order: 2,
                    width: 3,
                    displayName: 'Origin'
                }),
                destinationDevice: new ColumnOptions({
                    order: 3,
                    width: 3,
                    displayName: 'Destination'
                })
            },
            new Paging(4)
        ),
        filter: (item) => item.mosScore > 4,
        loading: false,
        sortChange: action('sortChange')
    },
});


const checkdrillData = [
    {
        answeringLine: 8087311180,
        audioLink: 'https://monitorcontrol.net/ListencenterRequest.aspx?guid=7EE2410D-C064-45D6-B400-F483056DCDD9',
        dialOutLine: 8087311180,
        drillName: 'ConvergeOneConcentrix',
        duration: 90.74,
        relatedTicket: null,
        result: 'OK',
        source: 'og-data',
        start: '2020-05-18T03:09:04.800-06:00',
        mos: null
    },
    {
        answeringLine: 8087311180,
        audioLink: 'https://monitorcontrol.net/ListencenterRequest.aspx?guid=7EE2410D-C064-45D6-B400-F483056DCDD9',
        dialOutLine: 8087311180,
        drillName: 'ConvergeOneConcentrix',
        duration: 0.0,
        relatedTicket: null,
        result: 'B42',
        source: 'og-data',
        start: '2020-05-18T03:09:04.800-06:00',
        mos: null
    },
    {
        answeringLine: 8087311180,
        audioLink: 'https://monitorcontrol.net/ListencenterRequest.aspx?guid=7EE2410D-C064-45D6-B400-F483056DCDD9',
        dialOutLine: 8087311180,
        drillName: 'ConvergeOneConcentrix',
        duration: 90.74,
        relatedTicket: null,
        result: 'OK',
        source: 'og-data',
        start: '2020-05-18T03:09:04.800-06:00',
        mos: null
    }
];

const callQualityData = [
    {
        mosScore: 4.33,
        startTimestamp: '2020-05-19T00:09:03.527-06:00',
        duration: 1345,
        originDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Origin Device Name",
            "Ext": "version 2"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.18,
        startTimestamp: '2020-01-01T00:09:03.527-06:00',
        duration: 155,
        originDevice: {
            "IpAddress": "194.14.33.2",
            "Name": "Origin Device Name"
        },
        destinationDevice: {
            "IpAddress": "192.23.44.5"
        }
    },
    {
        mosScore: 0.4,
        startTimestamp: '2020-08-22T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 3.5,
        startTimestamp: '2020-12-05T00:09:03.527-06:00',
        duration: 155,
        originDevice: {
            "IpAddress": "194.14.33.2",
            "Name": "Origin Device Name"
        },
        destinationDevice: {
            "IpAddress": "192.23.44.5"
        }
    },
    {
        mosScore: 5.0,
        startTimestamp: '2020-04-15T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 1.9,
        startTimestamp: '2020-06-19T00:09:03.527-06:00',
        duration: 155,
        originDevice: {
            "IpAddress": "194.14.33.2",
            "Name": "Origin Device Name"
        },
        destinationDevice: {
            "IpAddress": "192.23.44.5"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    },
    {
        mosScore: 2.5,
        startTimestamp: '2020-09-19T00:09:03.527-06:00',
        duration: 555,
        originDevice: {
            "IpAddress": "192.56.46.12",
            "Name": "Terrible Device",
            "Ext": "Hardly works"
        },
        destinationDevice: {
            "IpAddress": "192.168.90.1",
            "Name": "Destination Device Name",
            "Ext": "Grogu"
        }
    }
];