<script module lang="ts">
  import ExpressPurchaseButton from "./ExpressPurchaseButton.svelte";
  import { componentDecorator } from "../../stories/component-decorator";
  import { localizations } from "../../stories/fixtures";
  import { localizationDecorator } from "../../stories/localization-decorator";
  import { paywallDecorator } from "../../stories/paywall-decorator";
  import { variablesDecorator } from "../../stories/variables-decorator";
  import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
  import type { SkeletonLoaderProps } from "../../types/components/skeleton-loader-props";
  import type { WalletButtonProps } from "../../types/components/wallet-button";
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import { mockDateDecorator } from "storybook-mock-date-decorator";
  import type { PurchaseButtonProps } from "../../types/components/purchase-button";

  const defaultLocale = "en_US";
  const textLidWhenAvailable = "purchase_wallet_available_text";
  const textLidWhenUnavailable = "purchase_wallet_unavailable_text";
  const loc = {
    en_US: {
      ...localizations["en_US"],
      [textLidWhenAvailable]: "Purchase with Wallet",
      [textLidWhenUnavailable]: "Wallet Unavailable",
    },
  };

  const createWalletButtonRender =
    ({ available, delay }: { available: boolean; delay?: number }) =>
    (
      element: HTMLElement,
      {
        selectedPackageId,
        onReady,
      }: {
        selectedPackageId: string;
        onReady?: (isAvailable?: boolean) => void;
      },
    ) => {
      const mockButton = document.createElement("button");
      mockButton.innerHTML = `Wallet for ${selectedPackageId}`;
      mockButton.style.width = "100%";
      mockButton.style.padding = "12px 16px";
      mockButton.style.borderRadius = "12px";
      mockButton.style.border = "1px solid rgba(0,0,0,0.12)";
      mockButton.style.background = available ? "#0b8f4d" : "#ccc";
      mockButton.style.color = "#fff";

      setTimeout(() => {
        element.replaceChildren(mockButton);
        onReady?.(available);
      }, delay);

      return {
        destroy: () => {
          element.replaceChildren();
        },
      };
    };

  const skeletonLoaderProps: SkeletonLoaderProps = {
    type: "skeleton_loader",
    id: "wallet-loader",
    name: "Wallet Loader",
    size: {
      width: { type: "fill" },
      height: { type: "fit" },
    },
    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
    border: null,
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 12,
        top_trailing: 12,
        bottom_leading: 12,
        bottom_trailing: 12,
      },
    },
    shadow: null,
  };

  const walletProps: WalletButtonProps = {
    type: "wallet_button",
    id: "wallet_button",
    name: "Wallet Button",
    size: {
      width: { type: "fill" },
      height: { type: "fit" },
    },
    dimension: {
      type: "vertical",
      alignment: "center",
      distribution: "center",
    },
    spacing: 8,
    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
    border: null,
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 8,
        top_trailing: 8,
        bottom_leading: 8,
        bottom_trailing: 8,
      },
    },
    shadow: null,
  };

  const purchaseButtonWhenAvailableProps = {
    type: "purchase_button",
    id: "purchase-button",
    name: "Purchase button",
    stack: {
      type: "stack",
      id: "pbvAUBvilP",
      name: "Stack",
      background_color: {
        light: {
          type: "hex",
          value: "#a229f3",
        },
      },
      background: {
        type: "color",
        value: {
          light: {
            type: "hex",
            value: "#a229f3",
          },
        },
      },
      components: [
        {
          background_color: null,
          color: {
            light: {
              type: "hex",
              value: "#ffffff",
            },
          },
          font_name: null,
          font_size: "heading_m",
          font_weight: "extra_bold",
          horizontal_alignment: "center",
          id: "MI_dDBpD4z",
          margin: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          name: "Text",
          padding: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          size: {
            height: {
              type: "fit",
              value: null,
            },
            width: {
              type: "fill",
              value: null,
            },
          },
          text_lid: textLidWhenAvailable,
          type: "text",
        },
      ],
      dimension: {
        type: "vertical",
        alignment: "center",
        distribution: "center",
      },
      margin: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      padding: {
        bottom: 16,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      border: null,
      shadow: null,
      shape: {
        corners: {
          bottom_leading: 8,
          bottom_trailing: 8,
          top_leading: 8,
          top_trailing: 8,
        },
        type: "rectangle",
      },
      size: {
        height: {
          type: "fit",
        },
        width: {
          type: "fill",
        },
      },
      spacing: 8,
    },
  } satisfies PurchaseButtonProps;

  const purchaseButtonWhenUnavailableProps = {
    ...purchaseButtonWhenAvailableProps,
  } satisfies PurchaseButtonProps;
  purchaseButtonWhenUnavailableProps.stack.components[0].text_lid =
    textLidWhenUnavailable;

  const { Story } = defineMeta({
    title: "Components/ExpressPurchaseButton",
    component: ExpressPurchaseButton,
    decorators: [
      mockDateDecorator,
      componentDecorator(),
      localizationDecorator({
        defaultLocale,
        localizations: loc,
      }),
      variablesDecorator(undefined),
    ],

    args: {
      type: "express_purchase_button",
      id: "express_purchase_button",
      name: "ExpressPurchaseButton",
      size: {
        width: { type: "fill" },
        height: { type: "fit" },
      },
      padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      shape: null,
      shadow: null,
      background: null,
      border: null,
      overrides: [],
      wallet_available_stack: {
        type: "stack",
        id: "wallet-available-stack",
        name: "Wallet Available Stack",
        components: [walletProps, purchaseButtonWhenAvailableProps],
        size: {
          width: { type: "fill" },
          height: { type: "fit" },
        },
        dimension: {
          type: "vertical",
          alignment: "center",
          distribution: "center",
        },
        spacing: 8,
        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
        padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
        background_color: null,
        background: null,
        border: null,
        shape: {
          type: "rectangle",
          corners: {
            top_leading: 8,
            top_trailing: 8,
            bottom_leading: 8,
            bottom_trailing: 8,
          },
        },
        shadow: null,
        badge: null,
      },
      wallet_unavailable_stack: {
        type: "stack",
        id: "wallet-unavailable-stack",
        name: "Wallet Unavailable Stack",
        components: [purchaseButtonWhenUnavailableProps],
        size: {
          width: { type: "fill" },
          height: { type: "fit" },
        },
        dimension: {
          type: "vertical",
          alignment: "center",
          distribution: "center",
        },
        spacing: 8,
        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
        padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
        background_color: null,
        background: null,
        border: null,
        shape: {
          type: "rectangle",
          corners: {
            top_leading: 8,
            top_trailing: 8,
            bottom_leading: 8,
            bottom_trailing: 8,
          },
        },
        shadow: null,
        badge: null,
      },
      wallet_unknown_stack: {
        type: "stack",
        id: "wallet-unknown-stack",
        name: "Wallet Unknown Stack",
        components: [skeletonLoaderProps],
        size: {
          width: { type: "fill" },
          height: { type: "fit" },
        },
        dimension: {
          type: "vertical",
          alignment: "center",
          distribution: "center",
        },
        spacing: 8,
        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
        padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
        background_color: null,
        background: null,
        border: null,
        shape: {
          type: "rectangle",
          corners: {
            top_leading: 8,
            top_trailing: 8,
            bottom_leading: 8,
            bottom_trailing: 8,
          },
        },
        shadow: null,
        badge: null,
      },
    } satisfies ExpressPurchaseButtonProps,
  });
</script>

<Story
  name="Wallets Available"
  decorators={[
    paywallDecorator(
      createWalletButtonRender({ available: true, delay: 1000 }),
      "some-package-id",
    ),
  ]}
  args={{}}
/>

<Story
  name="Wallets Unavailable"
  decorators={[
    paywallDecorator(
      createWalletButtonRender({ available: false, delay: 1000 }),
      "some-package-id",
    ),
  ]}
  args={{}}
/>

<Story
  name="Wallets Unknown"
  decorators={[
    paywallDecorator(
      createWalletButtonRender({ available: false, delay: 1000 }),
      "some-package-id",
    ),
  ]}
  args={{}}
/>

<Story
  name="Parent Stack Props"
  decorators={[
    paywallDecorator(
      createWalletButtonRender({ available: false, delay: 1000 }),
      "some-package-id",
    ),
  ]}
  args={{
    background: {
      type: "color",
      value: {
        light: {
          type: "hex",
          value: "#a229d2",
        },
      },
    },
    padding: { top: 10, leading: 20, bottom: 30, trailing: 40 },
    margin: { top: 10, leading: 20, bottom: 30, trailing: 40 },
    shape: {
      type: "rectangle",
      corners: {
        top_leading: 10,
        top_trailing: 20,
        bottom_leading: 30,
        bottom_trailing: 40,
      },
    },
    border: { width: 3, color: { light: { type: "hex", value: "#000000" } } },
    shadow: {
      x: 10,
      y: 20,
      radius: 20,
      color: { light: { type: "hex", value: "#000000" } },
    },
    size: { width: { type: "fixed", value: 500 }, height: { type: "fit" } },
  }}
/>
