import { useState, useEffect } from "react";
import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { Accessibility, ComponentHeading } from "../../storybook-components";
import { colors, zIndex } from "../../tokens";
import { Icon, ICON_TYPE } from "../Icon";
import { Box } from "../Box";
import { Button, BUTTON_VARIANT } from "../Button";
import { Heading } from "../Heading";
import { Stack } from "../Stack";
import { Link } from "../Link";
import { Tooltip } from "./Tooltip";

<Meta title="Components/Popovers/Tooltip" component={Tooltip} />

<ComponentHeading
  componentName="Tooltip"
  description="A tooltip is a popover used to show a small amount of information when the mouse hovers over a reference element."
  sourcePath="src/components/Tooltip/Tooltip.tsx"
  waiAriaPath="https://www.w3.org/TR/wai-aria-practices/#tooltip"
/>

```jsx
import { Tooltip } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Tooltip Uncontrolled">
    <Box className="px-8">
      <Tooltip
        placement="top"
        referenceElement={
          <Stack className="inline-flex p-1" spacing={1}>
            <Icon icon={ICON_TYPE.USER} />
            Hover me
          </Stack>
        }
      >
        This is the text in the Tooltip
      </Tooltip>
    </Box>
  </Story>
</Preview>

## Props

<Props of={Tooltip} />

<Accessibility
  description={
    <>
      Adheres to the{" "}
      <Link
        href="https://www.w3.org/TR/wai-aria-practices/#tooltip"
        target="_blank"
      >
        tooltip widget requirements
      </Link>
      .
    </>
  }
  keyboardInteractions={[
    {
      key: "Escape",
      description: "Dismisses the tooltip",
    },
  ]}
/>

## Demos

### Controlled

<Preview>
  <Story name="Tooltip Controlled">
    <Box className="px-32 pt-10">
      <Tooltip
        placement="left"
        referenceElement={<Icon className="ml-10" icon={ICON_TYPE.USER} />}
        isVisible
      >
        Left
      </Tooltip>
      <Tooltip
        referenceElement={<Icon className="ml-10" icon={ICON_TYPE.USER} />}
        isVisible
      >
        Bottom (default)
      </Tooltip>
      <Tooltip
        placement="top"
        referenceElement={<Icon className="ml-10" icon={ICON_TYPE.USER} />}
        isVisible
      >
        Top
      </Tooltip>
      <Tooltip
        placement="right"
        referenceElement={<Icon className="ml-10" icon={ICON_TYPE.USER} />}
        isVisible
      >
        Right
      </Tooltip>
    </Box>
  </Story>
</Preview>

### Tooltip with style attribute

<Preview>
  <Story name="Tooltip with style attribute">
    <Box className="px-32 pt-10">
      <Tooltip
        placement="right"
        referenceElement={<Icon className="ml-10" icon={ICON_TYPE.USER} />}
        style={{
          color: colors.gold["300"],
          zIndex: zIndex.modal,
        }}
        isVisible
      >
        With gold text and a custom z-index
      </Tooltip>
    </Box>
  </Story>
</Preview>

### Updating children

<Preview>
  <Story name="Tooltip with updating children">
    {() => {
      const defaultText =
        "This tooltip will reposition itself when its children change.";
      const [text, setText] = useState(defaultText);
      useEffect(() => {
        setTimeout(() => {
          if (text === defaultText) {
            setText("Like this");
          } else {
            setText(defaultText);
          }
        }, 3000);
      }, [text]);
      return (
        <Box className="px-32 pt-10">
          <Tooltip
            placement="top"
            referenceElement={
              <Box className="inline-flex">This is the reference element.</Box>
            }
            isVisible
          >
            {text}
          </Tooltip>
        </Box>
      );
    }}
  </Story>
</Preview>

### Wrapping content with custom formatting

The tooltip component has a default max-width of 256px, so the content will
automatically wrap if it’s too long. The max-width can be overridden by passing
it through the `style` attribute.

<Preview>
  <Story name="Tooltip with wrapping content with custom formatting">
    <Box className="px-32 pt-10">
      <Tooltip
        placement="top"
        referenceElement={
          <Button variant={BUTTON_VARIANT.SECONDARY} icon={ICON_TYPE.PLAY}>
            Play
          </Button>
        }
      >
        <Stack className="leading-normal" spacing={3}>
          <Heading.H4 className="text-white">
            Watch your risk profile change
          </Heading.H4>
          <Text className="text-gray-500">
            Once you’ve got more than one version of your Risk Registry, you’ll
            be able to click this button to see how it’s changed over time!
          </Text>
        </Stack>
      </Tooltip>
    </Box>
  </Story>
</Preview>