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

  const onAction = (action: SupportedActions, data?: Extra) => {
    alert(`${action.type} ${JSON.stringify(data)}`);
  };

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

  export const labelsData = {
    en_US: {
      "BcX-6YwhoV": "Monthly",
      QZ4ZmYsqjN: "$1.99",
    },
  };
  const purchaseState: PurchaseState = {
    colorMode: DEFAULT_COLOR_MODE,
    locale: "en_US",
    defaultLocale: "en_US",
  };
</script>

<!-- Default  -->
<Story
  name="Default Package"
  args={{
    id: "6rQSD5e2Kz",
    is_selected_by_default: false,
    name: "Package - Monthly",
    package_id: "$rc_annual",
    purchaseState,
    stack: {
      purchaseState,
      background_color: {
        light: {
          type: "hex",
          value: "#09090b",
        },
      },
      labels: labelsData,
      border: {
        color: {
          light: {
            type: "hex",
            value: "#3b393f",
          },
        },
        width: 1,
      },
      components: [
        {
          background_color: null,
          color: {
            light: {
              type: "hex",
              value: "#ffffff",
            },
          },
          labels: labelsData,
          components: [],
          font_name: null,
          font_size: "heading_s",
          font_weight: "bold",
          horizontal_alignment: "center",
          id: "aSK4Jf1zd4",
          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: "fit",
              value: null,
            },
          },
          text_lid: "BcX-6YwhoV",
          type: "text",
        },
        {
          background_color: {
            light: {
              type: "hex",
              value: "#292631",
            },
          },
          labels: labelsData,
          border: null,
          components: [
            {
              background_color: null,
              color: {
                light: {
                  type: "hex",
                  value: "#ffffff",
                },
              },
              components: [],
              font_name: null,
              font_size: "body_m",
              font_weight: "extra_bold",
              horizontal_alignment: "center",
              id: "unosKAXGp4",
              margin: {
                bottom: 0,
                leading: 0,
                top: 0,
                trailing: 0,
              },
              name: "Text",
              padding: {
                bottom: 8,
                leading: 16,
                top: 8,
                trailing: 16,
              },
              size: {
                height: {
                  type: "fit",
                  value: null,
                },
                width: {
                  type: "fit",
                  value: null,
                },
              },
              text_lid: "QZ4ZmYsqjN",
              type: "text",
            },
          ],
          dimension: {
            alignment: "leading",
            distribution: "space_between",
            type: "vertical",
          },
          id: "-41AkrT2Ha",
          margin: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          name: "Stack",
          padding: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          shape: {
            corners: {
              bottom_leading: 8,
              bottom_trailing: 8,
              top_leading: 8,
              top_trailing: 8,
            },
            type: "rectangle",
          },
          size: {
            height: {
              type: "fit",
              value: null,
            },
            width: {
              type: "fit",
              value: null,
            },
          },
          spacing: 8,
          type: "stack",
        },
      ],
      dimension: {
        alignment: "center",
        distribution: "space_between",
        type: "horizontal",
      },
      id: "u0KZLUZTQT",
      margin: {
        bottom: 0,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      name: "Stack",
      padding: {
        bottom: 16,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      shape: {
        corners: {
          bottom_leading: 0,
          bottom_trailing: 0,
          top_leading: 8,
          top_trailing: 8,
        },
        type: "rectangle",
      },
      size: {
        height: {
          type: "fit",
        },
        width: {
          type: "fixed",
          value: 500,
        },
      },
      spacing: 8,
      type: "stack",
    },
    onAction,
    labels: labelsData,
    type: "package",
  }}
/>
