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

function Report() {
  const origin = new URL(document.location.toString()).searchParams.get(
    "origin"
  );
  const [counter, setCounter] = useEmitter(getMemory());
  function refresh() {
    setCounter((c) => c + 1);
  }
  const clusters = getMemory().getClustersForOrigin(origin);
  const marks = Object.values(clusters)
    .map((cluster) => cluster.getRepresentativeMarks())
    .reduce(reduceConcat, []);
  return (
    <div {...{ "data-version": counter }}>
      <h1>Generuj treść maila dla {origin}</h1>
      <table>
        <thead>
          <tr>
            <th>Adres docelowy</th>
            <th>Źródło danych</th>
            <th>Treść danych</th>
            <th>Klasyfikacja</th>
          </tr>
        </thead>
        <tbody>
          {marks.map((mark) => (
            <tr
              key={mark.entry.request.originalURL + ";" + mark.key}
              style={{
                backgroundColor:
                  mark.classification == "id" ? "yellow" : "white",
              }}
            >
              <td>{mark.shorthost}</td>
              <td style={{ overflowWrap: "anywhere" }}>
                {mark.source}:{mark.name}
                {mark.key}
              </td>
              <td
                style={{
                  width: "400px",
                  overflowWrap: "anywhere",
                  backgroundColor: mark.entry.isRelatedToID()
                    ? "#ffff0054"
                    : "white",
                }}
              >
                {mark.valuePreview}
                {/* always gonna have
                one key, because unwrapEntry is called above */}
              </td>
              <td>
                <select
                  value={mark.classification}
                  onChange={(e) => {
                    mark.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>
      <EmailTemplate {...{ marks, clusters, version: counter }} />
      <HARConverter {...{ marks }} />
    </div>
  );
}

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