import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'

import CpTooltip from '@/components/CpTooltip.vue'

const tooltipColors = ['accent', 'neutral'] as const
const tooltipPlacements = ['top', 'right', 'bottom', 'left'] as const

const meta = {
  title: 'Atoms/CpTooltip',
  component: CpTooltip,
  argTypes: {
    content: {
      control: 'text',
      description: 'The content to display in the tooltip',
    },
    subcontent: {
      control: 'text',
      description: 'Optional secondary content',
    },
    color: {
      control: 'select',
      options: tooltipColors,
      description: 'The color variant',
    },
    placement: {
      control: 'select',
      options: tooltipPlacements,
      description: 'The placement of the tooltip',
    },
    distance: {
      control: 'number',
      description: 'The distance between the tooltip and the target',
    },
  },
} satisfies Meta<typeof CpTooltip>

export default meta
type Story = StoryObj<typeof meta>

const paddedRender = (args: Args) => ({
  components: { CpTooltip },
  setup() {
    return { args }
  },
  template: `
    <div style="padding: 100px; text-align: center;">
      <CpTooltip v-bind="args">
        <button>Hover me</button>
      </CpTooltip>
    </div>
  `,
})

/**
 * Default tooltip. Hover the trigger to reveal it. Use the controls to
 * experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    content: 'Tooltip content',
    placement: 'top',
    distance: 8,
  },
  render: paddedRender,
}

/* -------------------------------------------------------------------------- */
/* Placements                                                                 */
/* -------------------------------------------------------------------------- */

/**
 * All four placements rendered on one page. Tooltips flip automatically if
 * they don't fit on the chosen side.
 */
export const Placements: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpTooltip },
    setup() {
      return { tooltipPlacements }
    },
    template: `
      <div style="display: flex; gap: 32px; padding: 100px; justify-content: center; flex-wrap: wrap;">
        <div v-for="placement in tooltipPlacements" :key="placement">
          <CpTooltip :content="placement + ' tooltip'" :placement="placement">
            <button>{{ placement }}</button>
          </CpTooltip>
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Content                                                                    */
/* -------------------------------------------------------------------------- */

/**
 * Pass rich HTML content via the `#content` slot — perfect for links,
 * formatting or small compositions.
 */
export const WithHTMLContent: Story = {
  args: { placement: 'top' },
  render: (args: Args) => ({
    components: { CpTooltip },
    setup() {
      return { args }
    },
    template: `
      <div style="padding: 100px; text-align: center;">
        <CpTooltip v-bind="args">
          <button type="button">Trigger HTML content</button>
          <template #content>
            <p>HTML <b>Content</b> and <u>underlined</u></p>
          </template>
        </CpTooltip>
      </div>
    `,
  }),
}

/**
 * A secondary line of content displayed below the main content. Can be
 * provided as a `subcontent` prop or through the `#subcontent` slot.
 */
export const WithSubcontent: Story = {
  args: {
    content: 'Main content',
    subcontent: 'Optional subcontent via prop',
    placement: 'top',
  },
  render: (args: Args) => ({
    components: { CpTooltip },
    setup() {
      return { args }
    },
    template: `
      <div style="display: flex; gap: 48px; padding: 100px; justify-content: center; flex-wrap: wrap;">
        <div>
          <CpTooltip v-bind="args">
            <button type="button">Subcontent via prop</button>
          </CpTooltip>
        </div>
        <div>
          <CpTooltip :content="args.content" :placement="args.placement">
            <button type="button">Subcontent via slot</button>
            <template #subcontent>
              <p>Optional subcontent via slot, includes <b>HTML</b> <u>tags</u></p>
            </template>
          </CpTooltip>
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* States                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * When `disabled` is `true` the tooltip never appears, even on hover.
 */
export const Disabled: Story = {
  args: { disabled: true },
  render: (args: Args) => ({
    components: { CpTooltip },
    setup() {
      return { args }
    },
    template: `
      <div style="padding: 100px; text-align: center;">
        <CpTooltip v-bind="args" content="You should not see me">
          <div>Disabled trigger</div>
        </CpTooltip>
      </div>
    `,
  }),
}