import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Tooltip.svelte';
const meta = {
    title: 'Overlay/Tooltip',
    component: 'm-tooltip',
    args: {
        id: 'tooltipId',
        text: 'Keep the tooltip text concise.',
        default: 'Tooltip on the top',
    },
    argTypes: {
        position: {
            control: 'radio',
            options: ['top', 'bottom', 'left', 'right'],
        },
        '--tooltip-z-index': {
            description: 'Customise the z-index of the tooltip',
            control: false,
            table: {
                category: 'Custom Properties',
                type: { summary: 'number' },
                defaultValue: { summary: '1' },
            },
        },
    },
    render: (args) => html `
    <m-tooltip
      id=${ifDefined(args.id)}
      text=${ifDefined(args.text)}
      position=${ifDefined(args.position)}
      ?pointer=${args.pointer}
    >
      ${unsafeHTML(ifDefined(args.default))}
    </m-tooltip>
  `,
};
export default meta;
export const Default = {};
export const Pointer = {
    args: {
        pointer: false,
    },
};
export const Right = {
    args: {
        position: 'right',
    },
};
export const Left = {
    args: {
        position: 'left',
    },
};
export const Bottom = {
    args: {
        position: 'bottom',
    },
};
