import type { Meta, StoryObj } from '@storybook/react'
import { SvgInformationCircle } from '@chainlink/blocks-icons'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from './Tooltip'

const meta = {
  title: 'Blocks/Tooltip',
  component: Tooltip,
  subcomponents: {
    TooltipTrigger,
    TooltipContent,
    TooltipArrow,
  },
  decorators: [
    (Story) => (
      <TooltipProvider>
        <Story />
      </TooltipProvider>
    ),
  ],
  argTypes: {
    delayDuration: {
      control: 'number',
      description:
        'Duration from when the mouse enters the trigger until the tooltip opens.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '700' },
      },
    },
  },
  args: {
    delayDuration: 700,
  },
} satisfies Meta<typeof Tooltip>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => (
    <div className="flex justify-center py-10">
      <Tooltip>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent>
          This is a helpful tooltip with useful information.
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </div>
  ),
}

export const AllSides: Story = {
  render: (_args) => (
    <div className="flex items-center justify-center gap-8 p-10">
      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="left">
          Tooltip on Left
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>

      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="top">
          Tooltip on Top
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>

      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="bottom">
          Tooltip on Bottom
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>

      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="right">
          Tooltip on Right
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </div>
  ),
}

export const AllAlignments: Story = {
  render: (_args) => (
    <div className="flex items-center justify-center gap-8 p-10">
      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="bottom" align="end">
          Align End
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>

      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="top" align="center">
          Align Center
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>

      <Tooltip open>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent side="bottom" align="start">
          Align Start
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </div>
  ),
}

export const NoArrow: Story = {
  render: (_args) => (
    <div className="flex justify-center py-10">
      <Tooltip>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent>Tooltip without Arrow</TooltipContent>
      </Tooltip>
    </div>
  ),
}

export const CustomTrigger: Story = {
  render: (_args) => (
    <div className="flex justify-center py-10">
      <Tooltip>
        <TooltipTrigger asChild>
          <button className="rounded bg-primary px-4 py-2 text-primary-foreground hover:bg-primary-hover">
            Hover me
          </button>
        </TooltipTrigger>
        <TooltipContent>
          This tooltip has a custom button trigger
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use asChild on TooltipTrigger when the hover or focus target should be an existing element.',
      },
    },
  },
}

export const LongContent: Story = {
  render: (_args) => (
    <div className="flex justify-center py-10">
      <Tooltip>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent className="max-w-xs">
          This is a longer tooltip that demonstrates how the component handles
          content that spans multiple lines and requires more space to display
          properly.
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Constrain long tooltip content with a max width so supplementary text wraps cleanly.',
      },
    },
  },
}

export const WithDelay: Story = {
  render: (_args) => (
    <div className="flex justify-center gap-8 py-10">
      <Tooltip delayDuration={0}>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent>
          Instant tooltip (0ms delay)
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>

      <Tooltip delayDuration={2000}>
        <TooltipTrigger>
          <SvgInformationCircle color="muted" />
        </TooltipTrigger>
        <TooltipContent>
          Slow tooltip (2s delay)
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use delayDuration when the tooltip should appear faster or slower than the provider default.',
      },
    },
  },
}