import { useState } from "preact/hooks";
import { RUNTIME_BYTES, loadBrain, onMobileData } from "../app/brain.ts";
import { exportBadEgg, getEgg, hatchPet, replaceBadEgg } from "../app/commands.ts";
import { CFG, NAME_IDEAS } from "../app/config.ts";
import { brain, store } from "../app/store.ts";
import { fmtMB, pick } from "../app/utils.ts";

export function Setup() {
  const { state: s, badEgg } = store;
  const [owner, setOwner] = useState(s.owner);
  const [name, setName] = useState(() => pick(NAME_IDEAS));
  const ownerStep = !s.owner || !s.egg;
  const progress = brain.progress;
  const note =
    brain.state === "ready"
      ? "The egg is wiggling! Name your pet to hatch it."
      : brain.state === "error"
        ? `The egg needs its brain, which could not load: ${brain.error}`
        : brain.state === "warming"
          ? "Almost there… something is stirring inside."
          : progress
            ? `Your egg is warming up while its brain downloads: ${fmtMB(progress.loaded)} of ${fmtMB(progress.total)}.`
            : "Your egg is warming up…";
  return (
    <div id="pet-setup" class="pet-setup" hidden={!!s.pet}>
      <form
        id="setup-owner"
        hidden={!ownerStep || !!badEgg}
        onSubmit={(e) => {
          e.preventDefault();
          getEgg(owner);
        }}
      >
        <label for="owner-name">What should your pet call you?</label>
        <div class="pet-row">
          <input
            id="owner-name"
            name="owner"
            maxLength={24}
            autoComplete="nickname"
            required
            value={owner}
            onInput={(e) => setOwner(e.currentTarget.value)}
          />
          <button class="primary" type="submit">
            get an egg
          </button>
        </div>
        <p id="setup-size" class="muted small">
          The egg hatches once its brain has downloaded: about {fmtMB(CFG.size + RUNTIME_BYTES)},
          once. It stays in this browser.
          {onMobileData()
            ? " You seem to be on mobile data; Wi-Fi may be kinder to your plan."
            : " Wi-Fi is a good idea."}
        </p>
      </form>
      <div id="bad-egg" class="bad-egg" hidden={!badEgg}>
        <h2>Bad egg?!</h2>
        <p id="bad-egg-why">
          {badEgg &&
            `The save in this browser couldn't be read: ${badEgg.why}. It's still there, untouched.`}
        </p>
        <p class="muted small">
          Download it to keep a copy, try again if this page might be out of date, or start with a
          new egg.
        </p>
        <div class="pet-row">
          <button id="bad-egg-save" type="button" class="text-button" onClick={exportBadEgg}>
            download it
          </button>
          <button
            id="bad-egg-retry"
            type="button"
            class="text-button"
            hidden={!badEgg?.newer}
            onClick={() => location.reload()}
          >
            try again
          </button>
          <button id="bad-egg-new" type="button" class="primary" onClick={replaceBadEgg}>
            start anew
          </button>
        </div>
      </div>
      <form
        id="setup-hatch"
        hidden={ownerStep || !!badEgg}
        onSubmit={(e) => {
          e.preventDefault();
          hatchPet(name);
        }}
      >
        <p id="setup-hatch-note">{note}</p>
        <button
          id="setup-retry"
          type="button"
          class="text-button"
          hidden={brain.state !== "error"}
          onClick={() => loadBrain()}
        >
          retry brain download
        </button>
        <label for="pet-name">Name your pet</label>
        <div class="pet-row">
          <input
            id="pet-name"
            name="pet"
            maxLength={16}
            required
            value={name}
            onInput={(e) => setName(e.currentTarget.value)}
          />
          <button id="hatch-btn" class="primary" type="submit" disabled={brain.state !== "ready"}>
            hatch!
          </button>
        </div>
      </form>
    </div>
  );
}