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

import { RTETypeEnum } from "../JsonToHtml/types/rte/enums"
import type { RTENode } from "../JsonToHtml/types/rte/node"
import { UspCard } from "./UspCard"
import { USP_ICON_NAMES } from "./utils"

const DEFAULT_ARGS = {
  nodes: [
    {
      uid: "paragraph",
      attrs: { type: "asset" },
      type: RTETypeEnum.p,
      children: [
        {
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae neque non ipsum efficitur hendrerit at ut nulla.",
        },
      ],
    },
  ] satisfies RTENode[],
  embeds: [],
}

const meta: Meta<typeof UspCard> = {
  title: "Core Components/Cards/UspCard",
  parameters: {
    docs: {
      description: {
        component:
          "The card itself does not have a maximum width, but it will adapt to the width of its container. The card should be used together with other usp cards. It is recommended to use the UspCard inside a grid or a container with a set maximum width for best results.",
      },
    },
  },
  component: UspCard,
  argTypes: {
    iconName: {
      control: "select",
      options: USP_ICON_NAMES,
      table: {
        type: {
          summary: USP_ICON_NAMES.join(" | "),
        },
        defaultValue: { summary: "Snowflake" },
      },
    },
    embeds: {
      control: "object",
      description:
        "The embeds used by the JsonToHtml component to render rich text content. This data comes from the RTE field in the CMS.",
      table: {
        type: { summary: "Node<Embeds>[]" },
      },
    },
    nodes: {
      control: "object",
      description:
        "The nodes used by the JsonToHtml component to render rich text content. This data comes from the RTE field in the CMS.",
      table: {
        type: { summary: "RTENode[]" },
      },
    },
  },
  args: { ...DEFAULT_ARGS },
  decorators: [
    (Story, context) => {
      const showMultipleStyles = ["multiple cards", "different icons"].some(
        (substring) => context.name.toLowerCase().includes(substring)
      )
      if (showMultipleStyles) {
        return <Story />
      }

      return (
        <div style={{ maxWidth: "400px" }}>
          <Story />
        </div>
      )
    },
  ],
}

export default meta

type Story = StoryObj<typeof UspCard>

export const Default: Story = {
  args: {
    ...meta.args,
  },
}

export const MultipleCards: Story = {
  args: {
    ...meta.args,
  },
  render: (args) => (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: "16px",
        width: "min(800px, 100%)",
        margin: "0 auto",
      }}
    >
      <UspCard {...args} />
      <UspCard {...args} />
      <UspCard {...args} />
    </div>
  ),
}

export const DifferentIcons: Story = {
  args: {
    ...meta.args,
  },
  render: (args) => (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: "16px",
        width: "min(800px, 100%)",
        margin: "0 auto",
      }}
    >
      <UspCard {...args} iconName={USP_ICON_NAMES[0]} />
      <UspCard {...args} iconName={USP_ICON_NAMES[1]} />
      <UspCard {...args} iconName={USP_ICON_NAMES[2]} />
    </div>
  ),
}