import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig, componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
import { withContrastedVariant } from '../../../.storybook/utils/with-contrasted-variant.decorator';
import { TooltipComponent } from '../../public-api';

const meta: Meta<TooltipComponent> = {
  title: 'Components/Tooltip/Tooltip',
  id: 'tooltip',
  component: TooltipComponent,
  decorators: [
    applicationConfig({
      providers: [provideAnimations()]
    }),
    componentWrapperDecorator(
      (story) => `
       <div style="position: relative; height: 100px">${story}</div>
    `
    ),
    withContrastedVariant({
      stateByProps: (props) => {
        return props?.['isInverse'] ? 'inverse' : null;
      }
    })
  ],
  parameters: {
    docs: {
      description: {
        component: 'For the directives to work make sure to enable browser animations (see. Getting started)'
      },
      imports: [TooltipComponent]
    }
  }
};

export default meta;

type Story = StoryObj<TooltipComponent>;

export const Tooltip: Story = {
  args: {
    label: 'Tooltip label'
  }
};

export const TooltipWithContent: Story = {
  render: () => ({
    template: `
      <nj-tooltip>
        <span>This a <b>tooltip</b> with custom <u>content</u></span>
      </nj-tooltip>
    `
  })
};