import { LOCATION_LIST } from "./FindKinetic.stories.mocks";
import { FindKinetic } from "./index";
import type { FindKineticProps } from "./types";

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

const argTypes: ArgTypes<FindKineticProps> = {
  title: {
    control: { type: "text" },
    description: "Main heading of the block",
  },
  subTitle: {
    control: { type: "text" },
    description: "Sub-heading below the title",
  },
  description: {
    control: { type: "text" },
    description: "Body copy above the list",
  },
  enableHeading: {
    control: { type: "boolean" },
    description: "When true, renders title as h1 and subTitle as h2",
  },
  background: {
    control: { type: "select" },
    options: ["blue", "green", "navy", "purple", "white", "yellow"],
    description: "Background color of the block",
  },
  color: {
    control: { type: "radio" },
    options: ["dark", "light"],
    description: "Text color theme — use light on dark backgrounds",
  },
  image: {
    control: { type: "text" },
    description: "URL of the decorative aside image",
  },
  list: {
    control: { type: "object" },
    description: "Array of { name, code } location objects",
  },
  localPathPrefix: {
    control: { type: "text" },
    description: "Path prefix prepended to each location code link",
  },
  maxWidth: {
    control: { type: "boolean" },
    description: "Constrains inner content to a max-width container",
  },
  columns: {
    control: { type: "select" },
    options: [2, 3, 4],
    description: "Number of columns in the list grid (not yet implemented in component)",
  },
};

const meta: Meta<typeof FindKinetic> = {
  title: "Contentful Blocks/FindKinetic",
  component: FindKinetic,
  tags: ["autodocs"],
  argTypes,
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component: "A location finder block that displays a themed, full-width section with a linked list of serviceable locations. Supports 6 background colour themes (blue, green, navy, purple, white, yellow), light/dark text modes, an optional decorative aside image, and a responsive multi-column location link grid.",
      },
    },
  },
  args: {
    title: "Find Kinetic Near You",
    description: "Check availability in your area.",
    background: "white",
    color: "dark",
    list: LOCATION_LIST,
  },
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

export const BackgroundWhite: Story = {
  args: {
    background: "white",
  },
};

export const BackgroundBlue: Story = {
  args: {
    background: "blue",
  },
};

export const BackgroundGreen: Story = {
  args: {
    background: "green",
  },
};

export const BackgroundNavy: Story = {
  args: {
    background: "navy",
    color: "light",
  },
};

export const BackgroundPurple: Story = {
  args: {
    background: "purple",
    color: "light",
  },
};

export const BackgroundYellow: Story = {
  args: {
    background: "yellow",
  },
};

export const WithImage: Story = {
  args: {
    image:
      "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
  },
};

export const LightText: Story = {
  args: {
    background: "navy",
    color: "light",
  },
};

export const WithoutList: Story = {
  args: {
    list: [],
  },
};