import { Meta } from "@storybook/react";
import { TooltipProps } from "./TooltipProps";
import Tooltip from "./Tooltip";

export default {
  title: "Design System/Tooltips/Tooltip",
  component: Tooltip,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Tooltip displays informative text when the user clicks or hovers over an element. \n\n```javascript\nimport { Tooltip } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    anchorElement: {
      control: { type: "text" },
      description:
        "Determines the anchor element of the tooltip. Options: 'pointer', 'target'.",
    },
    appendTo: {
      control: { type: "object" },
      description:
        "Determines which container the tooltip will be added to. By default, it is added to the body.",
    },
    children: {
      control: { type: "text" },
      description: "Determines the content of the tooltip.",
    },
    className: {
      control: { type: "text" },
      description: "Determines the class of the tooltip animation container.",
    },
    content: {
      control: { type: "text" },
      description: "Determines the content of the tooltip.",
    },
    id: {
      control: { type: "text" },
      description:
        "Specifies the id of the wrapping element of the Tooltip component.",
    },
    open: {
      control: { type: "boolean" },
      description:
        "Indicates whether the tooltip is open. In controlled mode, it sets the tooltip.",
    },
    openDelay: {
      control: { type: "number" },
      description: "Sets a delay in milliseconds.",
    },
    parentTitle: {
      control: { type: "boolean" },
      description:
        "If any of the parent elements contains a title, it displays a tooltip.",
    },
    position: {
      control: {
        type: "select",
        options: ["auto", "right", "left", "bottom", "top"],
      },
      description: "Determines the position of the tooltip.",
    },
    showCallout: {
      control: { type: "boolean" },
      description: "Indicates whether the tooltip callout will be displayed.",
    },
    style: {
      control: { type: "object" },
      description:
        "Specifies the styles to be set on the tooltip animation container.",
    },
    targetElement: {
      control: { type: "object" },
      description:
        "Specifies the target element of the tooltip. It should be used with the 'open' property.",
    },
    tooltipClassName: {
      control: { type: "text" },
      description:
        "Specifies the CSS class names to be set on the Tooltip DOM element.",
    },
    tooltipStyle: {
      control: { type: "object" },
      description: "Specifies the styles to be set on the Tooltip DOM element.",
    },
    updateInterval: {
      control: { type: "number" },
      description:
        "Specifies the millisecond interval at which the tooltip will check for title changes.",
    },
    onClose: {
      action: "onClose",
      description: "Triggered when the tooltip is hidden.",
      table: {
        type: { summary: "function", detail: "(event: TooltipEvent) => void" },
      },
    },
    onOpen: {
      action: "onOpen",
      description: "Triggered when the tooltip is displayed.",
      table: {
        type: { summary: "function", detail: "(event: TooltipEvent) => void" },
      },
    },
    onPosition: {
      action: "onPosition",
      description:
        "Called when the tooltip calculates its position. Useful for modifying the default position behavior.",
      table: {
        type: {
          summary: "function",
          detail:
            "(event: TooltipPositionEvent) => { left: number; top: number }",
        },
      },
    },
  },
} as Meta;

export const Default = (args: TooltipProps): JSX.Element => (
  <>
    <Tooltip openDelay={100} position="right" anchorElement="target">
      <div style={{ textAlign: "center" }}>
        <span title="This is with position right">
          This is the first Tooltip with position right.
        </span>
      </div>
    </Tooltip>
    <br />
    <Tooltip openDelay={100} position="left" anchorElement="target">
      <div style={{ textAlign: "center" }}>
        <span title="This is with position left">
          This is the second Tooltip with position left.
        </span>
      </div>
    </Tooltip>
  </>
);

Default.args = {
  dataTestId: "tooltip-data-testid",
  anchorElement: "target",
  appendTo: null,
};