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

  const defaultLocale = "en_US";

  const { Story } = defineMeta({
    title: "Components/Options/InputSingleChoice",
    component: InputSingleChoice,
    decorators: [
      componentDecorator(),
      localizationDecorator({
        defaultLocale,
        localizations: {
          [defaultLocale]: {
            option1: "Option 1",
            option2: "Option 2",
            option3: "Option 3",
          },
        },
      }),
    ],
    args: {
      type: "input_single_choice",
      id: "single-choice-1",
      name: "Single Choice Input",
      field_id: "user_preference",
      stack: {
        type: "stack",
        id: "stack-1",
        name: "Choice Stack",
        components: [
          {
            type: "text",
            id: "text-1",
            name: "Choice Label",
            text_lid: "option1",
            color: {
              light: { type: "hex", value: "#000000" },
              dark: { type: "hex", value: "#FFFFFF" },
            },
            font_size: "body_m",
            font_weight: "regular",
            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: 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: "#F5F5F5" },
          dark: { type: "hex", value: "#2A2A2A" },
        },
        background: null,
        border: {
          width: 10,
          color: {
            light: {
              type: "linear",
              degrees: 90,
              points: [
                { color: "#000000", percent: 0 },
                { color: "#FF0000", percent: 100 },
              ],
            },
          },
        },
        shape: {
          type: "rectangle",
          corners: {
            top_leading: 8,
            top_trailing: 8,
            bottom_leading: 8,
            bottom_trailing: 8,
          },
        },
        shadow: null,
        badge: null,
      },
    } satisfies InputSingleChoiceProps,
  });
</script>

<Story name="Default" />

<Story
  name="With Multiple Options"
  args={{
    stack: {
      type: "stack",
      id: "stack-2",
      name: "Multi Choice Stack",
      components: [
        {
          type: "text",
          id: "text-1",
          name: "Option 1",
          text_lid: "option1",
          color: {
            light: { type: "hex", value: "#000000" },
          },
          font_size: "body_m",
          font_weight: "medium",
          horizontal_alignment: "leading",
          size: {
            width: { type: "fill" },
            height: { type: "fit" },
          },
          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
          background_color: null,
        },
        {
          type: "text",
          id: "text-2",
          name: "Option 2",
          text_lid: "option2",
          color: {
            light: { type: "hex", value: "#000000" },
          },
          font_size: "body_m",
          font_weight: "medium",
          horizontal_alignment: "leading",
          size: {
            width: { type: "fill" },
            height: { type: "fit" },
          },
          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
          background_color: null,
        },
        {
          type: "text",
          id: "text-3",
          name: "Option 3",
          text_lid: "option3",
          color: {
            light: { type: "hex", value: "#000000" },
          },
          font_size: "body_m",
          font_weight: "medium",
          horizontal_alignment: "leading",
          size: {
            width: { type: "fill" },
            height: { type: "fit" },
          },
          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
          background_color: null,
        },
      ],
      dimension: {
        type: "vertical",
        alignment: "leading",
        distribution: "start",
      },
      size: {
        width: { type: "fill" },
        height: { type: "fit" },
      },
      spacing: 0,
      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
      background_color: {
        light: { type: "hex", value: "#FFFFFF" },
      },
      background: null,
      border: {
        width: 1,
        color: {
          light: { type: "hex", value: "#DDDDDD" },
        },
      },
      shape: {
        type: "rectangle",
        corners: {
          top_leading: 12,
          top_trailing: 12,
          bottom_leading: 12,
          bottom_trailing: 12,
        },
      },
      shadow: {
        x: 0,
        y: 2,
        radius: 4,
        color: {
          light: { type: "hex", value: "#00000020" },
        },
      },
      badge: null,
    },
  }}
/>
