function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import PropTypes from 'prop-types';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import defaultStyle from './Tag.module.css';
import getCompliedCustomId from '../../utils/getCompliedCustomId';
import tagPropTypes, { defaultProps, propsDescription } from './Tag.propTypes';
import constantProps from './Tag.constantProps';
import tagCssJSLogic from './Tag.cssJSLogic';
export default function Tag(props) {
  const {
    text,
    title,
    children,
    value,
    startIcon,
    endIcon,
    customStyle,
    customId,
    ariaLabel,
    role = 'tag',
    tabIndex,
    tagItemProps,
    tagAttributes,
    tagGeneralAttributes
  } = props;
  const style = useMergeStyle(defaultStyle, customStyle);
  const ariaLabelValue = ariaLabel || text;
  const className = tagCssJSLogic(props, style);
  return /*#__PURE__*/React.createElement("span", _extends({}, tagGeneralAttributes, {
    className: className,
    "data-id": getCompliedCustomId(props, customId.tag),
    "aria-label": ariaLabelValue
  }, tagItemProps, {
    role: role,
    tabIndex: tabIndex,
    title: title || text,
    value: value
  }, tagAttributes), /*#__PURE__*/React.createElement(RenderAsIcon, {
    icon: startIcon,
    className: style.start_icon
  }), text && (startIcon || startIcon) ? /*#__PURE__*/React.createElement("span", null, text) : text || null, !text && children ? children : null, /*#__PURE__*/React.createElement(RenderAsIcon, {
    icon: endIcon,
    className: style.end_icon
  }));
}
Tag.propTypes = tagPropTypes;
Tag.defaultProps = defaultProps;
Tag.propsDescription = propsDescription;
Tag.constantProps = constantProps;

const RenderAsIcon = props => props.icon ? /*#__PURE__*/React.createElement("span", {
  className: props.className
}, props.icon) : null;

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