import { html } from "lit-html";
import { NamedNode, DataFactory } from "n3";
const { literal, quad, namedNode } = DataFactory;
import * as sgmod from "streamed-graph";
import { Literal, Term, N3Store } from "n3";

interface DevGroup {
  connectedToAp: NamedNode;
  wifiBand: NamedNode;
  devs: Array<Dev>;
}
interface Dev {
  agoMin: number;
  ipAddress: Literal;
  dhcpHostname: string;
  macAddress: Literal;
  packetsPerSec: number;
  bytesPerSec: number;
}

console.log("got", sgmod);

const NS: any = {
  room: "http://projects.bigasterisk.com/room/",
};

// from rdf-uri.html
const BigastUri = {
  // not well defined for uri prefixes that are string prefixes of each other
  compactUri: function(uri: string) {
    if (uri === undefined) {
      return uri;
    }
    if (typeof uri == "object") {
      throw new Error("type");
    }
    if (uri == "http://www.w3.org/1999/02/22-rdf-syntax-ns#type") {
      return "a";
    }
    for (var short of Object.keys(NS as any)) {
      var prefix = NS[short];
      if (uri.indexOf(prefix) == 0) {
        return short + ":" + uri.substr(prefix.length);
      }
    }
    return uri;
  },
  expandUri: function(s: string) {
    for (var short of Object.keys(NS)) {
      var prefix = NS[short];
      if (s.indexOf(short + ":") == 0) {
        return prefix + s.substr(short.length + 1);
      }
    }
    return s;
  },
};

// workaround for uris that don't have good labels in the graph
function labelFromUri(
  uri: NamedNode,
  prefix: string,
  tailsToLabels: any,
  defaultLabel: string
) {
  let label = defaultLabel === undefined ? uri.value : defaultLabel;
  Object.entries(tailsToLabels).forEach(([tail, useLabel]) => {
    if (uri.equals(namedNode(prefix + tail))) {
      label = useLabel as string;
    }
  });
  return label;
}

// set out[suffix] = graph.get(subj, predPrefix+suffix) for all suffixes
function getProperties(
  store: N3Store,
  out: any,
  subject: Term,
  predPrefix: string,
  predSuffixes: Array<string>
) {
  predSuffixes.forEach(term => {
    store.forEach(
      q => {
        out[term] = q.object;
      },
      subject,
      namedNode(predPrefix + term),
      null,
      null
    );

    return out;
  });
}

function graphView(store: N3Store, showGroups: boolean): void {
  const grouped: Map<string, DevGroup> = new Map();
  store.forEach(
    q => {
      const row: any = { uri: q.subject };

      getProperties(store, row, row.uri, "room:", [
        "dhcpHostname",
        "ipAddress",
        "macAddress",
        "connectedToAp",
        "wifiBand",
        "connected",
        "bytesPerSec",
        "packetsPerSec",
      ]);
      if (row.dhcpHostname && row.dhcpHostname.value) {
        row.dhcpHostname = row.dhcpHostname.value;
      }
      if (!showGroups || row.connectedToAp) {
        const key = showGroups
          ? `${row.connectedToAp.toNT()}-${row.wifiBand.toNT()}`
          : "all";
        if (!grouped.has(key)) {
          grouped.set(key, {
            connectedToAp: row.connectedToAp,
            wifiBand: row.wifiBand,
            devs: [],
          });
        }
        grouped.get(key)!.devs.push(row);
      } else {
        console.log("lost row", row);
      }
      if (row.connected) {
        const t = new Date(row.connected.value);
        const agoMs = (Date.now() as number) - ((t as unknown) as number);
        row.agoMin = agoMs / 1000 / 60;
      }
      if (row.bytesPerSec) {
        row.bytesPerSec = row.bytesPerSec.valueOf() + " B/s";
      }
      if (row.packetsPerSec) {
        row.packetsPerSec = row.packetsPerSec.valueOf() + " p/s";
      }
    },
    null,
    namedNode("rdf:type"),
    namedNode("room:NetworkedDevice"),
    null
  );
}

const renderDevice = (dev: Dev) => {
  const glow = Math.max(0, 1 - dev.agoMin / 60);
  const agoReport =
    dev.agoMin < 360 ? ` (${Math.ceil(dev.agoMin * 10) / 10} minutes ago)` : "";
  return html`
    <div class="dev" style="background: rgba(185, 5, 138, ${glow});">
      <span class="mac">${dev.macAddress.value}</span>
      <span class="ip"
        ><a href="http://${dev.ipAddress.value}/"
          >${dev.ipAddress.value}</a
        ></span
      >
      <span class="packets">${dev.packetsPerSec}</span>
      <span class="bytes">${dev.bytesPerSec}</span>
      <span class="hostname">${dev.dhcpHostname}</span>
      <span class="ago">${agoReport}</span>
      <span class="links">
        <a
          href="https://bigasterisk.com/ntop/lua/host_details.lua?ifid=17&amp;host=${dev
            .ipAddress.value}&amp;page=flows"
          >[flows]</a
        >
      </span>
    </div>
  `;
};

const renderGroup = (key: string, group: DevGroup) => {
  let label;
  if (key != "all") {
    label = labelFromUri(
      group.connectedToAp,
      "http://bigasterisk.com/mac/",
      {
        "a0:40:a0:6f:96:d5": "Main router (d5)",
        "8c:3b:ad:c4:8d:ce": "Downstairs satellite (ce)",
        "a0:40:a0:6f:aa:f8": "Upstairs satellite (f8)",
      },
      "unknown"
    );

    label += labelFromUri(
      group.wifiBand,
      "http://projects.bigasterisk.com/room/wifiBand/",
      {
        "5G": " 5G",
        "2.4G": " 2.4G",
      },
      "unknown"
    );
  }

  const devs = group.devs;
  function padIp(ip: string) {
    return ip.replace(/(\d+)/g, m => ("00" + m).slice(-3));
  }
  devs.sort((a, b) => {
    return padIp(a.ipAddress.value) > padIp(b.ipAddress.value) ? 1 : -1;
  });
  return html`
    <tr>
      <th>${label}</th>
      <td>
        <div>Devices:</div>
        ${devs.map(d => {
          return renderDevice(d);
        })}
      </td>
    </tr>
  `;
  /*
let groups=['?'];
const out = html`
<style>

  .report { font-family: sans-serif; }
  section { margin-left: 1em; }
  .dev { margin-bottom: 2px; }
  .ip, .mac, .packets, .bytes {
      display: inline-block;
      font-family: monospace;
  }
  .packets, .bytes {
      text-align: right;
      padding-right: 1em;
  }
  .mac     {color: #ccffcc; width: 11em; }
  .ip      {color: #b5b5d4; width: 6em; }
  .packets {color: #2da1a5; width: 6em; }
  .bytes   {color: #a5912d; width: 9em; }
  th,td { vertical-align: top; }
  th { background: #333; }
  td { background: #252525; }

</style>
<div class="report">
  report
  <table>
    ${groups.map((row) => { return renderGroup(row[0], row[1]); })}
  </table>
</div>
`;
return out;*/
};
export { graphView };