import { render } from "preact";
import { html } from "htm/preact";
import { Signal, signal, useSignal } from "@preact/signals";
import { useId } from "preact/hooks";
import {
  ActorID,
  createActorID,
  Dot,
  LWWMapCRDT,
  LWWRegisterCRDT,
  SequenceCRDT,
} from "@caret-js/core";
import { Arrow } from "./components/Arrow";

const crdt1 = signal(
  new SequenceCRDT<Map<string, string>, LWWMapCRDT<string, string>>(),
);
const crdt2 = signal(
  new SequenceCRDT<Map<string, string>, LWWMapCRDT<string, string>>(),
);

const actor1 = createActorID("A");
const actor2 = createActorID("B");

function App() {
  return html`
    <div>
      <h2>CRDT 1</h2>
      <${SequenceCRDTPlayground}
        actorId=${actor1}
        crdt=${crdt1.value}
        setCrdt=${(
          newCrdt: SequenceCRDT<
            Map<string, string>,
            LWWMapCRDT<string, string>
          >,
        ) => (crdt1.value = newCrdt)}
      />
      <div style="margin: 16px 0;">
        <button
          onClick=${() => {
            crdt2.value = crdt2.value.merge(crdt1.value);
          }}
        >
          Merge ↓
        </button>
        <button
          onClick=${() => {
            crdt1.value = crdt1.value.merge(crdt2.value);
          }}
        >
          ↑ Merge
        </button>
      </div>
      <h2>CRDT 2</h2>
      <${SequenceCRDTPlayground}
        actorId=${actor2}
        crdt=${crdt2.value}
        setCrdt=${(
          newCrdt: SequenceCRDT<
            Map<string, string>,
            LWWMapCRDT<string, string>
          >,
        ) => (crdt2.value = newCrdt)}
      />
    </div>
  `;
}

interface SequenceCRDTPlaygroundProps {
  actorId: ActorID;
  crdt: SequenceCRDT<Map<string, string>, LWWMapCRDT<string, string>>;
  setCrdt: (
    crdt: SequenceCRDT<Map<string, string>, LWWMapCRDT<string, string>>,
  ) => void;
}

function SequenceCRDTPlayground({
  actorId,
  crdt,
  setCrdt,
}: SequenceCRDTPlaygroundProps) {
  const cursor = useSignal<Dot | null>(null);

  const [value, cursorIndex] = crdt.getValueWithCursor(cursor.value);

  function drawCursor(index: number) {
    if (cursorIndex === index) {
      return html`<span
        style="border-left: 2px solid red; height: 1em; margin-left: -1px;"
      ></span>`;
    }
    return null;
  }

  const playgroundId = useId();

  return html`
    <div>
      <pre>
        ${[...crdt.DEBUG_data.values()]
          .sort((a, b) => a.id.compare(b.id))
          .map((item) => JSON.stringify(item, replacer))
          .join("\n")}
      </pre
      >
      <div
        class="input"
        data-id=${`${playgroundId}-null`}
        style="display: flex; border: 1px solid black; padding: 8px; gap: 8px; flex-wrap: wrap;"
        tabindex="0"
        onClick=${(e: MouseEvent) => {
          // Focus the div to receive keyboard events
          console.log("click", e.currentTarget);
          (e.currentTarget as HTMLDivElement).focus();
          cursor.value = null;
        }}
        onKeyDown=${(e: KeyboardEvent) => {
          if (e.key.length === 1) {
            const result = crdt.insert(
              actorId,
              cursor.value,
              new LWWMapCRDT(
                new Map([
                  ["char", new LWWRegisterCRDT(e.key, new Dot(actorId, 1))],
                ]),
              ),
            );
            setCrdt(result[0]);
            cursor.value = result[1];
            e.preventDefault();
          }
        }}
      >
        ${drawCursor(0)}
        ${value.map((item, i) => {
          return html`
            <div
              key=${`${item.id.actorId}-${item.id.counter}`}
              data-id=${`${playgroundId}-${item.id.actorId}-${item.id.counter}`}
              style="border: 1px solid gray; padding: 4px;"
              onClick=${(e: MouseEvent) => {
                e.stopPropagation();
                cursor.value = item.id;
                const inputDiv = (e.currentTarget as HTMLDivElement).closest(
                  ".input",
                ) as HTMLDivElement;
                inputDiv.focus();
              }}
              onDblClick=${(e: MouseEvent) => {
                e.stopPropagation();
                console.log("delete", item.id);
                setCrdt(crdt.delete(actorId, item.id));
              }}
            >
              ${`${item.id.actorId}-${item.id.counter}`}:
              <!-- ${JSON.stringify(item.value, replacer, 2)} -->
              <${LWWMapCRDTPlayground}
                actorId=${actorId}
                crdt=${crdt.DEBUG_data.get(item.id)?.value}
                setCrdt=${(newCrdt: LWWMapCRDT<string, string>) => {
                  setCrdt(crdt.setItemValue(actorId, item.id, newCrdt));
                }}
              />
            </div>
            ${drawCursor(i + 1)}
            <${Arrow}
              from=${`[data-id='${playgroundId}-${item.id.actorId}-${item.id.counter}']`}
              to=${`[data-id=${item.DEBUG_left ? `'${playgroundId}-${item.DEBUG_left.actorId}-${item.DEBUG_left.counter}'` : `'${playgroundId}-null'`}]`}
              fromSide="left"
              toSide=${item.DEBUG_left === null ? "left" : "right"}
            />
          `;
        })}
      </div>
    </div>
  `;
}

interface LWWMapCRDTPlaygroundProps {
  actorId: ActorID;
  crdt: LWWMapCRDT<string, string>;
  setCrdt: (crdt: LWWMapCRDT<string, string>) => void;
}

function LWWMapCRDTPlayground({
  actorId,
  crdt,
  setCrdt,
}: LWWMapCRDTPlaygroundProps) {
  return html`
    <div>
      ${[...crdt.DEBUG_data.entries()].map(
        ([key, register]) => html`
          <div>
            <strong>${key}:</strong>
            <${LWWRegisterCRDTPlayground}
              actorId=${actorId}
              crdt=${crdt.getRegister(key)!}
            />
          </div>
        `,
      )}
      <button
        onClick=${(e: MouseEvent) => {
          e.stopPropagation();
          const key = prompt("New key?");
          if (!key) return;
          const value = prompt("New value?");
          if (!value) return;
          setCrdt(crdt.set(actorId, key, value));
        }}
      >
        +
      </button>
    </div>
  `;
}

interface LWWRegisterCRDTPlaygroundProps {
  actorId: ActorID;
  crdt: LWWRegisterCRDT<string>;
}

function LWWRegisterCRDTPlayground({
  actorId,
  crdt,
}: LWWRegisterCRDTPlaygroundProps) {
  console.log("LWWRegisterCRDTPlayground render", crdt);

  return html`
    <input
      type="text"
      value=${crdt.getValue()}
      onInput=${(e: Event) => {
        e.stopPropagation();
        const input = e.target as HTMLInputElement;
        console.log(crdt.set(actorId, input.value));
      }}
      onClick=${(e: MouseEvent) => e.stopPropagation()}
    />
  `;
}

function replacer(key: string, value: unknown): unknown {
  if (value instanceof Map) {
    return Object.fromEntries(value.entries());
  }
  if (value instanceof Set) {
    return Array.from(value).sort();
  }
  if (value instanceof Dot) {
    return `#${value.actorId}-${value.counter}`;
  }
  if (value instanceof LWWRegisterCRDT) {
    return `LWWRegister(${JSON.stringify(value.getValue(), replacer)})`;
  }

  return value;
}

render(html`<${App} />`, document.querySelector("#app")!);