import React from "react";
import styled from "styled-components";
import { variant, color } from "styled-system";
import PropTypes from "prop-types";
import Box from "components/UI/Box";
import Tooltip from "../../Overlays/Tooltip";

const sizeVariant = () =>
  variant({
    prop: "size",
    variants: {
      big: {
        width: "28px",
        height: "28px",
      },
      small: {
        width: "20px",
        height: "20px",
      },
      extraSmall: {
        width: "12px",
        height: "12px",
      },
    },
  });

const iconOpacity = (disabled, hoverEffect) => {
  let opacity = 0.7;
  if (disabled) opacity = 0.2;
  else if (!hoverEffect) opacity = 1;
  return opacity;
};

const iconStyles = ({ disabled, hoverEffect }) => ({
  width: 24,
  height: 24,
  svg: {
    width: "100%",
    height: "100%",
  },
  pointerEvents: disabled ? "none" : "auto",
  opacity: iconOpacity(disabled, hoverEffect),
  "&:hover": {
    opacity: disabled ? 0.2 : 1,
  },
  padding: 0,
});
const Wrapper = styled(Box)(iconStyles, sizeVariant, color);

const IconWrapper = ({
  size,
  onClick,
  innerRef,
  tooltip,
  tooltipPosition,
  prefixClassName,
  className,
  iconColor,
  disabled,
  hoverEffect,
  ...props
}) => {
  return (
    <Wrapper
      {...props}
      onClick={onClick}
      ref={innerRef}
      className={className}
      size={size}
      disabled={disabled}
      hoverEffect={hoverEffect}
    >
      {tooltip ? (
        <Tooltip
          tooltip={tooltip}
          position={tooltipPosition}
          prefixClassName={`${prefixClassName}-tooltip`}
          themed
        >
          {props.children}
        </Tooltip>
      ) : (
        props.children
      )}
    </Wrapper>
  );
};

IconWrapper.propTypes = {
  size: PropTypes.string,
  onClick: PropTypes.func,
  /** Passes the ref to the outermost div  */
  innerRef: PropTypes.func,
  /** Tooltip for the Icon */
  tooltip: PropTypes.string,
  /** Tooltip Positioning (TOP/BOTTOM) */
  tooltipPosition: PropTypes.string,
  /** The classname to be attached to the icon's outer most div */
  className: PropTypes.string,
  prefixClassName: PropTypes.string,
  disabled: PropTypes.bool,
  iconColor: PropTypes.string,
  hoverEffect: PropTypes.bool,
};

IconWrapper.defaultProps = {
  disabled: false,
  hoverEffect: false,
};

export default IconWrapper;
