import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { themes } from "../../../.storybook/preview"
import { Breadcrumbs } from "./Breadcrumbs"
import { BreadcrumbsSkeleton } from "./BreadcrumbsSkeleton"
import { Breadcrumb } from "./types"
import { config } from "./variants"

const meta: Meta<typeof Breadcrumbs> = {
  title: "Core Components/Breadcrumbs",
  component: Breadcrumbs,
  argTypes: {
    breadcrumbs: {
      table: {
        type: { summary: "Breadcrumb[]" },
      },
    },
    color: {
      control: "select",
      options: Object.keys(config.variants.color),
      table: {
        defaultValue: { summary: config.defaultVariants.color },
        type: { summary: Object.keys(config.variants.color).join(" | ") },
      },
      description: "Sets the background color of the breadcrumbs component.",
    },
    size: {
      control: "select",
      options: Object.keys(config.variants.size),
      table: {
        defaultValue: { summary: config.defaultVariants.size },
        type: { summary: Object.keys(config.variants.size).join(" | ") },
      },
      description:
        "Sets the maximum width of the breadcrumbs component. The breadcrumbs will be centered.",
    },
    isThemed: {
      control: "select",
      options: Object.keys(config.variants.isThemed),
      table: {
        defaultValue: { summary: config.defaultVariants.isThemed.toString() },
        type: { summary: Object.keys(config.variants.isThemed).join(" | ") },
      },
      description:
        "Applies theming styles for mobile and/or desktop based on the selected option. This should only be used if the hotel theme is something else than Scandic.",
    },
  },
}

export default meta

type Story = StoryObj<typeof Breadcrumbs>

const sampleBreadcrumbs: Breadcrumb[] = [
  { uid: "home", title: "Home", href: "/" },
  { uid: "category", title: "Category", href: "/category" },
  { uid: "subcategory", title: "Subcategory", href: "/category/subcategory" },
  {
    uid: "subcategory2",
    title: "Subcategory 2",
    href: "/category/subcategory",
  },
  {
    uid: "current-page",
    title: "Current page",
    href: "/category/subcategory/current-page",
  },
]

export const Default: Story = {
  args: {
    breadcrumbs: sampleBreadcrumbs,
  },
}

export const Transparent: Story = {
  args: {
    ...Default.args,
    color: "transparent",
  },
}

export const BackgroundPrimary: Story = {
  args: {
    ...Default.args,
    color: "Background/Primary",
  },
}

export const SurfaceSecondaryDefault: Story = {
  args: {
    ...Default.args,
    color: "Surface/Secondary/Default",
  },
}

export const Themed: Story = {
  args: {
    ...Default.args,
    isThemed: true,
  },
  decorators: [
    (Story) => (
      <>
        {Object.entries(themes.themes)
          .filter(([key]) => key !== "Scandic")
          .map(([key, value], ix) => {
            return (
              <div key={ix} className={value} style={{ padding: "1em 0" }}>
                <h2 style={{ paddingBottom: "0.5em" }}>{key}</h2>
                <Story />
              </div>
            )
          })}
      </>
    ),
  ],
}

export const Skeleton: Story = {
  render: () => <BreadcrumbsSkeleton />,
}

export const MobileView: Story = {
  globals: {
    viewport: { value: "mobile1", isRotated: false },
  },
  parameters: {
    docs: {
      description: {
        story:
          "To view the mobile behavior of the Breadcrumbs component, open the story in story viewer and adjust the browser's viewport.",
      },
    },
  },
  args: {
    ...Default.args,
  },
}