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

import { ContentCard } from "./ContentCard.tsx"

const IMAGE = {
  id: 1,
  url: "./img/img2.jpg",
  title: "Placeholder image",
  meta: {
    alt: "Placeholder image",
    caption: "This is a placeholder image",
  },
  focalPoint: { x: 50, y: 50 },
  dimensions: { width: 1920, height: 1189, aspectRatio: 1.61 },
}
const IMAGE_2 = {
  ...IMAGE,
  id: 2,
  url: "./img/img3.jpg",
  dimensions: { width: 1920, height: 2880, aspectRatio: 0.67 },
}

const DEFAULT_ARGS = {
  heading: "Lorem ipsum",
  bodyText:
    "Dolor sit amet, consectetur adipiscing elit. Curabitur vitae neque non ipsum efficitur hendrerit at ut nulla.",
  link: {
    href: "#",
    text: "Learn more",
  },
  image: IMAGE,
}

const meta: Meta<typeof ContentCard> = {
  title: "Core Components/Cards/ContentCard",
  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 is mostly used together with other content cards. It is recommended to use the ContentCard inside a grid or a container with a set maximum width for best results.",
      },
    },
  },
  component: ContentCard,
  argTypes: {
    heading: {
      control: "text",
      table: {
        type: { summary: "string" },
      },
    },
    bodyText: {
      control: "text",
      table: {
        type: { summary: "string" },
      },
    },
    promoText: {
      control: "text",
      table: {
        type: { summary: "string | undefined" },
      },
    },
    link: {
      control: "object",
      description:
        "The link of where the card should navigate to. The whole card is clickable.",
      table: {
        type: {
          summary:
            "{href: string, openInNewTab?: boolean, isExternal?: boolean}",
        },
      },
    },
    image: {
      control: "object",
      table: {
        type: {
          summary: "ImageVaultAsset",
          detail:
            "{ id: number, url: string, meta: {alt?: string | null, caption?: string | null}, focalPoint: { x: number, y: number }, dimensions: { width: number, height: number, aspectRatio: number } }",
        },
      },
    },
  },
  args: { ...DEFAULT_ARGS },
  globals: {
    backgrounds: { default: "storybookLight" },
  },
}

export default meta

type Story = StoryObj<typeof ContentCard>

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

export const WithPromoText: Story = {
  args: {
    ...meta.args,
    promoText: "Popular choice",
  },
}

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