import React, { useRef, forwardRef } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import useMergeRefs from "../../../hooks/useMergeRefs";
import Icon from "../../Icon/Icon";
import "./Tab.scss";

const Tab = forwardRef(({
  className,
  id,
  value,
  disabled,
  active,
  focus,
  onClick,
  icon,
  iconType,
  iconSide,
  children
}, ref) => {
  const componentRef = useRef(null);
  const mergedRef = useMergeRefs({ refs: [ref, componentRef] });

  function renderIconAndChildren() {
    if (!icon) return children;

    const iconElement = (
      <Icon
        clickable={false}
        icon={icon}
        className={cx("tab-icon", iconSide)}
        iconSize={18}
        ignoreFocusStyle
      />
    );

    if (iconSide === "left") {
      return [iconElement, ...children];
    }

    return [...children, iconElement];
  }

  return (
    <li ref={mergedRef}
        key={id}
        className={cx("tab--wrapper", className, { active, disabled, "focus-visible": focus })}
        id={id}
        role="tab"
        aria-selected={active}
        aria-disabled={disabled}
    >
        <a className="tab-inner"
           onClick={() => !disabled && onClick(value)}
        >
            {renderIconAndChildren()}
        </a>
    </li>
  );
});

Tab.propTypes = {
  className: PropTypes.string,
  id: PropTypes.string,
  value: PropTypes.number,
  disabled: PropTypes.bool,
  active: PropTypes.bool,
  focus: PropTypes.bool,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  iconType: PropTypes.string,
  iconSide: PropTypes.string,
  onClick: PropTypes.func
};
Tab.defaultProps = {
  className: "",
  id: "",
  value: 0,
  disabled: false,
  active: false,
  focus: false,
  icon: null,
  iconType: null,
  iconSide: "left"
};

export default Tab;