<script module lang="ts">
  import { componentDecorator } from "../../stories/component-decorator";
  import { localizationDecorator } from "../../stories/localization-decorator";
  import { viewportDecorator } from "../../stories/viewport-decorator";
  import type { CarouselProps } from "../../types/components/carousel";
  import { DEFAULT_SPACING } from "../../utils/constants";
  import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import Carousel from "./Carousel.svelte";

  const defaultLocale = "en_US";

  const pages: CarouselProps["pages"] = [
    {
      background: {
        type: "color",
        value: {
          light: {
            degrees: 180,
            points: [
              {
                color: "#EAEDFB2E",
                percent: 0,
              },
              {
                color: "#EAEDFBFF",
                percent: 100,
              },
            ],
            type: "linear",
          },
        },
      },
      background_color: null,
      badge: null,
      border: {
        color: {
          light: {
            type: "hex",
            value: "#cccccc",
          },
        },
        width: 1,
      },
      components: [
        {
          background_color: null,
          color: {
            light: {
              type: "hex",
              value: "#000000",
            },
          },
          font_name: null,
          font_size: 14,
          font_weight: "regular",
          font_weight_int: 400,
          horizontal_alignment: "leading",
          id: "soRLOc3Acb",
          margin: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          name: "",
          padding: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          size: {
            height: {
              type: "fit",
              value: null,
            },
            width: {
              type: "fit",
              value: null,
            },
          },
          text_lid: "first",
          type: "text",
        },
      ],
      dimension: {
        alignment: "center",
        distribution: "center",
        type: "horizontal",
      },
      id: "N3iBhLTsUa",
      margin: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      name: "Page 1",
      padding: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      shadow: null,
      shape: {
        corners: {
          bottom_leading: 16,
          bottom_trailing: 16,
          top_leading: 16,
          top_trailing: 16,
        },
        type: "rectangle",
      },
      size: {
        height: {
          type: "fixed",
          value: 160,
        },
        width: {
          type: "fill",
          value: null,
        },
      },
      spacing: 0,
      type: "stack",
    },
    {
      background: {
        type: "color",
        value: {
          light: {
            degrees: 180,
            points: [
              {
                color: "#E1F9EF2E",
                percent: 0,
              },
              {
                color: "#E1F9EFFF",
                percent: 100,
              },
            ],
            type: "linear",
          },
        },
      },
      background_color: null,
      badge: null,
      border: {
        color: {
          light: {
            type: "hex",
            value: "#cccccc",
          },
        },
        width: 1,
      },
      components: [
        {
          background_color: null,
          color: {
            light: {
              type: "hex",
              value: "#000000",
            },
          },
          font_name: null,
          font_size: 14,
          font_weight: "regular",
          font_weight_int: 400,
          horizontal_alignment: "leading",
          id: "RAsFXX8203",
          margin: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          name: "",
          padding: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          size: {
            height: {
              type: "fit",
              value: null,
            },
            width: {
              type: "fit",
              value: null,
            },
          },
          text_lid: "second",
          type: "text",
        },
      ],
      dimension: {
        alignment: "center",
        distribution: "center",
        type: "horizontal",
      },
      id: "xQIsfuIIN0",
      margin: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      name: "Page 2",
      padding: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      shadow: null,
      shape: {
        corners: {
          bottom_leading: 16,
          bottom_trailing: 16,
          top_leading: 16,
          top_trailing: 16,
        },
        type: "rectangle",
      },
      size: {
        height: {
          type: "fixed",
          value: 120,
        },
        width: {
          type: "fill",
          value: null,
        },
      },
      spacing: 0,
      type: "stack",
    },
    {
      background: {
        type: "color",
        value: {
          light: {
            degrees: 180,
            points: [
              {
                color: "#FDE7E72E",
                percent: 0,
              },
              {
                color: "#FDE7E7FF",
                percent: 100,
              },
            ],
            type: "linear",
          },
        },
      },
      background_color: null,
      badge: null,
      border: {
        color: {
          light: {
            type: "hex",
            value: "#cccccc",
          },
        },
        width: 1,
      },
      components: [
        {
          background_color: null,
          color: {
            light: {
              type: "hex",
              value: "#000000",
            },
          },
          font_name: null,
          font_size: 14,
          font_weight: "regular",
          font_weight_int: 400,
          horizontal_alignment: "leading",
          id: "QMk1xrZOgz",
          margin: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          name: "",
          padding: {
            bottom: 0,
            leading: 0,
            top: 0,
            trailing: 0,
          },
          size: {
            height: {
              type: "fit",
              value: null,
            },
            width: {
              type: "fit",
              value: null,
            },
          },
          text_lid: "third",
          type: "text",
        },
      ],
      dimension: {
        alignment: "center",
        distribution: "center",
        type: "horizontal",
      },
      id: "7zbI8t5CmX",
      margin: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      name: "Page 3",
      padding: {
        bottom: 0,
        leading: 0,
        top: 0,
        trailing: 0,
      },
      shadow: null,
      shape: {
        corners: {
          bottom_leading: 16,
          bottom_trailing: 16,
          top_leading: 16,
          top_trailing: 16,
        },
        type: "rectangle",
      },
      size: {
        height: {
          type: "fixed",
          value: 80,
        },
        width: {
          type: "fill",
          value: null,
        },
      },
      spacing: 0,
      type: "stack",
    },
  ];

  const lastPage = pages.length - 1;

  const { Story } = defineMeta({
    title: "Components/Carousel",
    component: Carousel,
    decorators: [
      viewportDecorator(400, 300, 0),
      componentDecorator(),
      localizationDecorator({
        defaultLocale,
        localizations: {
          [defaultLocale]: {
            first: "First",
            second: "Second",
            third: "Third",
            badge: "Badge",
          },
        },
      }),
    ],
    args: {
      type: "carousel",
      id: "carousel",
      name: "Carousel",
      padding: { bottom: 8, leading: 0, top: 8, trailing: 0 },
      margin: DEFAULT_SPACING,
      background: null,
      shape: null,
      border: null,
      shadow: null,
      page_alignment: "center",
      page_spacing: 16,
      page_peek: 16,
      initial_page_index: 0,
      loop: false,
      auto_advance: {
        ms_time_per_page: 2500,
        ms_transition_time: 500,
        transition_type: "slide",
      },
      page_control: {
        active: {
          color: {
            light: {
              type: "hex",
              value: "#00000088",
            },
          },
          height: 5,
          width: 5,
        },
        background_color: null,
        border: null,
        default: {
          color: {
            light: {
              type: "hex",
              value: "#0000004C",
            },
          },
          height: 5,
          width: 5,
        },
        margin: {
          bottom: 0,
          leading: 0,
          top: 8,
          trailing: 0,
        },
        padding: {
          bottom: 8,
          leading: 8,
          top: 8,
          trailing: 8,
        },
        position: "bottom",
        shadow: null,
        shape: null,
        spacing: 8,
      },
      pages,
    } satisfies CarouselProps,
  });
</script>

<Story
  name="Surface — video background (stacking / z-order)"
  parameters={{
    chromatic: { disableSnapshot: true },
    docs: {
      description: {
        story:
          "**Z-order:** video layer → tinted `::before` → carousel clip (slides + controls). Rounded corners should clip the backdrop; Chromatic skips motion snapshots.",
      },
    },
  }}
  args={{
    background: STORY_BACKGROUND_VIDEO_FILL,
    shape: {
      type: "rectangle",
      corners: {
        bottom_leading: 20,
        bottom_trailing: 20,
        top_leading: 20,
        top_trailing: 20,
      },
    },
    auto_advance: null,
    loop: false,
    initial_page_index: 0,
  }}
/>

<Story
  name="No loop - first page"
  args={{
    loop: false,
    initial_page_index: 0,
    auto_advance: null,
  }}
/>

<Story
  name="No loop - last page"
  args={{
    loop: false,
    initial_page_index: lastPage,
    auto_advance: null,
  }}
/>

<Story
  name="Loop - first page"
  args={{
    loop: true,
    initial_page_index: 0,
    auto_advance: null,
  }}
/>

<Story
  name="Loop - last page"
  args={{
    loop: true,
    initial_page_index: lastPage,
    auto_advance: null,
  }}
/>

<Story
  name="Fancy"
  args={{
    initial_page_index: 0,
    loop: true,
    margin: {
      bottom: 16,
      leading: 16,
      top: 16,
      trailing: 16,
    },
    padding: {
      bottom: 16,
      leading: 0,
      top: 16,
      trailing: 0,
    },
    page_alignment: "top",
    page_control: {
      active: {
        color: {
          light: {
            type: "hex",
            value: "#3fe33fFF",
          },
        },
        height: 16,
        stroke_color: {
          light: {
            type: "hex",
            value: "#20a50bFF",
          },
        },
        stroke_width: 2,
        width: 16,
      },
      background_color: null,
      border: {
        color: {
          light: {
            type: "hex",
            value: "#00000040",
          },
        },
        width: 2,
      },
      default: {
        color: {
          light: {
            type: "hex",
            value: "#00000040",
          },
        },
        height: 16,
        stroke_color: {
          light: {
            type: "hex",
            value: "#000000FF",
          },
        },
        stroke_width: 1,
        width: 16,
      },
      margin: {
        bottom: 16,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      padding: {
        bottom: 16,
        leading: 16,
        top: 16,
        trailing: 16,
      },
      position: "bottom",
      shadow: {
        color: {
          light: {
            type: "hex",
            value: "#00000040",
          },
        },
        radius: 8,
        x: 4,
        y: 4,
      },
      shape: {
        corners: null,
        type: "pill",
      },
      spacing: 16,
    },
    page_peek: 32,
    page_spacing: 8,
    pages: [
      {
        background: {
          type: "color",
          value: {
            light: {
              degrees: 180,
              points: [
                {
                  color: "#EAEDFB2E",
                  percent: 0,
                },
                {
                  color: "#EAEDFBFF",
                  percent: 100,
                },
              ],
              type: "linear",
            },
          },
        },
        background_color: null,
        badge: {
          alignment: "top",
          stack: {
            background: {
              type: "color",
              value: {
                light: {
                  type: "hex",
                  value: "#11D483FF",
                },
              },
            },
            background_color: {
              light: {
                type: "hex",
                value: "#11D483FF",
              },
            },
            badge: null,
            border: null,
            components: [
              {
                background_color: null,
                color: {
                  light: {
                    type: "hex",
                    value: "#000000",
                  },
                },
                font_name: null,
                font_size: 14,
                font_weight: "regular",
                font_weight_int: 400,
                horizontal_alignment: "center",
                id: "cKjC2eAb7t",
                margin: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                name: "",
                padding: {
                  bottom: 0,
                  leading: 0,
                  top: 0,
                  trailing: 0,
                },
                size: {
                  height: {
                    type: "fit",
                    value: null,
                  },
                  width: {
                    type: "fit",
                    value: null,
                  },
                },
                text_lid: "badge",
                type: "text",
              },
            ],
            dimension: {
              alignment: "center",
              distribution: "center",
              type: "vertical",
            },
            id: "CprMWfZc-p",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 4,
              leading: 8,
              top: 4,
              trailing: 8,
            },
            shadow: null,
            shape: {
              corners: {
                bottom_leading: 0,
                bottom_trailing: 0,
                top_leading: 0,
                top_trailing: 0,
              },
              type: "pill",
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            spacing: 0,
            type: "stack",
          },
          style: "overlay",
        },
        border: {
          color: {
            light: {
              type: "hex",
              value: "#cccccc",
            },
          },
          width: 1,
        },
        components: [
          {
            background_color: null,
            color: {
              light: {
                type: "hex",
                value: "#000000",
              },
            },
            font_name: null,
            font_size: 14,
            font_weight: "regular",
            font_weight_int: 400,
            horizontal_alignment: "leading",
            id: "Ux4DRHWPn2",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            text_lid: "first",
            type: "text",
          },
        ],
        dimension: {
          alignment: "center",
          distribution: "center",
          type: "horizontal",
        },
        id: "AQKHrLfmTu",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "Page 1",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: {
          color: {
            light: {
              type: "hex",
              value: "#000000FF",
            },
          },
          radius: 8,
          x: 4,
          y: 4,
        },
        shape: {
          corners: {
            bottom_leading: 16,
            bottom_trailing: 16,
            top_leading: 16,
            top_trailing: 16,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fixed",
            value: 160,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: {
          type: "color",
          value: {
            light: {
              degrees: 180,
              points: [
                {
                  color: "#E1F9EF2E",
                  percent: 0,
                },
                {
                  color: "#E1F9EFFF",
                  percent: 100,
                },
              ],
              type: "linear",
            },
          },
        },
        background_color: null,
        badge: null,
        border: {
          color: {
            light: {
              type: "hex",
              value: "#cccccc",
            },
          },
          width: 1,
        },
        components: [
          {
            background_color: null,
            color: {
              light: {
                type: "hex",
                value: "#000000",
              },
            },
            font_name: null,
            font_size: 14,
            font_weight: "regular",
            font_weight_int: 400,
            horizontal_alignment: "leading",
            id: "xQZSdZKraB",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            text_lid: "second",
            type: "text",
          },
        ],
        dimension: {
          alignment: "center",
          distribution: "center",
          type: "horizontal",
        },
        id: "0WDm5elVWc",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "Page 2",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 16,
            bottom_trailing: 16,
            top_leading: 16,
            top_trailing: 16,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fixed",
            value: 120,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
      {
        background: {
          type: "color",
          value: {
            light: {
              degrees: 180,
              points: [
                {
                  color: "#FDE7E72E",
                  percent: 0,
                },
                {
                  color: "#FDE7E7FF",
                  percent: 100,
                },
              ],
              type: "linear",
            },
          },
        },
        background_color: null,
        badge: null,
        border: {
          color: {
            light: {
              type: "hex",
              value: "#cccccc",
            },
          },
          width: 1,
        },
        components: [
          {
            background_color: null,
            color: {
              light: {
                type: "hex",
                value: "#000000",
              },
            },
            font_name: null,
            font_size: 14,
            font_weight: "regular",
            font_weight_int: 400,
            horizontal_alignment: "leading",
            id: "wqvw-od0-k",
            margin: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            name: "",
            padding: {
              bottom: 0,
              leading: 0,
              top: 0,
              trailing: 0,
            },
            size: {
              height: {
                type: "fit",
                value: null,
              },
              width: {
                type: "fit",
                value: null,
              },
            },
            text_lid: "third",
            type: "text",
          },
        ],
        dimension: {
          alignment: "center",
          distribution: "center",
          type: "horizontal",
        },
        id: "ce6DWrkJtQ",
        margin: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        name: "Page 3",
        padding: {
          bottom: 0,
          leading: 0,
          top: 0,
          trailing: 0,
        },
        shadow: null,
        shape: {
          corners: {
            bottom_leading: 16,
            bottom_trailing: 16,
            top_leading: 16,
            top_trailing: 16,
          },
          type: "rectangle",
        },
        size: {
          height: {
            type: "fixed",
            value: 80,
          },
          width: {
            type: "fill",
            value: null,
          },
        },
        spacing: 0,
        type: "stack",
      },
    ],
  }}
/>

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