<script module lang="ts">
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import PurchaseButton from "./PurchaseButton.svelte";
  import type { PurchaseState } from "../../data/state";
  import type { DimensionType } from "../../types";
  import type { SupportedActions } from "../../data/entities";
  import { DEFAULT_COLOR_MODE } from "../../utils/constants";

  const onAction = (action: SupportedActions) => {
    alert(action.type);
  };

  const { Story } = defineMeta({
    title: "Components/PurchaseButton",
    component: PurchaseButton,
    tags: ["autodocs"],
    argTypes: {
      stack: {
        control: { type: "object" },
        description: "Stack configuration for button content",
        table: {
          type: {
            summary: "object",
            detail: "StackProps",
          },
        },
      },
    },
  });

  export const labelsData = {
    en_US: {
      "6gpcQ4q6T8": "Continue",
    },
  };
  const purchaseState: PurchaseState = {
    colorMode: DEFAULT_COLOR_MODE,
    locale: "en_US",
    defaultLocale: "en_US",
  };
</script>

<!-- Default button -->
<Story
  name="Default button"
  args={{
    id: "mjaE9fOv5z",
    name: "Purchase_button",
    purchaseState,
    stack: {
      purchaseState,
      background_color: {
        light: {
          type: "hex",
          value: "#a229f3",
        },
      },
      components: [
        {
          purchaseState,
          background_color: null,
          color: {
            light: {
              type: "hex",
              value: "#ffffff",
            },
          },
          labels: labelsData,
          components: [],
          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: "6gpcQ4q6T8",
          type: "text",
        },
      ],
      dimension: {
        alignment: "top",
        distribution: "space_between",
        type: "vertical",
      } as DimensionType,
      id: "pbvAUBvilP",
      margin: {
        bottom: 16,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      name: "Stack",
      padding: {
        bottom: 16,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      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,
      type: "stack",
      labels: labelsData,
    },
    labels: labelsData,
    type: "purchase_button",
    onAction,
  }}
/>
