import { BrandButton } from "./index";
import type { ButtonCustomProps } from "./types";

import { DocsPage } from "@shared/stories/DocsTemplate";
// eslint-disable-next-line storybook/no-renderer-packages
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<ButtonCustomProps> = {
  title: "Components/BrandButton",
  component: BrandButton,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A branded button component with predefined variants, responsive sizing, and loading states. Designed for consistent brand styling across the application.",
      },
    },
  },
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["primary_brand", "primary_inverse", "secondary"],
      description: "Button styling variant",
    },
    isLoading: {
      control: { type: "boolean" },
      description: "Show loading spinner",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disable the button",
    },
    text: {
      control: { type: "text" },
      description: "Button text content",
    },
    label: {
      control: { type: "text" },
      description: "Button label (displayed above text)",
    },
    fullWidth: {
      control: { type: "boolean" },
      description: "Make button full width",
    },
    size: {
      control: { type: "object" },
      description: "Responsive size configuration",
    },
  },
  args: {
    text: "Button",
    variant: "primary_brand",
    isLoading: false,
    disabled: false,
    fullWidth: false,
  },
};

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

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

// Primary brand variant
export const PrimaryBrand: Story = {
  args: {
    variant: "primary_brand",
    text: "Primary Brand Button",
  },
};

// Primary inverse variant
export const PrimaryInverse: Story = {
  args: {
    variant: "primary_inverse",
    text: "Primary Inverse Button",
  },
};

// Secondary variant
export const Secondary: Story = {
  args: {
    variant: "secondary",
    text: "Secondary Button",
  },
};

// With label
export const WithLabel: Story = {
  args: {
    variant: "primary_brand",
    label: "Label",
    text: "Button Text",
  },
};

// Loading state
export const Loading: Story = {
  args: {
    variant: "primary_brand",
    text: "Loading...",
    isLoading: true,
  },
};

// Disabled state
export const Disabled: Story = {
  args: {
    variant: "primary_brand",
    text: "Disabled Button",
    disabled: true,
  },
};

// Full width
export const FullWidth: Story = {
  args: {
    variant: "primary_brand",
    text: "Full Width Button",
    fullWidth: true,
  },
  render: args => (
    <div className="w-64">
      <BrandButton {...args} />
    </div>
  ),
};

// Responsive sizes
export const ResponsiveSizes: Story = {
  args: {},
  render: () => (
    <div className="space-y-4">
      <div>
        <h4 className="mb-2 text-sm font-medium">
          Base: small, MD: medium, LG: large
        </h4>
        <BrandButton
          variant="primary_brand"
          text="Responsive Button"
          size={{ base: "small", md: "medium", lg: "large" }}
        />
      </div>
      <div>
        <h4 className="mb-2 text-sm font-medium">Base: medium, MD: large</h4>
        <BrandButton
          variant="primary_brand"
          text="Responsive Button"
          size={{ base: "medium", md: "large" }}
        />
      </div>
      <div>
        <h4 className="mb-2 text-sm font-medium">Base only</h4>
        <BrandButton
          variant="primary_brand"
          text="Responsive Button"
          size={{ base: "medium" }}
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "BrandButton supports responsive sizing that adapts to different screen sizes.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  args: {},
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-4 text-lg font-semibold">Variants</h3>
        <div className="flex flex-col gap-3">
          <BrandButton variant="primary_brand" text="Primary Brand" />
          <BrandButton variant="primary_inverse" text="Primary Inverse" />
          <BrandButton variant="secondary" text="Secondary" />
        </div>
      </div>
      <div>
        <h3 className="mb-4 text-lg font-semibold">States</h3>
        <div className="flex flex-col gap-3">
          <BrandButton variant="primary_brand" text="Normal" />
          <BrandButton variant="primary_brand" text="Loading" isLoading />
          <BrandButton variant="primary_brand" text="Disabled" disabled />
        </div>
      </div>
      <div>
        <h3 className="mb-4 text-lg font-semibold">With Label</h3>
        <BrandButton variant="primary_brand" label="Label" text="Button Text" />
      </div>
      <div>
        <h3 className="mb-4 text-lg font-semibold">Full Width</h3>
        <div className="w-64">
          <BrandButton
            variant="primary_brand"
            text="Full Width Button"
            fullWidth
          />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Complete showcase of all BrandButton variants, sizes, and states.",
      },
    },
  },
};