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

/**
 * Our tooltip directive uses `@angular/cdk/overlay` overlay service `Overlay`,
 * a service provided by Angular CDK that helps manage portals
 * https://material.angular.io/cdk/overlay/overview. For the directive to work
 * make sure to import `OverlayModule` to enable browser animations (see. Getting started)
 */
const meta: Meta<TooltipComponent> = {
  title: 'Components/Tooltip/Tooltip Directive',
  id: 'tooltip-directives',
  component: TooltipComponent,
  decorators: [
    applicationConfig({
      providers: [provideAnimations()]
    }),
    moduleMetadata({
      imports: [TooltipDirective, ButtonComponent, LinkComponent]
    })
  ],
  parameters: {
    docs: {
      imports: [TooltipComponent, TooltipDirective]
    }
  },
  args: {
    label: 'Tooltip label'
  }
};

export default meta;

type Story = StoryObj<TooltipComponent>;

export const tooltipDirective: Story = {
  render: (args) => {
    const options = {
      label: args.label,
      placement: args.placement,
      arrowPlacement: args.arrowPlacement,
      hasArrow: args.hasArrow,
      isAnimated: args.isAnimated,
      tooltipId: 'tooltip-id-top'
    };

    const bottomOptions = {
      ...options,
      placement: 'bottom',
      tooltipId: 'tooltip-id-bottom'
    };

    const leftOptions = {
      ...options,
      placement: 'left',
      tooltipId: 'tooltip-id-left'
    };

    const rightOptions = {
      ...options,
      placement: 'right',
      tooltipId: 'tooltip-id-right'
    };

    const customOptions = {
      ...options,
      tooltipId: 'tooltip-id-custom'
    };

    return {
      props: {
        ...args,
        options,
        bottomOptions,
        leftOptions,
        rightOptions,
        customOptions
      },
      parameters: {},
      template: `
       <div
            style="position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px">
          <nj-button njTooltip
            [tooltipOptions]="options">
                  Button
          </nj-button>

          <nj-button njTooltip
            [tooltipOptions]="bottomOptions">
                  Bottom
          </nj-button>

          <nj-button njTooltip
            [tooltipOptions]="leftOptions">
                  Left
          </nj-button>

          <nj-button njTooltip
            [tooltipOptions]="rightOptions">
                  Right
          </nj-button>

          <nj-button njTooltip
            [tooltipOptions]="customOptions" [tooltipCustomContent]="customContentTooltip">
                  Custom Content
          </nj-button>

          <ng-template #customContentTooltip>
            <span>This a <b>tooltip</b> with custom <nj-link variant="inverse">content</nj-link></span>
          </ng-template>
        </div>
    `
    };
  }
};

export const TooltipInverseDirective: Story = {
  decorators: [
    withContrastedVariant({
      stateByProps: () => 'inverse'
    })
  ],
  render: (args) => {
    const options = {
      label: args.label,
      placement: args.placement,
      arrowPlacement: args.arrowPlacement,
      hasArrow: args.hasArrow,
      isAnimated: args.isAnimated,
      isInverse: true,
      tooltipId: 'tooltip-id-top'
    };

    const bottomOptions = {
      ...options,
      placement: 'bottom',
      tooltipId: 'tooltip-id-bottom'
    };

    const leftOptions = {
      ...options,
      placement: 'left',
      tooltipId: 'tooltip-id-left'
    };

    const rightOptions = {
      ...options,
      placement: 'right',
      tooltipId: 'tooltip-id-right'
    };

    const customOptions = {
      ...options,
      placement: 'right',
      tooltipId: 'tooltip-id-custom'
    };

    return {
      props: {
        ...args,
        options,
        bottomOptions,
        leftOptions,
        rightOptions,
        customOptions
      },
      template: `
     <div
       style="position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; padding: 100px">
          <nj-button variant="inverse" njTooltip
            [tooltipOptions]="options">
                  Button
          </nj-button>

          <nj-button variant="inverse" njTooltip
            [tooltipOptions]="bottomOptions">
                  Bottom
          </nj-button>

          <nj-button variant="inverse" njTooltip
            [tooltipOptions]="leftOptions">
                  Left
          </nj-button>

          <nj-button variant="inverse" njTooltip
            [tooltipOptions]="rightOptions">
                  Right
          </nj-button>

          <nj-button variant="inverse" njTooltip
            [tooltipOptions]="customOptions" [tooltipCustomContent]="customContentTooltip">
                  Custom Content
          </nj-button>

          <ng-template #customContentTooltip>
            <span>This a <b>tooltip</b> with custom <nj-link>content</nj-link></span>
          </ng-template>
      </div>
    `
    };
  }
};