import type { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { Button } from "../../action/button"
import { Tooltip } from "./Tooltip"

/**
 * A tooltip component that displays additional information on hover.
 *
 * ## Props
 * - `content`: ReactNode - The content to display in the tooltip (required)
 * - `delayDuration`: number - Delay before showing the tooltip (default: 700)
 * - `side`: "top" | "right" | "bottom" | "left" (default: "top")
 * - `sideOffset`: number - Distance from the trigger element (default: 5)
 * - `align`: "start" | "center" | "end" (default: "center")
 * - `alignOffset`: number - Offset from the alignment edge (default: 0)
 * - `open`: boolean - Controlled open state
 * - `defaultOpen`: boolean - Default open state
 * - `width`: string - Width of the tooltip
 * - `minWidth`: string - Minimum width of the tooltip
 * - `maxWidth`: string - Maximum width of the tooltip
 */
const meta = {
  title: "base/communication/Tooltip",
  component: Tooltip,
  tags: ["autodocs"],
  args: {
    content: "This is a tooltip",
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Tooltip>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic tooltip with default settings.
 */
export const Default: Story = {
  render: () => (
    <Tooltip content="This is a basic tooltip">
      <Button>Hover me</Button>
    </Tooltip>
  ),
}

/**
 * Tooltip with different content types.
 */
export const ContentTypes: Story = {
  render: () => (
    <div className="flex gap-4">
      <Tooltip content="Simple text tooltip">
        <Button variant="solid">Text</Button>
      </Tooltip>

      <Tooltip content="Tooltip with emoji 🎉">
        <Button variant="soft" color="green">
          Emoji
        </Button>
      </Tooltip>

      <Tooltip content="This is a longer tooltip that might wrap to multiple lines">
        <Button variant="outline" color="purple">
          Long Text
        </Button>
      </Tooltip>
    </div>
  ),
}

/**
 * Tooltip with different positions.
 */
export const Positions: Story = {
  render: () => (
    <div className="grid grid-cols-3 gap-8 items-center justify-items-center">
      <Tooltip content="Top tooltip" side="top">
        <Button variant="solid" color="blue">
          Top
        </Button>
      </Tooltip>

      <Tooltip content="Right tooltip" side="right">
        <Button variant="solid" color="green">
          Right
        </Button>
      </Tooltip>

      <Tooltip content="Bottom tooltip" side="bottom">
        <Button variant="solid" color="purple">
          Bottom
        </Button>
      </Tooltip>

      <Tooltip content="Left tooltip" side="left">
        <Button variant="solid" color="red">
          Left
        </Button>
      </Tooltip>
    </div>
  ),
}

/**
 * Tooltip with different alignments.
 */
export const Alignments: Story = {
  render: () => (
    <div className="flex gap-4">
      <Tooltip content="Start aligned" align="start">
        <Button variant="solid" color="blue">
          Start
        </Button>
      </Tooltip>

      <Tooltip content="Center aligned" align="center">
        <Button variant="solid" color="green">
          Center
        </Button>
      </Tooltip>

      <Tooltip content="End aligned" align="end">
        <Button variant="solid" color="purple">
          End
        </Button>
      </Tooltip>
    </div>
  ),
}

/**
 * Tooltip with different delay durations.
 */
export const DelayDurations: Story = {
  render: () => (
    <div className="flex gap-4">
      <Tooltip content="Fast tooltip (200ms)" delayDuration={200}>
        <Button variant="solid" color="blue">
          Fast
        </Button>
      </Tooltip>

      <Tooltip content="Default tooltip (700ms)" delayDuration={700}>
        <Button variant="solid" color="green">
          Default
        </Button>
      </Tooltip>

      <Tooltip content="Slow tooltip (1500ms)" delayDuration={1500}>
        <Button variant="solid" color="purple">
          Slow
        </Button>
      </Tooltip>
    </div>
  ),
}

/**
 * Tooltip with different trigger elements.
 */
export const TriggerElements: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <Tooltip content="Button tooltip">
          <Button variant="solid">Button</Button>
        </Tooltip>
      </div>

      <div>
        <Tooltip content="Link tooltip">
          <a href="/example" className="text-blue-600 hover:text-blue-800 underline">
            Link
          </a>
        </Tooltip>
      </div>

      <div>
        <Tooltip content="Icon tooltip">
          <span className="inline-block p-2 bg-gray-200 rounded cursor-help">ℹ️</span>
        </Tooltip>
      </div>

      <div>
        <Tooltip content="Input tooltip">
          <input
            type="text"
            placeholder="Hover me"
            className="px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </Tooltip>
      </div>
    </div>
  ),
}

/**
 * Tooltip with custom styling.
 */
export const CustomStyling: Story = {
  render: () => (
    <div className="flex gap-4">
      <Tooltip content="Success tooltip">
        <Button variant="solid" color="green">
          Success
        </Button>
      </Tooltip>

      <Tooltip content="Warning tooltip">
        <Button variant="solid" color="yellow">
          Warning
        </Button>
      </Tooltip>

      <Tooltip content="Error tooltip">
        <Button variant="solid" color="red">
          Error
        </Button>
      </Tooltip>

      <Tooltip content="Info tooltip">
        <Button variant="solid" color="blue">
          Info
        </Button>
      </Tooltip>
    </div>
  ),
}

/**
 * Tooltip with offset adjustments.
 */
export const WithOffsets: Story = {
  render: () => (
    <div className="flex gap-4">
      <Tooltip content="Close tooltip" sideOffset={2}>
        <Button variant="solid" color="blue">
          Close
        </Button>
      </Tooltip>

      <Tooltip content="Far tooltip" sideOffset={20}>
        <Button variant="solid" color="green">
          Far
        </Button>
      </Tooltip>

      <Tooltip content="Aligned tooltip" alignOffset={10}>
        <Button variant="solid" color="purple">
          Aligned
        </Button>
      </Tooltip>
    </div>
  ),
}

/**
 * Tooltip with width constraints.
 */
export const WidthConstraints: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <Tooltip content="Narrow tooltip" width="100px">
          <Button variant="solid" color="blue">
            Narrow
          </Button>
        </Tooltip>
      </div>

      <div>
        <Tooltip content="Wide tooltip with minimum width" minWidth="200px">
          <Button variant="solid" color="green">
            Min Width
          </Button>
        </Tooltip>
      </div>

      <div>
        <Tooltip
          content="This is a very long tooltip that will be constrained by the maximum width"
          maxWidth="150px"
        >
          <Button variant="solid" color="purple">
            Max Width
          </Button>
        </Tooltip>
      </div>
    </div>
  ),
}

/**
 * Tooltip with controlled state.
 */
export const Controlled: Story = {
  render: () => {
    const [open, setOpen] = React.useState(false)

    return (
      <div className="space-y-4">
        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => setOpen(true)}
            className="px-3 py-1 bg-blue-600 text-white rounded text-sm"
          >
            Show Tooltip
          </button>
          <button
            type="button"
            onClick={() => setOpen(false)}
            className="px-3 py-1 bg-gray-600 text-white rounded text-sm"
          >
            Hide Tooltip
          </button>
        </div>

        <Tooltip content="Controlled tooltip" open={open} onOpenChange={setOpen}>
          <Button variant="solid" color="orange">
            Controlled
          </Button>
        </Tooltip>
      </div>
    )
  },
}