import React from "react";
import { Meta, Story } from "@storybook/react";
import { AtomTooltip, ITooltipProps } from "native/atoms/Tooltip";
import { AtomCaption } from "native/atoms/Typography/Caption";
import { AtomIcon } from "native/atoms/Icon/index";

const meta: Meta = {
  title: "React Native/atoms/Tooltip/CustomIcon",
  component: AtomTooltip,
  argTypes: {
    text: {
      control: false,
      table: {
        disabled: true,
      },
    },
    content: {
      control: false,
      table: {
        disabled: true,
      },
    },
    customTextStyle: {
      control: false,
      table: {
        disabled: true,
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateTooltipCustomIcon: Story<ITooltipProps> = (props) => {
  return (
    // Custom Container to prevent Storybook to crop tooltip
    <div
      style={{
        height: "120px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <AtomTooltip {...props}>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    </div>
  );
};

export const TooltipWithCustomContent = TemplateTooltipCustomIcon.bind({});
TooltipWithCustomContent.args = {
  content: <AtomIcon name="earn_badges" size={30} />,
  placement: "bottom",
  tooltipWidth: "auto",
};
