import React, { useState } from 'react';
import { Button } from '../button/react';
import { Attention } from './react';
export default {
    title: 'Overlays/Attention',
    component: Attention,
};
export const Default = {
    args: {
        placement: 'bottom',
        popover: true,
        flip: true,
    },
    render: (args) => {
        const [show, setShow] = useState(false);
        return (React.createElement(Attention, { ...args, show: show },
            React.createElement(Button, { onClick: () => setShow(!show), slot: "target" }, "Click to toggle a popover"),
            React.createElement("span", { slot: "message" }, "I'm a popover")));
    },
};
export const ToolTip = {
    args: {
        placement: 'right',
        id: 'tooltip-element',
        tooltip: true,
        flip: true,
    },
    render: (args) => {
        const [show, setShow] = useState(false);
        return (React.createElement(Attention, { ...args, show: show },
            React.createElement(Button, { slot: "target", onMouseEnter: () => {
                    setShow(true);
                }, onMouseLeave: () => setShow(false), onFocus: () => setShow(true), onBlur: () => setShow(false) }, "hover me"),
            React.createElement("span", { slot: "message" }, "Tooltip content")));
    },
};
export const Callout = {
    args: {
        placement: 'right',
        callout: false,
        show: true,
        className: 'flex items-center gap-8',
    },
    render: (args) => {
        return (React.createElement(Attention, { ...args },
            React.createElement(Button, { slot: "target" }, "I need a callout"),
            React.createElement("span", { slot: "message" }, "Callout")));
    },
};
export const Highlight = {
    args: {
        placement: 'right',
        highlight: true,
        flip: true,
    },
    render: (args) => {
        const [show, setShow] = useState(false);
        return (React.createElement(Attention, { ...args, show: show },
            React.createElement(Button, { onClick: () => setShow(!show), slot: "target" }, "I'm highlighted"),
            React.createElement("span", { slot: "message" }, "Highlighted content")));
    },
};
export const DismissibleHighlight = {
    args: {
        className: 'flex items-center gap-8',
        placement: 'right',
        canClose: true,
        crossAxis: true,
        highlight: true,
        flip: true,
    },
    render: (args) => {
        const [show, setShow] = useState(false);
        return (React.createElement(Attention, { ...args, show: show, onClose: () => setShow(false) },
            React.createElement(Button, { onClick: () => setShow(!show), slot: "target" }, "click me"),
            React.createElement("span", { slot: "message" }, "Dismissible highlight content")));
    },
};
export const AccessibleTooltip = {
    args: {
        placement: 'right',
        popover: true,
    },
    render: (args) => {
        const [show, setShow] = useState(false);
        return (React.createElement(Attention, { ...args, show: show },
            React.createElement("div", { slot: "message" },
                React.createElement("p", { id: "aria-content", role: "tooltip" }, "I'm a popover with ARIA \"tooltip\" role"),
                React.createElement("p", null, "(this text is less relevant)")),
            React.createElement("button", { onClick: () => setShow(!show), "aria-details": "aria-content", id: "accessible-target", className: "group block relative break-words last-child:mb-0 p-16 rounded-8 s-bg-subtle", slot: "target" }, "Click to toggle a popover")));
    },
};
