import React from "react";
import PropTypes from "prop-types";
import style from "./Link.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";
import linkPropTypes, {
  defaultProps,
  propsDescription
} from "./Link.propTypes";
import constantProps from "./Link.constantProps";

export default function Link(prop) {
  let {
    target,
    rel,
    href,

    title,
    download,

    children,
    text,

    textEllipsis,
    wordWrap,
    textDecoration,
    color,
    size,

    active,
    visited,

    disabled,

    onClick,

    customClassName,
    customId,
    customIdPrefix,
    customIdSuffix,

    ariaLabel,
    ariaHasPopup,
    ariaExpanded,
    ariaLabelledBy,
    role,
    tabIndex,

    startIcon,
    endIcon,

    tagAttributeProps,

    handlePreventDefault,
    hasPreventDefaultBehaviour
  } = prop;

  let hasIcon = startIcon || endIcon;

  let className = getCompliedClassName(
    customClassName,
    {
      [style.base]: true,
      [style[textDecoration]]: !!textDecoration,
      [style.active]: !!active,
      [style.visited]: !!visited,
      [style.disabled]: !!disabled,
      [style.ellipsis]: !!textEllipsis,
      [style.wrap]: !!wordWrap,
      [style[color]]: !!color,
      [style[size]]: !!size
    },
    {
      [customClassName.base]: !!customClassName.base,
      [customClassName.textDecoration]: !!customClassName.textDecoration,
      [customClassName.active]: !!customClassName.active,
      [customClassName.visited]: !!customClassName.visited,
      [customClassName.disabled]: !!customClassName.disabled,
      [customClassName.textEllipsis]: !!customClassName.textEllipsis,
      [customClassName.wordWrap]: !!customClassName.wordWrap,
      [customClassName.color]: !!customClassName.color,
      [customClassName.size]: !!customClassName.size
    }
  );

  return (
    <a
      className={className}
      href={href}
      target={target}
      rel={rel}
      onClick={
        onClick && hasPreventDefaultBehaviour ? handlePreventDefault : onClick
      }
      disabled={disabled}
      data-id={customId.link`${customIdPrefix}${customIdSuffix}`}
      aria-labelledby={ariaLabelledBy}
      aria-haspopup={ariaHasPopup}
      aria-expanded={ariaExpanded}
      aria-label={ariaLabel}
      role={role}
      tabIndex={tabIndex}
      title={title}
      download={download}
      {...tagAttributeProps}
    >
      <RenderAsIcon icon={startIcon} className={style.start_icon} />
      {text && hasIcon ? (
        <span className={wordWrap ? style.linktext : null}>{text}</span>
      ) : (
        text || null
      )}
      {!text && children ? children : null}
      <RenderAsIcon icon={endIcon} className={style.end_icon} />
    </a>
  );
}

Link.propTypes = linkPropTypes;
Link.defaultProps = defaultProps;
Link.propsDescription = propsDescription;
Link.constantProps = constantProps;

const RenderAsIcon = (props) => {
  return props.icon ? (
    <span className={props.className}>{props.icon}</span>
  ) : null;
};

RenderAsIcon.propTypes = {
  icon: PropTypes.any,
  className: PropTypes.string
};
