import type { Meta, StoryObj } from '@storybook/react'
import { Button, TooltipTrigger } from 'react-aria-components'
import { Tooltip } from './Tooltip'

const meta = {
  title: 'Components/Tooltip',
  component: Tooltip,
  args: {
    children: '툴팁 내용',
  },
  argTypes: {
    bgColor: {
      control: 'select',
      options: ['white', 'tertiary'],
    },
  },
} satisfies Meta<typeof Tooltip>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => (
    <TooltipTrigger>
      <Button className="px-4 py-2 bg-primary text-white rounded">마우스를 올려보세요</Button>
      <Tooltip>기본 툴팁 메시지입니다.</Tooltip>
    </TooltipTrigger>
  ),
}

export const WhiteBackground: Story = {
  render: () => (
    <TooltipTrigger>
      <Button className="px-4 py-2 bg-primary text-white rounded">흰색 배경</Button>
      <Tooltip bgColor="white">흰색 배경의 툴팁입니다.</Tooltip>
    </TooltipTrigger>
  ),
}

export const TertiaryBackground: Story = {
  render: () => (
    <TooltipTrigger>
      <Button className="px-4 py-2 bg-primary text-white rounded">Tertiary 배경</Button>
      <Tooltip bgColor="tertiary">Tertiary 배경의 툴팁입니다.</Tooltip>
    </TooltipTrigger>
  ),
}

export const LongContent: Story = {
  render: () => (
    <TooltipTrigger>
      <Button className="px-4 py-2 bg-primary text-white rounded">긴 내용</Button>
      <Tooltip>
        이것은 아주 긴 툴팁 내용입니다. 최대 너비가 200px로 제한되어 있어 자동으로 줄바꿈됩니다.
        스크롤이 필요한 경우 스크롤바가 표시됩니다.
      </Tooltip>
    </TooltipTrigger>
  ),
}

export const MultilineContent: Story = {
  render: () => (
    <TooltipTrigger>
      <Button className="px-4 py-2 bg-primary text-white rounded">여러 줄</Button>
      <Tooltip>{`첫 번째 줄\n두 번째 줄\n세 번째 줄`}</Tooltip>
    </TooltipTrigger>
  ),
}

export const PlacementVariants: Story = {
  render: () => (
    <div className="flex gap-8 p-16">
      <TooltipTrigger>
        <Button className="px-4 py-2 bg-gray-200 rounded">Top (기본)</Button>
        <Tooltip placement="top">위쪽에 표시</Tooltip>
      </TooltipTrigger>
      <TooltipTrigger>
        <Button className="px-4 py-2 bg-gray-200 rounded">Bottom</Button>
        <Tooltip placement="bottom">아래쪽에 표시</Tooltip>
      </TooltipTrigger>
      <TooltipTrigger>
        <Button className="px-4 py-2 bg-gray-200 rounded">Left</Button>
        <Tooltip placement="left">왼쪽에 표시</Tooltip>
      </TooltipTrigger>
      <TooltipTrigger>
        <Button className="px-4 py-2 bg-gray-200 rounded">Right</Button>
        <Tooltip placement="right">오른쪽에 표시</Tooltip>
      </TooltipTrigger>
    </div>
  ),
}

export const AllBackgroundColors: Story = {
  render: () => (
    <div className="flex gap-8 p-8">
      <TooltipTrigger>
        <Button className="px-4 py-2 bg-gray-200 rounded">White</Button>
        <Tooltip bgColor="white">White 배경</Tooltip>
      </TooltipTrigger>
      <TooltipTrigger>
        <Button className="px-4 py-2 bg-gray-200 rounded">Tertiary</Button>
        <Tooltip bgColor="tertiary">Tertiary 배경</Tooltip>
      </TooltipTrigger>
    </div>
  ),
}