import PropTypes from "prop-types";
import InfotipContent from "./InfotipContent";
import InfotipIcon from "./InfotipIcon";

const BUTTON_SIZE = "16px";

const buttonStyle = {
  background: "transparent",
  border: 0,
  padding: 0,
  width: BUTTON_SIZE,
  height: BUTTON_SIZE,
  WebkitTouchCallout: "none",
  WebkitUserSelect: "none",
  userSelect: "none",
};

// TODO: We may want to improve this by tracking touch positions to ensure
// that a 'touchend' event must be reasonably close to the tooltip target.
const touchHandlers = {
  onTouchStart: (e) => {
    e.stopPropagation();
  },
  onTouchEnd: (e) => {
    if (document.activeElement !== e.currentTarget) {
      e.preventDefault();
      e.currentTarget.focus();
    } else {
      e.preventDefault();
      e.currentTarget.blur();
    }
  },
};

/**
 * Tooltip with styled information icon
 */
const Infotip = ({
  ariaLabel = "Information",
  label,
  lightIcon = false,
  ...props
}) => (
  <InfotipContent label={label} {...props}>
    <button
      type="button"
      aria-label={ariaLabel}
      style={buttonStyle}
      {...touchHandlers}
    >
      <InfotipIcon
        lightIcon={lightIcon}
        width={BUTTON_SIZE}
        height={BUTTON_SIZE}
        aria-hidden
        style={{ float: "left" }}
      />
    </button>
  </InfotipContent>
);

Infotip.propTypes = {
  label: PropTypes.string.isRequired,
  ariaLabel: PropTypes.string,
  lightIcon: PropTypes.bool,
  DEBUG_STYLE: PropTypes.bool,
};

export default Infotip;