import React, { ComponentProps } from "react";
import { Meta, StoryFn } from "@storybook/react";
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
  TooltipContentProps,
} from "../ui/tooltip";
import { Button } from "../ui/button";

export default {
  title: "Components/Tooltip",
  component: Tooltip,
  argTypes: {
    side: {
      control: "text",
      defaultValue: "top",
      description: "Position of the tooltip",
      options: ["top", "bottom", "left", "right"],
    },
    align: {
      control: "text",
      defaultValue: "center",
      description: "Alignment of the tooltip relative to the trigger",
      options: ["start", "center", "end"],
    },
    arrowPresent: {
      control: "boolean",
      defaultValue: true,
      description: "Whether the tooltip has an arrow",
    },
    sideOffset: {
      control: "number",
      defaultValue: 4,
      description: "Offset of the tooltip from the trigger",
    },
    className: {
      control: "text",
      description: "Additional class name for styling",
    },
  },
} as Meta<typeof Tooltip>;

const TooltipStory: StoryFn<
  ComponentProps<typeof Tooltip & TooltipContentProps>
> = (
  //@ts-ignore
  { side, align, arrowPresent, sideOffset, className }
) => (
  <div className="mx-80 my-32">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="secondary">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent
          side={side}
          align={align}
          arrowPresent={arrowPresent}
          sideOffset={sideOffset}
          className={className}
        >
          Sample Text
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
);

export const DefaultTooltip = TooltipStory.bind({});
DefaultTooltip.args = {
  side: "top",
  align: "center",
  arrowPresent: true,
  sideOffset: 4,
  className: "",
};