import { Text } from "./index";

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

const meta: Meta<typeof Text> = {
  title: "Components/Text",
  component: Text,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A flexible text component with multiple typography variants and semantic elements.",
      },
    },
  },
  argTypes: {
    as: {
      control: { type: "select" },
      options: [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "p",
        "span",
        "div",
        "label",
      ],
      description: "HTML element to render",
    },
    className: {
      control: { type: "text" },
      description:
        "Additional CSS classes (use typography classes like body1, heading1, etc.)",
    },
    children: {
      control: { type: "text" },
      description: "Text content",
    },
  },
  args: {
    children: "Sample text content",
    className: "body1",
    as: "p",
  },
};

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

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

// Headings
export const Headings: Story = {
  render: () => (
    <div className="space-y-4">
      <Text as="h1" className="heading1">
        Heading 1
      </Text>
      <Text as="h2" className="heading2">
        Heading 2
      </Text>
      <Text as="h3" className="heading3">
        Heading 3
      </Text>
      <Text as="h4" className="heading4">
        Heading 4
      </Text>
      <Text as="h5" className="heading5">
        Heading 5
      </Text>
      <Text as="h6" className="heading6">
        Heading 6
      </Text>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "All heading variants with appropriate semantic HTML elements.",
      },
    },
  },
};

// Subheadings
export const Subheadings: Story = {
  render: () => (
    <div className="space-y-4">
      <Text className="subheading1">Subheading 1</Text>
      <Text className="subheading2">Subheading 2</Text>
      <Text className="subheading3">Subheading 3</Text>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "All subheading variants.",
      },
    },
  },
};

// Body text
export const BodyText: Story = {
  render: () => (
    <div className="space-y-4">
      <Text className="body1">
        Body 1 text is used for the main content of your application. It
        provides good readability and is suitable for paragraphs and longer text
        content.
      </Text>
      <Text className="body2">
        Body 2 text is slightly smaller and can be used for secondary content,
        descriptions, or supporting text that doesn't need as much emphasis.
      </Text>
      <Text className="body3">
        Body 3 text is the smallest body variant, perfect for fine print,
        captions, or less important information.
      </Text>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Body text variants for different content hierarchy levels.",
      },
    },
  },
};

// Labels
export const Labels: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <Text as="label" className="body1 mb-2 block">
          Label 1
        </Text>
        <input
          type="text"
          className="rounded border px-3 py-2"
          placeholder="Input with label"
        />
      </div>
      <div>
        <Text as="label" className="body2 mb-2 block">
          Label 2
        </Text>
        <input
          type="text"
          className="rounded border px-3 py-2"
          placeholder="Input with label"
        />
      </div>
      <div>
        <Text as="label" className="body3 mb-2 block">
          Label 3
        </Text>
        <input
          type="text"
          className="rounded border px-3 py-2"
          placeholder="Input with label"
        />
      </div>
      <div>
        <Text as="label" className="footnote mb-2 block">
          Label 4
        </Text>
        <input
          type="text"
          className="rounded border px-3 py-2"
          placeholder="Input with label"
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Label variants commonly used with form inputs.",
      },
    },
  },
};

// Utility text
export const UtilityText: Story = {
  render: () => (
    <div className="space-y-4">
      <Text className="footnote">
        Footnote text is used for additional information, citations, or less
        important details.
      </Text>
      <Text className="micro">
        Micro text is the smallest text variant, perfect for timestamps, version
        numbers, or other very small information.
      </Text>
      <Text className="unstyled">
        Unstyled text inherits all styling from its parent element.
      </Text>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Utility text variants for specific use cases.",
      },
    },
  },
};

// Semantic elements
export const SemanticElements: Story = {
  render: () => (
    <div className="space-y-4">
      <Text as="h1" className="heading1">
        Main Page Title
      </Text>
      <Text as="h2" className="heading2">
        Page Description
      </Text>
      <Text as="p" className="body1">
        This is a paragraph element that provides the main content of the page.
        It demonstrates how the Text component can be used with semantic HTML
        elements.
      </Text>
      <Text as="label" className="body1 block">
        Form Label
      </Text>
      <Text as="span" className="footnote">
        Additional information
      </Text>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Examples of using different semantic HTML elements with the Text component.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-4xl space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Headings</h3>
        <div className="space-y-2">
          <Text as="h1" className="heading1">
            Heading 1
          </Text>
          <Text as="h2" className="heading2">
            Heading 2
          </Text>
          <Text as="h3" className="heading3">
            Heading 3
          </Text>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Body Text</h3>
        <div className="space-y-2">
          <Text as="p" className="body1">
            Body 1 - Main content text
          </Text>
          <Text as="p" className="body2">
            Body 2 - Secondary content text
          </Text>
          <Text as="p" className="body3">
            Body 3 - Smaller content text
          </Text>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Labels</h3>
        <div className="space-y-2">
          <Text as="label" className="body1">
            Label 1
          </Text>
          <Text as="label" className="body2">
            Label 2
          </Text>
          <Text as="label" className="body3">
            Label 3
          </Text>
          <Text className="footnote">Label 4</Text>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Utility</h3>
        <div className="space-y-2">
          <Text className="footnote">Footnote text</Text>
          <Text className="micro">Micro text</Text>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Complete showcase of all text variants in organized sections.",
      },
    },
  },
};