<script module lang="ts">
  import InputOption from "./InputOption.svelte";
  import { componentDecorator } from "../../stories/component-decorator";
  import { localizationDecorator } from "../../stories/localization-decorator";
  import type { InputOptionProps } from "../../types/components/options";
  import { defineMeta } from "@storybook/addon-svelte-csf";

  const defaultLocale = "en_US";

  const { Story } = defineMeta({
    title: "Components/Options/InputOption",
    component: InputOption,
    decorators: [
      componentDecorator(),
      localizationDecorator({
        defaultLocale,
        localizations: {
          [defaultLocale]: {
            option_text: "Premium Plan",
            option_description: "Unlock all features",
          },
        },
      }),
    ],
    args: {
      type: "input_option",
      id: "option-1",
      name: "Input Option",
      option_id: "option_premium",
      stack: {
        type: "stack",
        id: "stack-1",
        name: "Option Stack",
        components: [
          {
            type: "text",
            id: "text-1",
            name: "Option Text",
            text_lid: "option_text",
            color: {
              light: { type: "hex", value: "#000000" },
              dark: { type: "hex", value: "#FFFFFF" },
            },
            font_size: "body_l",
            font_weight: "semibold",
            horizontal_alignment: "leading",
            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 },
            background_color: null,
          },
        ],
        dimension: {
          type: "vertical",
          alignment: "leading",
          distribution: "start",
        },
        size: {
          width: { type: "fill" },
          height: { type: "fit" },
        },
        spacing: 4,
        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
        padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
        background_color: {
          light: { type: "hex", value: "#F9F9F9" },
          dark: { type: "hex", value: "#2A2A2A" },
        },
        background: null,
        border: {
          width: 2,
          color: {
            light: { type: "hex", value: "#4A90E2" },
            dark: { type: "hex", value: "#4A90E2" },
          },
        },
        shape: {
          type: "rectangle",
          corners: {
            top_leading: 8,
            top_trailing: 8,
            bottom_leading: 8,
            bottom_trailing: 8,
          },
        },
        shadow: null,
        badge: null,
      },
    } satisfies InputOptionProps,
  });
</script>

<Story name="Default" />

<Story
  name="With Description"
  args={{
    stack: {
      type: "stack",
      id: "stack-2",
      name: "Option Stack with Description",
      components: [
        {
          type: "text",
          id: "text-1",
          name: "Option Title",
          text_lid: "option_text",
          color: {
            light: { type: "hex", value: "#000000" },
          },
          font_size: "body_l",
          font_weight: "bold",
          horizontal_alignment: "leading",
          size: {
            width: { type: "fill" },
            height: { type: "fit" },
          },
          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          background_color: null,
        },
        {
          type: "text",
          id: "text-2",
          name: "Option Description",
          text_lid: "option_description",
          color: {
            light: { type: "hex", value: "#666666" },
          },
          font_size: "body_s",
          font_weight: "regular",
          horizontal_alignment: "leading",
          size: {
            width: { type: "fill" },
            height: { type: "fit" },
          },
          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          background_color: null,
        },
      ],
      dimension: {
        type: "vertical",
        alignment: "leading",
        distribution: "start",
      },
      size: {
        width: { type: "fill" },
        height: { type: "fit" },
      },
      spacing: 8,
      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
      background_color: {
        light: { type: "hex", value: "#FFFFFF" },
      },
      background: null,
      border: {
        width: 2,
        color: {
          light: { type: "hex", value: "#4A90E2" },
        },
      },
      shape: {
        type: "rectangle",
        corners: {
          top_leading: 12,
          top_trailing: 12,
          bottom_leading: 12,
          bottom_trailing: 12,
        },
      },
      shadow: {
        x: 0,
        y: 4,
        radius: 8,
        color: {
          light: { type: "hex", value: "#00000015" },
        },
      },
      badge: null,
    },
  }}
/>

<Story
  name="Pill Shape"
  args={{
    stack: {
      type: "stack",
      id: "stack-3",
      name: "Pill Option",
      components: [
        {
          type: "text",
          id: "text-1",
          name: "Option Text",
          text_lid: "option_text",
          color: {
            light: { type: "hex", value: "#FFFFFF" },
          },
          font_size: "body_m",
          font_weight: "semibold",
          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 },
          background_color: null,
        },
      ],
      dimension: {
        type: "horizontal",
        alignment: "center",
        distribution: "center",
      },
      size: {
        width: { type: "fit" },
        height: { type: "fit" },
      },
      spacing: 0,
      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      padding: { top: 12, trailing: 24, bottom: 12, leading: 24 },
      background_color: null,
      background: {
        type: "color",
        value: {
          light: { type: "hex", value: "#4A90E2" },
        },
      },
      border: {
        width: 10,
        color: {
          light: {
            type: "linear",
            degrees: 90,
            points: [
              { color: "#000000", percent: 0 },
              { color: "#FF0000", percent: 100 },
            ],
          },
        },
      },
      shape: {
        type: "pill",
      },
      shadow: {
        x: 0,
        y: 2,
        radius: 4,
        color: {
          light: { type: "hex", value: "#00000030" },
        },
      },
      badge: null,
    },
  }}
/>
