import { spread } from '@open-wc/lit-helpers';
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
import { html } from 'lit';
import { prespread } from '../../.storybook/utilities.js';
import './index.js';
import '../button/index.js';
const { events, args, argTypes } = getStorybookHelpers('w-attention');
const meta = {
    title: 'Overlays/Attention',
    render(args) {
        return html `
      <w-attention ${spread(prespread(args))}>
        <w-button
          ${spread({ id: args.buttonId })}
          variant="secondary"
          slot="target">
          ${args.buttonText}
        </w-button>
        <span slot="message">I'm a message</span>
      </w-attention>
    `;
    },
    args,
    argTypes,
    parameters: {
        actions: {
            handles: events,
        },
    },
};
export default meta;
export const Default = {
    args: {
        placement: 'bottom',
        popover: true,
        flip: true,
    },
    render(args) {
        return html `
      <w-attention ${spread(prespread(args))}>
        <w-button 
          id="popoverTarget" 
          slot="target"
          variant="secondary"
          @click=${(e) => {
            const attention = e.currentTarget.closest('w-attention');
            attention.show = !attention.show;
        }}>
            Click to toggle a popover
        </w-button>
        <span slot="message">I'm a popover</span>
      </w-attention>
    `;
    },
};
export const ToolTip = {
    args: {
        placement: 'right',
        buttonText: 'hover me',
        id: 'tooltip-element',
        tooltip: true,
        flip: true,
        buttonId: 'tooltip-target',
    },
    decorators: [
        (story) => html `
      ${story()}
      <script>
        (() => {
          const button = document.getElementById('tooltip-target');
          const tooltip = document.getElementById('tooltip-element');
          button.addEventListener('mouseenter', () => {
            tooltip.show = true;
          });
          button.addEventListener('mouseleave', () => {
            tooltip.show = false;
          });
          button.addEventListener('focus', () => {
            tooltip.show = true;
          });
          button.addEventListener('blur', () => {
            tooltip.show = false;
          });
        })();
      </script>
    `,
    ],
};
export const Callout = {
    args: {
        buttonText: 'i need a callout',
        class: 'flex items-center gap-8',
        placement: 'right',
        callout: true,
        show: true,
    },
};
export const Highlight = {
    args: {
        buttonId: 'highlight-target1',
        id: 'highlight-message',
        buttonText: `I'm highlighted`,
        placement: 'right',
        highlight: true,
        flip: true,
    },
    decorators: [
        (story) => html `
      ${story()}
      <script>
        (() => {
          const button = document.getElementById('highlight-target1');
          const highlight = document.getElementById('highlight-message');
          button.addEventListener('click', () => {
            highlight.show = !highlight.show;
          });
        })();
      </script>
    `,
    ],
};
export const DismissibleHighlight = {
    args: {
        class: 'flex items-center gap-8',
        placement: 'right',
        buttonId: 'highlight-target2',
        buttonText: 'click me',
        id: 'dismissible-highlight-message',
        ['can-close']: true,
        ['cross-axis']: true,
        highlight: true,
        flip: true,
    },
    decorators: [
        (story) => html `
      ${story()}
      <script>
        (() => {
          const button = document.getElementById('highlight-target2');
          const highlight = document.getElementById('dismissible-highlight-message');
          button.addEventListener('click', () => {
            highlight.show = true;
          });
          highlight.addEventListener('close', () => {
            highlight.show = false;
          });
        })();
      </script>
    `,
    ],
};
export const AccessibleTooltip = {
    args: {},
    render() {
        return html `
      <w-attention id="accessible-attention" placement="right" popover>
        <div slot="message">
          <p id="aria-content" role="tooltip">I'm a popover with ARIA "tooltip" role</p>
          <p>(this text is less relevant)</p>
        </div>
        <w-button
          aria-details="aria-content"
          id="accessible-target"
          slot="target"
          variant="secondary">
          Click to toggle a popover
        </w-button>
      </w-attention>
    `;
    },
    decorators: [
        (story) => html ` ${story()}
        <script>
          (() => {
            const button = document.getElementById('accessible-target');
            const accessibleAttention = document.getElementById('accessible-attention');
            button.addEventListener('click', () => {
              accessibleAttention.show = !accessibleAttention.show;
            });
          })();
        </script>`,
    ],
};
