import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className", "display", "alignItems", "justify"];
/* "use client" */;
import React, { useMemo, useState } from 'react';
import TextChild from './child';
import { withScale } from '../use-scale';
import Button from '../button';
var _getModifierChild = function getModifierChild(tags, children) {
  if (!tags.length) return children;
  var nextTag = tags.slice(1, tags.length);
  return /*#__PURE__*/React.createElement(TextChild, {
    tag: tags[0]
  }, _getModifierChild(nextTag, children));
};
var TextComponent = function TextComponent(_ref) {
  var _ref$h = _ref.h1,
    h1 = _ref$h === void 0 ? false : _ref$h,
    _ref$h2 = _ref.h2,
    h2 = _ref$h2 === void 0 ? false : _ref$h2,
    _ref$h3 = _ref.h3,
    h3 = _ref$h3 === void 0 ? false : _ref$h3,
    _ref$h4 = _ref.h4,
    h4 = _ref$h4 === void 0 ? false : _ref$h4,
    _ref$h5 = _ref.h5,
    h5 = _ref$h5 === void 0 ? false : _ref$h5,
    _ref$h6 = _ref.h6,
    h6 = _ref$h6 === void 0 ? false : _ref$h6,
    _ref$p = _ref.p,
    p = _ref$p === void 0 ? false : _ref$p,
    _ref$b = _ref.b,
    b = _ref$b === void 0 ? false : _ref$b,
    _ref$small = _ref.small,
    small = _ref$small === void 0 ? false : _ref$small,
    _ref$i = _ref.i,
    i = _ref$i === void 0 ? false : _ref$i,
    _ref$span = _ref.span,
    span = _ref$span === void 0 ? false : _ref$span,
    _ref$del = _ref.del,
    del = _ref$del === void 0 ? false : _ref$del,
    _ref$em = _ref.em,
    em = _ref$em === void 0 ? false : _ref$em,
    _ref$blockquote = _ref.blockquote,
    blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
    _ref$noWrap = _ref.noWrap,
    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
    _ref$collapse = _ref.collapse,
    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
    children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$display = _ref.display,
    display = _ref$display === void 0 ? 'block' : _ref$display,
    alignItems = _ref.alignItems,
    justify = _ref.justify,
    props = _objectWithoutProperties(_ref, _excluded);
  var elements = {
    h1: h1,
    h2: h2,
    h3: h3,
    h4: h4,
    h5: h5,
    h6: h6,
    p: p,
    blockquote: blockquote
  };
  var inlineElements = {
    span: span,
    small: small,
    b: b,
    em: em,
    i: i,
    del: del
  };
  var names = Object.keys(elements).filter(function (name) {
    return elements[name];
  });
  var inlineNames = Object.keys(inlineElements).filter(function (name) {
    return inlineElements[name];
  });

  /**
   *  Render element "p" only if no element is found.
   *  If there is only one modifier, just rendered one modifier element
   *  e.g.
   *    <Text /> => <p />
   *    <Text em /> => <em />
   *    <Text p em /> => <p><em>children</em></p>
   *
   */

  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    expand = _useState2[0],
    setExpand = _useState2[1];
  var tag = useMemo(function () {
    if (names[0]) return names[0];
    if (inlineNames[0]) return inlineNames[0];
    return 'p';
  }, [names, inlineNames]);
  var renderableChildElements = inlineNames.filter(function (name) {
    return name !== tag;
  });
  var modifers = useMemo(function () {
    if (!renderableChildElements.length) return children;
    return _getModifierChild(renderableChildElements, children);
  }, [renderableChildElements, children]);
  return /*#__PURE__*/React.createElement(TextChild, _extends({
    style: {
      textAlign: props.align,
      display: display,
      alignItems: alignItems,
      justifyContent: justify
    },
    className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
    tag: tag
  }, props), typeof children === 'string' && collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, expand ? modifers : (modifers === null || modifers === void 0 ? void 0 : modifers.toString().substring(0, collapse)) + '...', /*#__PURE__*/React.createElement(Button, {
    margin: 0,
    onClick: function onClick() {
      return setExpand(!expand);
    },
    style: {
      textTransform: 'lowercase'
    },
    effect: false,
    color: "abort",
    scale: 2 / 3,
    px: 0.2,
    py: 0,
    auto: true
  }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : modifers);
};
TextComponent.displayName = 'Text';
var Text = withScale(TextComponent);
export default Text;