import { createResource, For, Show } from "solid-js";
import { PeachMark } from "../components/PeachMark";
import { PEACH_VERSION, RELEASES, markWhatsNewSeen, pendingImportantReleases } from "../../shared/release-notes";

export function WhatsNewView(props: { onContinue: () => void; mode?: "update" | "history" }) {
  const historyMode = () => props.mode === "history";
  const [importantReleases] = createResource(
    () => !historyMode(),
    () => pendingImportantReleases(),
  );
  const releases = () => historyMode() ? RELEASES : (importantReleases() ?? []);

  async function continueClicked() {
    await markWhatsNewSeen();
    props.onContinue();
  }

  return (
    <div class="peach-whats-new peach-theme">
      <div class="peach-whats-new-inner">
        <div class="peach-whats-new-header">
          <PeachMark class="peach-whats-new-mark" />
          <h1 class="peach-whats-new-title">{historyMode() ? "release notes" : "important update"}</h1>
          <span class="peach-whats-new-version">v{PEACH_VERSION}</span>
        </div>

        <div class="peach-whats-new-notes">
          <For each={releases()}>
            {(release) => (
              <section classList={{ "peach-whats-new-note": true, "is-breaking": !!release.importance }}>
                <div class="peach-whats-new-release-meta">
                  <h2 class="peach-whats-new-release-version">v{release.version}</h2>
                  <span>{release.releasedAt}</span>
                </div>
                <Show when={release.importance}>
                  <span class="peach-whats-new-badge">{release.importance}</span>
                </Show>
                <For each={release.notes}>
                  {(note) => <div class="peach-whats-new-item">
                    <h3 class="peach-whats-new-note-heading">{note.heading}</h3>
                    <p class="peach-whats-new-note-body">{note.body}</p>
                  </div>}
                </For>
              </section>
            )}
          </For>
        </div>

        <button class="peach-btn peach-btn--accent peach-whats-new-continue" onClick={continueClicked}>
          {historyMode() ? "Done" : "Continue"}
        </button>
      </div>
    </div>
  );
}