/* eslint-disable react/destructuring-assignment */
import React from "react";
import PropTypes from "prop-types";
import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
import defaultStyle from "./Text.module.css";
import textConstants from "./Text.constantProps";
import textPropTypes, { defaultProps, propsDescription } from "./Text.propTypes";
import getCompliedCustomId from "../../utils/getCompliedCustomId";
import textCssJSLogic from "./Text.cssJSLogic";
const tagNamesMapping = {
  [textConstants.type.heading]: {
    [textConstants.level.one]: "h1",
    [textConstants.level.two]: "h2",
    [textConstants.level.three]: "h3",
    [textConstants.level.four]: "h4",
    [textConstants.level.five]: "h5",
    [textConstants.level.six]: "h6"
  },
  [textConstants.type.paragraph]: "p",
  [textConstants.type.blockquote]: "blockquote"
};

const getTagNameByTypeProperty = (type, level) => {
  if (type === textConstants.type.heading) {
    return tagNamesMapping[type][level];
  }

  return tagNamesMapping[type];
};

const defaultTagName = "span";
export default function Text(props) {
  const {
    startIcon,
    endIcon,
    tagName,
    onClick,
    customStyle,
    customId,
    ariaLabel,
    role,
    tabIndex,
    children,
    content,
    tagAttributes,
    tagGeneralAttributes
  } = props;
  const style = useMergeStyle(defaultStyle, customStyle);

  if (tagName === "label") {// console.log("stylestyle>", style);
  }

  const hasIcon = startIcon || endIcon;
  const className = textCssJSLogic(props, style);
  const textProperties = { ...tagGeneralAttributes,
    className,
    onClick,
    "data-id": getCompliedCustomId(props, customId.text),
    "aria-label": ariaLabel,
    role,
    tabIndex,
    ...tagAttributes
  };
  const displayTagName = tagName || props.type && getTagNameByTypeProperty(props.type, props.level) || defaultTagName;
  const displayContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RenderAsIcon, {
    icon: startIcon,
    className: style.start_icon
  }), content && hasIcon ? /*#__PURE__*/React.createElement("span", null, content) : content || null, !content && children ? children : null, /*#__PURE__*/React.createElement(RenderAsIcon, {
    icon: endIcon,
    className: style.end_icon
  }));
  const element = /*#__PURE__*/React.createElement(displayTagName);
  return /*#__PURE__*/React.createElement(element.type, textProperties, displayContent);
}
Text.propTypes = textPropTypes;
Text.defaultProps = defaultProps;
Text.propsDescription = propsDescription;
Text.constantProps = textConstants;

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

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