import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { getMemory } from "../memory";
import { Classifications, StolenDataEntry } from "../stolen-data-entry";
import { reduceConcat, useEmitter } from "../util";
import EmailTemplate from "./email-template";
import HARConverter from "./har-converter";

function DataPreview({
  entries,
  refresh,
}: {
  entries: StolenDataEntry[];
  refresh: () => void;
}) {
  // currently not used, maybe scraped entirely in the future
  return (
    <table>
      <thead>
        <tr>
          <th>Adres docelowy</th>
          <th>Źródło danych</th>
          <th>Treść danych</th>
          <th>Klasyfikacja</th>
        </tr>
      </thead>
      <tbody>
        {entries.map((entry) => (
          <tr
            key={entry.id}
            style={{
              backgroundColor:
                entry.classification == "id" ? "yellow" : "white",
            }}
          >
            <td>{entry.request.shorthost}</td>
            <td style={{ overflowWrap: "anywhere" }}>
              {entry.source}:{entry.name}
            </td>
            <td
              style={{
                width: "400px",
                overflowWrap: "anywhere",
                backgroundColor: entry.isRelatedToID() ? "#ffff0054" : "white",
              }}
            >
              {entry.getValuePreview()}
              {/* always gonna have
                one key, because unwrapEntry is called above */}
            </td>
            <td>
              <select
                value={entry.classification}
                onChange={(e) => {
                  entry.classification = e.target
                    .value as keyof typeof Classifications;
                  refresh();
                }}
              >
                {[
                  ["history", "Historia przeglądania"],
                  ["id", "Sztucznie nadane id"],
                  ["location", "Lokalizacja"],
                ].map(([key, name]) => (
                  <option key={key} value={key}>
                    {name}
                  </option>
                ))}
              </select>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function Report() {
  console.time("getOrigin");
  const origin = new URL(document.location.toString()).searchParams.get(
    "origin"
  );
  console.timeEnd("getOrigin");
  console.time("useMemory");
  const [counter, setCounter] = useEmitter(getMemory());
  console.timeEnd("useMemory");
  function refresh() {
    setCounter((c) => c + 1);
  }
  console.time("getClustersForOrigin");
  const clusters = getMemory().getClustersForOrigin(origin);
  console.timeEnd("getClustersForOrigin");
  const [entries, setEntries] = useState<StolenDataEntry[]>([]);
  console.time("useEffect report-window");
  useEffect(() => {
    setEntries(
      Object.values(clusters)
        .map((cluster) => {
          cluster.calculatetRepresentativeStolenData();
          return cluster.representativeStolenData;
        })
        .reduce(reduceConcat, [])
        .filter((entry) => entry.isMarked)
    );
  }, []);
  console.timeEnd("useEffect report-window");
  if (entries.length == 0) {
    return <>Wczytywanie...</>;
  }
  console.time("rendering template");
  const result = (
    <div {...{ "data-version": counter }}>
      {/*<DataPreview {...{entries, refresh}} */}
      <h1>Generuj treść maila dla {origin}</h1>
      <EmailTemplate {...{ entries, clusters, version: counter }} />
      <HARConverter {...{ entries }} />
    </div>
  );
  console.timeEnd("rendering template");
  return result;
}

ReactDOM.render(<Report />, document.getElementById("app"));