import React from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import { DocsTemplate } from '../../../.storybook'
import Tooltip from './Tooltip'
import Icon from '../Icons/Icon'
import Button from '../Button/Button'

const meta: Meta<typeof Tooltip> = {
  title: 'Components/Tooltip',
  component: Tooltip,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-354&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-354&t=CdMnrLNv0lNFwXr0-0'
          description={
            <span>
              The <code>Tooltip</code> component is a UI element that appears
              when users hover over an element, revealing additional content or
              information. It provides contextual hints, explanations, or
              descriptive text that aids users in better understanding the
              purpose or functionality of the hovered element.{' '}
              <code>Tooltip</code>s are non-intrusive and help enhance the user
              experience by reducing the need for additional clicks or actions
              to access supplementary information.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Integrate the <code>Tooltip</code> component with interactive
              elements like buttons, links, or icons to provide users with more
              context about their actions.
            </span>,
            <span key='second-bullet'>
              Keep the content inside the <code>Tooltip</code> concise, avoiding
              excessive text to maintain clarity and avoid overwhelming the
              user.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Tooltip>

const Template: Story = {
  render: (args) => {
    return <Tooltip {...args} />
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    children: 'Hover Over Me',
    tooltipContent: 'This is the content inside the tooltip',
  },
}

export const PositionTop: Story = {
  ...Template,
  args: {
    children: <Icon icon='info' color='dark-blue' />,
    tooltipContent: 'This is the content inside the tooltip',
    position: 'top',
  },
}

export const PositionRight: Story = {
  ...Template,
  args: {
    children: <Icon icon='info' color='dark-blue' />,
    tooltipContent: 'This is the content inside the tooltip',
    position: 'right',
  },
}

export const PositionBottom: Story = {
  ...Template,
  args: {
    children: <Icon icon='info' color='dark-blue' />,
    tooltipContent: 'This is the content inside the tooltip',
    position: 'bottom',
  },
}

export const PositionLeft: Story = {
  ...Template,
  args: {
    children: <Icon icon='info' color='dark-blue' />,
    tooltipContent: 'This is the content inside the tooltip',
    position: 'left',
  },
}

export const CloseFromTooltipContent: Story = {
  ...Template,
  args: {
    children: 'Hover Over Me',
    tooltipContent: ({ setVisible }) => (
      <div>
        <div>Click the button to close the tooltip</div>
        <Button onClick={() => setVisible(false)}>Close Tooltip</Button>
      </div>
    ),
  },
}

export const CopyToClipboard: Story = {
  ...Template,
  args: {
    children: 'Hover Over Me',
    tooltipContent: 'This is the content inside the tooltip',
    copyToClipboard: true,
  },
}

export const ArrowColor: Story = {
  ...Template,
  args: {
    children: 'Hover Over Me',
    tooltipContent: 'This is the content inside the tooltip',
    arrowColor: 'blue',
  },
}

export const Disabled: Story = {
  ...Template,
  args: {
    children: 'Hover Over Me',
    tooltipContent: 'This is the content inside the tooltip',
    disabled: true,
  },
}

export const Mobile: Story = {
  ...Template,
  args: {
    children: (
      <span>
        Click me in a mobile view to show <code>SideDrawer</code>
      </span>
    ),
    tooltipContent: 'This is the content inside the tooltip',
    useSideDrawerForMobile: true,
  },
}

export const SideDrawerCustomHeader: Story = {
  ...Template,
  args: {
    children: (
      <span>
        Click me in a mobile view to show custom header on{' '}
        <code>SideDrawer</code>
      </span>
    ),
    tooltipContent: 'This is the content inside the tooltip',
    useSideDrawerForMobile: true,
    sideDrawerHeader: 'Custom header on SideDrawer',
  },
}