import {
  ALL_ARTICLES,
  ARTICLES_WITH_COVERS,
  ARTICLES_WITHOUT_COVERS,
  CATEGORY_OPTIONS,
} from "./BlogGrid.stories.mocks";
import { BlogGrid } from "./index";
import type { BlogGridProps } from "./types";

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

/* ------------
   ArgTypes
--------------- */

const argTypes: ArgTypes<BlogGridProps> = {
  paginatedArticles: {
    control: { type: "object" as const },
    description: "Array of blog articles to display on the current page",
  },
  totalArticles: {
    control: { type: "number" as const },
    description: "Total number of articles across all pages",
  },
  currentPage: {
    control: { type: "number" as const },
    description: "Current active page number",
  },
  totalPages: {
    control: { type: "number" as const },
    description: "Total number of pages",
  },
  selectedCategory: {
    control: { type: "object" as const },
    description: "Currently selected category option",
  },
  categoryOptions: {
    control: { type: "object" as const },
    description: "Available category filter options",
  },
};

/* --------
   Meta
----------- */

const meta: Meta<typeof BlogGrid> = {
  title: "Contentful Blocks/BlogGrid",
  component: BlogGrid,
  tags: ["autodocs"],
  argTypes,
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A paginated, filterable grid of blog article cards with a category dropdown, article count summary, and pagination controls.",
      },
    },
  },
  args: {
    paginatedArticles: ARTICLES_WITH_COVERS,
    totalArticles: ALL_ARTICLES.length,
    currentPage: 1,
    totalPages: 2,
    selectedCategory: CATEGORY_OPTIONS[0],
    categoryOptions: CATEGORY_OPTIONS,
  },
};

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

/* --------
   Stories
----------- */

export const Default: Story = {};

export const WithPagination: Story = {
  args: {
    paginatedArticles: ARTICLES_WITH_COVERS,
    totalArticles: 18,
    currentPage: 2,
    totalPages: 3,
  },
};

export const SinglePage: Story = {
  args: {
    paginatedArticles: ARTICLES_WITH_COVERS,
    totalArticles: 6,
    currentPage: 1,
    totalPages: 1,
  },
};

export const EmptyState: Story = {
  args: {
    paginatedArticles: [],
    totalArticles: 9,
    currentPage: 1,
    totalPages: 1,
    selectedCategory: CATEGORY_OPTIONS[1],
  },
};

export const CategoryFilterActive: Story = {
  args: {
    paginatedArticles: ALL_ARTICLES.filter(a => a.category === "Technology"),
    totalArticles: 4,
    currentPage: 1,
    totalPages: 1,
    selectedCategory: CATEGORY_OPTIONS[1],
  },
};

export const WithCoverImages: Story = {
  args: {
    paginatedArticles: ARTICLES_WITH_COVERS,
    totalArticles: 6,
    currentPage: 1,
    totalPages: 1,
  },
};

export const WithoutCoverImages: Story = {
  args: {
    paginatedArticles: ARTICLES_WITHOUT_COVERS,
    totalArticles: 3,
    currentPage: 1,
    totalPages: 1,
  },
};

export const MixedCoverImages: Story = {
  args: {
    paginatedArticles: [
      ...ARTICLES_WITH_COVERS.slice(4),
      ...ARTICLES_WITHOUT_COVERS,
    ],
    totalArticles: 5,
    currentPage: 1,
    totalPages: 1,
  },
};

export const SingleArticle: Story = {
  args: {
    paginatedArticles: [ARTICLES_WITH_COVERS[0]],
    totalArticles: 1,
    currentPage: 1,
    totalPages: 1,
  },
};