<script module lang="ts">
  import ButtonNode from "./ButtonNode.svelte";
  import { componentDecorator } from "../../stories/component-decorator";
  import { localizationDecorator } from "../../stories/localization-decorator";
  import type { ButtonProps } from "../../types/components/button";
  import type { StackProps } from "../../types/components/stack";
  import type { TextNodeProps } from "../../types/components/text";
  import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
  import { defineMeta } from "@storybook/addon-svelte-csf";

  const textProps = (id: number): TextNodeProps => ({
    type: "text",
    id: `button-text-${id}`,
    name: `button-text-${id}`,
    text_lid: `id${id}`,
    font_size: "body_m",
    font_weight: "medium",
    horizontal_alignment: "center",
    size: {
      width: { type: "fit" },
      height: { type: "fit" },
    },
    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
    color: {
      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
      light: { type: "hex", value: "#ffffff" },
    },
    background_color: {
      dark: { type: "hex", value: "transparent" },
      light: { type: "hex", value: "transparent" },
    },
  });

  const stackProps = (id: number): StackProps => ({
    type: "stack",
    id: `stack-${id}`,
    name: `Stack ${id}`,
    components: [textProps(id)],
    size: { width: { type: "fill" }, height: { type: "fill" } },
    dimension: {
      type: "horizontal",
      alignment: "center",
      distribution: "center",
    },
    spacing: 16,
    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
    background_color: null,
    background: {
      type: "color",
      value: {
        dark: { type: "hex", value: "#3471eb" },
        light: { type: "hex", value: "#3471eb" },
      },
    },
    border: null,
    shape: { type: "pill" },
    shadow: null,
    badge: null,
  });

  const defaultLocale = "en_US";

  const { Story } = defineMeta({
    title: "Components/Button",
    component: ButtonNode,
    decorators: [
      componentDecorator(),
      localizationDecorator({
        defaultLocale,
        localizations: {
          [defaultLocale]: {
            id1: "Restore purchases",
            id2: "Navigate back",
            id3: "Navigate to",
            id4: "URL navigation",
            id5: "Workflow Action",
            id6: "Border",
          },
        },
      }),
    ],
    args: {
      type: "button",
      id: "button",
      name: "Button",
      action: { type: "navigate_back" },
      stack: stackProps(1),
    } satisfies ButtonProps,
  });
</script>

<Story
  name="Restore purchases"
  args={{
    action: { type: "restore_purchases" },
    stack: stackProps(1),
  }}
/>

<Story
  name="Navigate Back"
  args={{
    action: { type: "navigate_back" },
    stack: {
      ...stackProps(2),
      shape: {
        type: "rectangle",
        corners: {
          top_leading: 16,
          top_trailing: 16,
          bottom_leading: 16,
          bottom_trailing: 16,
        },
      },
      background_color: {
        dark: { type: "hex", value: "#2E7D32" },
        light: { type: "hex", value: "#2E7D32" },
      },
    },
  }}
/>

<Story
  name="Navigate To"
  args={{
    action: {
      type: "navigate_to",
      destination: "customer_center",
    },
    stack: {
      ...stackProps(3),
      shape: {
        type: "rectangle",
        corners: {
          top_leading: 8,
          top_trailing: 8,
          bottom_leading: 8,
          bottom_trailing: 8,
        },
      },
      background_color: {
        dark: { type: "hex", value: "#D32F2F" },
        light: { type: "hex", value: "#D32F2F" },
      },
    },
  }}
/>

<Story
  name="URL Navigation"
  args={{
    action: {
      type: "navigate_to",
      destination: "url",
      url: {
        url_lid: "terms_url",
        method: "in_app_browser",
      },
    },
    stack: {
      ...stackProps(4),
      background_color: {
        dark: { type: "hex", value: "#4A90E2" },
        light: { type: "hex", value: "#4A90E2" },
      },
    },
  }}
/>

<Story
  name="Workflow Action"
  args={{
    action: {
      type: "workflow",
    },
    stack: {
      ...stackProps(5),
      background_color: {
        dark: { type: "hex", value: "#9C27B0" },
        light: { type: "hex", value: "#9C27B0" },
      },
    },
  }}
/>

<Story
  name="Border"
  args={{
    stack: {
      ...stackProps(6),
      border: {
        width: 10,
        color: {
          light: {
            type: "linear",
            degrees: 90,
            points: [
              { color: "#000000", percent: 0 },
              { color: "#FF0000", percent: 100 },
            ],
          },
        },
      },
    },
  }}
/>
