import { http, HttpResponse } from "msw";
import preview from "../../.storybook/preview.tsx";
import { LetterheadParagraph } from "../Letterhead/index.tsx";
import { sleep } from "../sleep.ts";
import { SubscribeByPledgeCard } from "./SubscribeByPledgeCard.tsx";

const pledge = {
  id: "1",
  email: "test@example.com",
  contactSubscribed: false,
};

const subscribeByPledgeId = {
  success() {
    return http.post(
      "http://mock.api/v1/newsletters/changelog/subscriptions",
      async () => {
        await sleep(2000);

        return HttpResponse.json(
          { message: "Added to newsletter" },
          { status: 201 },
        );
      },
    );
  },
  noConnection() {
    return http.post(
      "http://mock.api/v1/newsletters/changelog/subscriptions",
      async () => {
        return HttpResponse.error();
      },
    );
  },
  error() {
    return http.post(
      "http://mock.api/v1/newsletters/changelog/subscriptions",
      async () => {
        await sleep(2000);

        return HttpResponse.text("Application error", { status: 500 });
      },
    );
  },
};

/**
 * Allows users to subscribe to ITC's newsletter using the email provided
 * in their pledge.
 */
const meta = preview.meta({
  title: "Newsletter/Subscribe By Pledge Card",
  component: SubscribeByPledgeCard,
  tags: ["autodocs"],
  args: {
    pledge,
    content: {
      SUBSCRIBE: {
        title: "Space Gits on Indie Tabletop Club",
        description: (
          <LetterheadParagraph>
            Space Gits is getting a fancy <strong>gang builder</strong> and{" "}
            <strong>smart rules</strong> in late 2025 in collaboration with
            Indie Tabletop Club. Subscribe to ITC&apos;s{" "}
            <em>at‑most‑one‑a‑month</em> newsletter and be among the first to
            gain early access. It&apos;s gonna be rad.
          </LetterheadParagraph>
        ),
      },
      SUBSCRIBE_SUCCESS: {
        title: "Subscribed!",
        description:
          "Thank you for being awesome. Once Space Gits is available for " +
          "early access, you will be among the first to know!",
      },
      PREVIOUSLY_SUBSCRIBED: {
        title: "Space Gits on Indie Tabletop Club",
        description: (
          <>
            <LetterheadParagraph>
              Space Gits is getting a fancy <strong>gang builder</strong> and{" "}
              <strong>smart rules</strong> in late 2025 in collaboration with
              Indie Tabletop Club.
            </LetterheadParagraph>

            <LetterheadParagraph>
              Early access will be announced via ITC&apos;s newsletter, which
              &mdash; according to our records &mdash; you are are already
              subscribed to! Nothing left to do but await the good news in your
              inbox!
            </LetterheadParagraph>
          </>
        ),
      },
    },
  },
  parameters: {
    msw: {
      handlers: {
        subscribeByPledgeId: subscribeByPledgeId.success(),
      },
    },
  },
});

/**
 * The default case, in which the user is not yet subscribed to ITC's newsletter
 * and the submission is successful.
 */
export const Default = meta.story({});

/**
 * Same like the default case, but the form submission fails. Errors are
 * differentiated using the `getSubmitFailureMessage` helper, so all the basics
 * should be covered, as this page doesn't have special cases.
 */
export const FailureOnSubmit = meta.story({
  parameters: {
    msw: {
      handlers: {
        subscribeByPledgeId: subscribeByPledgeId.error(),
      },
    },
  },
});

/**
 * In this case, the email address associated with this user account is
 * already subscribed to our newsletter.
 */
export const AlreadySubscribed = meta.story({
  args: { pledge: { ...pledge, contactSubscribed: true } },
});