import type { Meta, StoryObj } from '@storybook/react'
import { SvgInformationCircle } from '@chainlink/blocks-icons'
import {
  ResponsiveTooltip,
  ResponsiveTooltipTrigger,
  ResponsiveTooltipContent,
} from './ResponsiveTooltip'

const meta = {
  title: 'Blocks/Tooltip/ResponsiveTooltip',
  component: ResponsiveTooltip,
  subcomponents: {
    ResponsiveTooltipTrigger,
    ResponsiveTooltipContent,
  },
  args: {
    defaultOpen: false,
  },
  argTypes: {
    defaultOpen: {
      control: 'boolean',
      description:
        'Opens the tooltip/popover by default in uncontrolled usage.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    open: { table: { disable: true } },
    onOpenChange: { table: { disable: true } },
  },
} satisfies Meta<typeof ResponsiveTooltip>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => (
    <div className="flex justify-center py-10">
      <ResponsiveTooltip {...args}>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent>
          Fees cover the gas costs of completing transactions on the destination
          chain and the fees paid to CCIP service providers.
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>
    </div>
  ),
}

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

      <ResponsiveTooltip open>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent side="top">
          Tooltip on Top
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>

      <ResponsiveTooltip open>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent side="bottom">
          Tooltip on Bottom
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>

      <ResponsiveTooltip open>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent side="right">
          Tooltip on Right
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>
    </div>
  ),
}

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

      <ResponsiveTooltip open>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent side="top" align="center">
          Align Center
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>

      <ResponsiveTooltip open>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent side="bottom" align="start">
          Align Start
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>
    </div>
  ),
}

export const NoArrow: Story = {
  render: (_args) => (
    <div className="flex justify-center">
      <ResponsiveTooltip open>
        <ResponsiveTooltipTrigger>
          <SvgInformationCircle color="muted" />
        </ResponsiveTooltipTrigger>
        <ResponsiveTooltipContent hideArrow>
          Tooltip without Arrow
        </ResponsiveTooltipContent>
      </ResponsiveTooltip>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Set hideArrow when the tooltip content should appear as a plain floating panel.',
      },
    },
  },
}