import React, { useState } from 'react';

import { composeEvents } from '../../../utils/composeEvents';
import { Pressable, PressableProps } from '../../atoms/Pressable/Pressable';
import { Typography, TypographyProps } from '../../atoms/Typography/Typography';

type HrefAttrs = {
  download?: boolean;
  rel?: string;
  target?: string;
};

export interface LinkProps extends PressableProps {
  /**
   * Supported only on the Web platform
   */
  href?: string;
  /**
   * Supported only on the Web platform
   */
  hrefAttrs?: HrefAttrs;
  text: string;
  textProps?: Omit<TypographyProps, 'children'>;
}

export const Link = ({
  text,
  textProps,
  onHoverIn,
  onHoverOut,
  ...rest
}: LinkProps) => {
  const [isHovered, setIsHovered] = useState(false);

  const toggleHover = () => setIsHovered((state) => !state);

  return (
    <Pressable
      onHoverIn={composeEvents(onHoverIn, toggleHover)}
      onHoverOut={composeEvents(onHoverOut, toggleHover)}
      accessibilityRole="link"
      accessible
      {...rest}
    >
      <Typography
        variant="body2"
        color="blue.500"
        decorationLine={isHovered ? 'underline' : undefined}
        selectable={false}
        {...textProps}
      >
        {text}
      </Typography>
    </Pressable>
  );
};