import { type Meta, type StoryObj, argsToTemplate } from '@storybook/angular';
import { TooltipDirective } from '@isa/ui/tooltip';

const meta: Meta<TooltipDirective> = {
  title: 'UI/Tooltip',
  component: TooltipDirective,
  argTypes: {
    title: { control: 'text' },
    content: { control: 'text' },
    triggerOn: {
      control: 'multi-select',
      options: ['click', 'hover', 'focus'],
    },
    variant: {
      control: { type: 'select' },
      options: ['default', 'warning'],
      description: 'Determines the visual variant of the tooltip',
    },
  },
  args: {
    title: 'Tooltip Title',
    content: 'This is the tooltip content.',
    triggerOn: ['click', 'hover', 'focus'],
    variant: 'default',
  },
  render: (args) => ({
    props: args,
    template: `
      <button uiTooltip ${argsToTemplate(args)} >
        Hover or click me
      </button>
    `,
  }),
};

export default meta;
type Story = StoryObj<TooltipDirective>;

export const Default: Story = {
  args: {
    title: 'Default Tooltip',
    content: 'This is the default tooltip content.',
    triggerOn: ['hover', 'click'],
  },
};

export const Warning: Story = {
  args: {
    title: 'Warning Tooltip',
    content: 'This is a warning message.',
    triggerOn: ['hover', 'click'],
    variant: 'warning',
  },
};
