import { forwardRef } from "react";
import { Image } from "./index";
import type { ImageComponentProps } from "./types";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Image> = {
  title: "Components/Image",
  component: Image,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A reusable image component that renders a native img by default. Pass the `as` prop with a custom component (e.g. next/image) to use Next.js Image or another image component.",
      },
    },
  },
  argTypes: {
    src: {
      control: { type: "text" },
      description: "Image source URL",
    },
    alt: {
      control: { type: "text" },
      description:
        "Alt text (required for accessibility; use empty string for decorative images)",
    },
    width: {
      control: { type: "number" },
      description: "Image width",
    },
    height: {
      control: { type: "number" },
      description: "Image height",
    },
    className: {
      control: { type: "text" },
      description: "Custom CSS classes",
    },
    loading: {
      control: { type: "select" },
      options: ["lazy", "eager"],
      description: "Loading behavior",
    },
    as: {
      description:
        "Custom component to render (e.g. next/image). In a Next.js app: import Image from 'next/image' then use <Image as={Image} src={...} alt={...} width={...} height={...} />",
      control: false,
    },
  },
  args: {
    src: "https://placehold.co/400x300",
    alt: "Placeholder image",
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {},
};

export const WithDimensions: Story = {
  args: {
    src: "https://placehold.co/300x200",
    alt: "Image with explicit dimensions",
    width: 300,
    height: 200,
  },
};

export const WithClassName: Story = {
  args: {
    src: "https://placehold.co/400x300",
    alt: "Styled image",
    className: "rounded-lg object-cover shadow-md",
    width: 400,
    height: 300,
  },
};

/** Mock component to demonstrate the `as` prop. In a Next.js app, pass next/image: <Image as={NextImage} ... /> */
const MockImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
  (props, ref) => <img ref={ref} {...props} />
);
MockImageComponent.displayName = "MockImageComponent";

export const WithCustomComponent: Story = {
  render: args => (
    <Image
      {...args}
      as={MockImageComponent}
      src="https://placehold.co/350x150"
      alt="Rendered via custom component (as prop)"
      width={350}
      height={150}
      className="rounded border-2 border-dashed border-gray-300"
    />
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Use the `as` prop to render with a custom component. In Next.js, pass the Image component from next/image for optimized images.",
      },
    },
  },
};