import { Tooltip, hideTooltip, showTooltip } from "./Tooltip";
import { TextButton } from "../../buttons/TextButton/TextButton";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";

<Meta title="Overlays/Tooltip" component={Tooltip} />

The `Tooltip` component allows content to display additional information on hover.

Default tooltip with default `top` position. This is the most common configuration within Local.

<Canvas>
	<Story name="Tooltip">
        <div style={{ height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Tooltip
                content={<div>This is a tooltip</div>}
				onShow={() => console.log("SHOWING!")}
				onHide={() => console.log("HIDING!")}
				showDelay={0}
				hideDelay={0}
            >
                <div style={{ cursor: 'pointer' }}>Hover over me</div>
            </Tooltip>
        </div>
	</Story>
</Canvas>

Set `forceShow` to `true` and showcase each available `position` prop option (if not set, defaults to `top`).
This can be especially helpful when developing or debugging the inner tooltip content.

> Notice how, while scrolling and resizing the browser, a tooltip might auto-adjust it's defined `position` if there's not enough screen real estate available to be placed there.

<Canvas>
	<Story name="Force Hover">
		{() => {
			const placements = ['top-start', 'top', 'top-end', 'left-start', 'bottom-start', 'right-start', 'left', 'bottom', 'right', 'left-end', 'bottom-end', 'right-end', 'auto-start', 'auto', 'auto-end'];
			return (
				<div style={{ height: '750px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
					{placements.map((placement) => {
						return (
							<Tooltip
								content={<div style={{ fontSize: '1.1rem' }}>{placement}</div>}
								key={placement}
								forceShow
								position={placement}
								style={{width: '10%', minWidth: '50px', maxWidth: '70px', margin: '0 10%'}}
							>
								<div style={{ background: '#9f9c9c', padding: '10px', borderRadius: '4px', textAlign: 'center', fontSize: '1.2rem' }}>
									target
								</div>
							</Tooltip>
						)
					})}
				</div>
			)
		}}
	</Story>
</Canvas>

Manually offset the popper through `popperOffsetModifier` prop to nudge the tooltip as needed (e.g. to the right `50` pixels).

<Canvas>
	<Story name="Offset">
        <div style={{ height: '200px', display: 'flex', alignItems: 'center' }}>
            <Tooltip
                content={<div>Offset to the right 50px</div>}
				popperOffsetModifier={[50, 10]}
            >
                <div style={{cursor: 'pointer'}}>Hover over me</div>
            </Tooltip>
        </div>
	</Story>
</Canvas>

Increase the delay for both showing and hiding the tooltip via the `showDelay` and `hideDelay` props.
> Note that increasing these values can improve user experience when the tooltip appears to often and untentionally showDelay
> or when the tooltip content is interactive and allowing for more time to hover over it would lead to a better user experience.

<Canvas>
	<Story name="Increase delays">
        <div style={{ height: '200px', display: 'flex', alignItems: 'center' }}>
            <Tooltip
				content={
					<>
						<div>Inteactive content</div>
						<input style={{display: 'block', margin: '10px 0'}}/>
						<div>
							<button>Submit</button>
						</div>
					</>
				}
				hideDelay={2000}
				showDelay={2000}
            >
                <div style={{cursor: 'pointer'}}>Hover over me for 2 seconds to show options.</div>
            </Tooltip>
        </div>
	</Story>
</Canvas>

Turn off the delay before showing the tooltip along with the delay for hiding it via the `showDelay` and `hideDelay` props.
> Notice how the tooltip starts to fade in immediately after mousing over the target (this is typically undesirable UX behavior).
> This tooltip also starts to fade out immediately after mousing out from target which does not allow a user much time to interact with the popup content.

<Canvas>
	<Story name="Remove delays">
        <div style={{ height: '200px', display: 'flex', alignItems: 'center' }}>
            <Tooltip
                content={<div>This shows and hides very quickly. Be very intentional if using either of these props!</div>}
				hideDelay={0}
				position={'right'}
				showDelay={0}
            >
                <div style={{cursor: 'pointer'}}>Hover over me</div>
            </Tooltip>
        </div>
	</Story>
</Canvas>

We can hide a tooltip using the exported `hideTooltip` function, passing along the ID of the tooltip. We can hide hoverable and clickable tooltips from within the tooltip,
and it also opens up possiblities for using the tooltip as a contextmenu, navigating via keyboard and opening/closing via events.

We can show a tooltip using the exported `showTooltip` function, again, passing along the ID of the tooltip. Note that for hoverable tooltips, hovering over just the popper won't
close it. We need to hover and leave the target, because it's interal state is set to "hovered" after the event. 

> Using these methods gives us animations and doesn't mess up internal state. Changig the `hideTooltip` prop to `true` from the parent component
> will hide it, but we lose animations. Internal state also gets behind if we hide via the prop, then trigger, in an attempt to do a "controlled" tooltip.

<Canvas>
	<Story name="Hide via hideTooltip">
        <div style={{ height: '200px', display: 'flex', alignItems: 'center' }}>
            <Tooltip
				id="hideableHoverTooltip"
				useClickInsteadOfHover={false}
                content={(
					<div>
						<div>Clicking the content doesn't close!</div>
						<TextButton onClick={() => hideTooltip("hideableHoverTooltip")}>
							Click me to close
						</TextButton>
					</div>
				)}
				position={'top'}
				showDelay={200}
				hideDelay={200}
            >
                Hover over me
            </Tooltip>
			<TextButton onClick={(e) => {
				e.stopPropagation();
				showTooltip("hideableHoverTooltip");
			}}>
				Click me to open that other tooltip
			</TextButton>
        </div>
        <div style={{ height: '200px', display: 'flex', alignItems: 'center' }}>
            <Tooltip
				id="hideableClickTooltip"
				useClickInsteadOfHover
                content={(
					<div>
						<div>Clicking the content doesn't close!</div>
						<TextButton onClick={() => hideTooltip("hideableClickTooltip")}>
							Click me to close
						</TextButton>
					</div>
				)}
				position={'top'}
				showDelay={200}
				hideDelay={200}
            >
                <div style={{cursor: 'pointer'}}>Click me</div>
            </Tooltip>
			<TextButton onClick={(e) => {
				e.stopPropagation();
				showTooltip("hideableClickTooltip");
			}}>
				Click me to open that other tooltip
			</TextButton>
        </div>
	</Story>
</Canvas>