import { moduleMetadata } from '@storybook/angular';
import { RegionResults } from '@creedinteractive/onguard-models';
import { NetworkGraphComponent } from './network-graph.component';
import { NetworkModule } from './network-graph.module';
import jsonData from './Avaya_CM_Site_Survey.json';
import { NetworkGraph, NetworkGraphOptions } from './network-graph.model';


export default {
    title: 'Visualizations/Network',
    component: NetworkGraphComponent,
    decorators: [
        moduleMetadata({
            imports: [NetworkModule],
        }),
    ],
};

const Template = (args: NetworkGraphComponent) => ({
    component: NetworkGraphComponent,
    template: `
    <onguard-network-graph
        [networkGraphModel]="networkGraphModel"
    ></onguard-network-graph>`,
    props: args,
});

const regions = jsonData.hits.hits[0]._source.Data.Regions;
const codecSets = jsonData.hits.hits[0]._source.Data.CodecSets;
const regionResults = {
    regions: regions?.map((x) => ({
        Number: x.Number,
        Name: x.Name,
        ToRegion: x.ToRegion,
    })),
    codecSets: codecSets,
};

const { nodes, links } = RegionResults.fromRaw(regionResults);
const networkGraphOptions: NetworkGraphOptions = {
    width: 800,
    height: 600,
    forces: { link: 0.5, collision: 0.5, charge: -30 },
    title: 'InterveningSampleData',
};
const networkGraphModel = new NetworkGraph(nodes, links, networkGraphOptions);

export const SampleData = Template.bind({});
SampleData.args = {
    networkGraphModel: networkGraphModel
};

// const checkExists = (links: Link[], testLink: Link): boolean => {
//     const filtered = links.filter((l) => {
//         if (
//             (l.source === testLink.source && l.target === testLink.target) ||
//             (l.target === testLink.source && l.source === testLink.target)
//         ) {
//             return true;
//         }
//         return false;
//     });

//     return filtered?.length > 0;
// };
// const sampleInterveningLinks: Link[] = [];
// const sampleInterveningNodes: Node[] = [];
// for (const region of regions) {
//     if (!region.Number) {
//         continue;
//     }
//     sampleInterveningNodes.push(
//         new Node(region.Number, region.Name, 'G.711MU,G.729,G.729,G.729,G.729,G.729'),
//     );
// }

// for (const region of regions) {
//     if (region.ToRegion) {
//         const toRegion = region.ToRegion;
//         if (!sampleNodes.filter((n) => n.id === toRegion.Number)) {
//             console.log('MISSING', toRegion.Number);
//             const linkedNode = new Node(
//                 toRegion.Number,
//                 'Unknown Name',
//                 'G.711MU,G.729,G.729,G.729,G.729,G.729',
//             );
//             sampleNodes.push(linkedNode);
//         }
//         let currentIntervening = region.Number;
//         if (toRegion.Intervening1) {
//             const testLink = new Link(currentIntervening, toRegion.Intervening1);
//             if (!checkExists(sampleInterveningLinks, testLink)) {
//                 sampleInterveningLinks.push(testLink);

//                 const modNodes = sampleInterveningNodes.filter(
//                     (n) => n.id === currentIntervening || n.id === toRegion.Intervening1,
//                 );
//                 modNodes.forEach((node) => node.linkCount++);
//             }
//             currentIntervening = toRegion.Intervening1;
//         }
//         if (toRegion.Intervening2) {
//             const testLink = new Link(currentIntervening, toRegion.Intervening2);
//             if (!checkExists(sampleInterveningLinks, testLink)) {
//                 sampleInterveningLinks.push(testLink);

//                 const modNodes = sampleInterveningNodes.filter(
//                     (n) => n.id === currentIntervening || n.id === toRegion.Intervening2,
//                 );
//                 modNodes.forEach((node) => node.linkCount++);
//             }

//             currentIntervening = toRegion.Intervening2;
//         }
//         if (toRegion.Intervening3) {
//             const testLink = new Link(currentIntervening, toRegion.Intervening3);

//             if (!checkExists(sampleInterveningLinks, testLink)) {
//                 sampleInterveningLinks.push(testLink);

//                 const modNodes = sampleInterveningNodes.filter(
//                     (n) => n.id === currentIntervening || n.id === toRegion.Intervening3,
//                 );
//                 modNodes.forEach((node) => node.linkCount++);
//             }

//             currentIntervening = toRegion.Intervening3;
//         }

//         const testLink = new Link(currentIntervening, toRegion.Number);

//         if (!checkExists(sampleInterveningLinks, testLink)) {
//             sampleInterveningLinks.push(testLink);

//             const modifiedNodes = sampleInterveningNodes.filter(
//                 (n) => n.id === region.Number || n.id === toRegion.Number,
//             );
//             modifiedNodes.forEach((node) => node.linkCount++);
//         }
//     }
// }

// export const InterveningSampleData = Template.bind({});
// InterveningSampleData.args = {
//     links: sampleInterveningLinks,
//     nodes: sampleInterveningNodes,
//     chargeForce: -20,
//     collisionForce: 1,
//     linkForce: 0.75,
//     bounded: false,
//     title: 'InterveningSampleData',
// };

// Exporting to Visio format
// https://stackoverflow.com/questions/51211586/how-to-create-a-svg-file-that-is-editable-in-visio