import React from "react";
import style from "./InternalIcon.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";
import commonIconsPath from "./InternalIcon.svgicons";
import InternalIconPropTypes, { defaultProps } from "./InternalIcon.propTypes";
import getCompliedCustomId from "../../utils/getCompliedCustomId";

export default function InternalIcon(props) {
  let {
    name,
    size,
    customClassName,
    title,
    disabled,
    onClick,
    customId,
    cursor,
    color,
    tabIndex,
    tagAttributeProps,
    ariaLabel
  } = props;
  let className = getCompliedClassName(
    customClassName,
    {
      [style[`size_${size}`]]: !!size,
      [style.disabled]: !!disabled,
      [style[`cursor_${cursor}`]]: !!cursor,
      [style[`color_${color}`]]: !!color
    },
    {
      [customClassName.size]: !!customClassName.size,
      [customClassName.disabled]: !!customClassName.disabled,
      [customClassName.cursor]: !!customClassName.cursor,
      [customClassName.color]: !!customClassName.color
    }
  );

  let classNameWrapper = getCompliedClassName(
    customClassName,
    {
      [style.base]: true
    },
    {
      [customClassName.base]: !!customClassName.base
    }
  );

  let svgTag = commonIconsPath[name];
  svgTag = svgTag ? React.cloneElement(svgTag, { className }) : null;

  return svgTag ? (
    <span
      title={title}
      aria-label={ariaLabel}
      tabIndex={tabIndex}
      {...tagAttributeProps}
      data-id={getCompliedCustomId(props, customId.internalIcon)}
      className={classNameWrapper}
      onClick={onClick}
    >
     
      {svgTag}{" "}
    </span>
  ) : null;
}

InternalIcon.propTypes = InternalIconPropTypes;
InternalIcon.defaultProps = defaultProps;
