import React, { ReactElement, MouseEvent } from 'react';
import css from '../../utils/css';
import Icon, { IconName } from '../Icon';

import {
  StyledLink,
  StyledRouterLink,
  StyledIconWrapper,
} from './StyledLinkButton';

import { CommonProps } from '../common';

export interface LinkButtonProps extends CommonProps {
  /**
   * Disable state of button.
   */
  disabled?: boolean;
  /**
   * Specify filename which will be downloaded when the hyperlink is clicked on.
   */
  download?: string;
  /**
   * Specifies the URL of the page the link goes to.
   */
  href: string;
  /**
   * Icon name to render before the text.
   */
  icon?: IconName;
  /**
   * Visual intent color to apply to button.
   */
  intent?:
    | 'primary'
    | 'danger'
    | 'success'
    | 'warning'
    | 'error'
    | 'subdued-text';
  /**
   * Set the handler to handle `click` event.
   */
  onClick?: (e: MouseEvent) => void;
  /**
   * Specifies the [relationship](https://www.w3schools.com/tags/att_a_rel.asp) between the current document and the linked document.
   */
  rel?: string;
  /**
   * Icon name to render after the text.
   */
  rightIcon?: IconName;
  /**
   * Size of button. `inherit` let button inherit font-size from its parents, useful for inline link.
   */
  size?: 'small' | 'medium' | 'large' | 'inherit';
  /**
   * Specifies where to open the linked document.
   */
  target?: '_blank' | '_parent' | '_self' | '_top';
  /**
   * Button label.
   */
  text: string | ReactElement;
  /**
   * Indicate if LinkButton is compatible with routing using react-router. A Link component will be rendered instead of an usual HTML a tag.
   */
  withRouter?: boolean;
}

const renderContent = (
  text: string | ReactElement,
  icon?: IconName,
  rightIcon?: IconName
): ReactElement => (
  <>
    {icon !== undefined && (
      <StyledIconWrapper themePosition="left">
        <Icon icon={icon} />
      </StyledIconWrapper>
    )}
    {text}
    {rightIcon !== undefined && (
      <StyledIconWrapper themePosition="right">
        <Icon icon={rightIcon} />
      </StyledIconWrapper>
    )}
  </>
);

const LinkButton = ({
  text,
  href,
  onClick,
  rel,
  target,
  intent = 'primary',
  disabled = false,
  download,
  size = 'medium',
  withRouter = false,
  icon,
  rightIcon,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: LinkButtonProps): ReactElement => {
  return withRouter === true ? (
    <StyledRouterLink
      to={href}
      onClick={onClick}
      download={download}
      themeDisabled={disabled}
      themeIntent={intent}
      themeSize={size}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {renderContent(text, icon, rightIcon)}
    </StyledRouterLink>
  ) : (
    <StyledLink
      href={href}
      rel={rel}
      target={target}
      onClick={onClick}
      download={download}
      themeDisabled={disabled}
      themeIntent={intent}
      themeSize={size}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {renderContent(text, icon, rightIcon)}
    </StyledLink>
  );
};

export default LinkButton;