import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect, useRef } from "react";
import Button from "../../../../../ui/next/Button";
import CollapsableChipsList from "../../../../../ui/CollapsableChipsList";
import CssFlex from "../../../../../ui/CssFlex";
import Enter from "../../../../../ui/Icon/Enter";
import Skeleton from "../../../../../ui/Skeleton";
import TextField from "../../../../../ui/next/TextField";
import Typography from "../../../../../ui/Typography";
import getClasses from "../styles";

var TextSectionBody = function TextSectionBody(props) {
  var type = props.type,
      translations = props.translations,
      items = props.items,
      onSelectAssets = props.onSelectAssets,
      assets = props.assets;
  var warning = props.warning,
      pressed = props.pressed,
      isLoading = props.isLoading,
      maxLength = props.maxLength,
      minItems = props.minItems,
      maxItems = props.maxItems;

  var _useState = useState(""),
      _useState2 = _slicedToArray(_useState, 2),
      text = _useState2[0],
      setText = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      itemsError = _useState4[0],
      setItemsError = _useState4[1];

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      assetIndex = _useState6[0],
      setAssetIndex = _useState6[1];

  var textFieldRef = useRef();
  var classes = getClasses();
  useEffect(function () {
    if (items.length >= maxItems) {
      setItemsError(true);
    } else {
      setItemsError(false);
    }
  }, [items]);

  var handleUpdateText = function handleUpdateText(ev) {
    if (ev.target.value.length <= maxLength) {
      setText(ev.target.value);
    }
  };

  var handleAddItem = function handleAddItem() {
    if (!itemsError && text.trim() !== "") {
      onSelectAssets([], [text], type, "select");
      setText("");
    }
  };

  var handleKeyDown = function handleKeyDown(event) {
    if (event.key === "Enter") {
      handleAddItem();
    }
  };

  useEffect(function () {
    if (assetIndex >= assets.length - 1) {
      setAssetIndex(0);
    }
  }, [assets]);

  var getHelper = function getHelper() {
    if (itemsError) {
      return /*#__PURE__*/React.createElement(Typography, {
        variant: "small",
        color: "danger"
      }, translations.error);
    }

    if (warning && pressed) {
      return /*#__PURE__*/React.createElement(Typography, {
        variant: "small",
        color: "warning",
        dangerouslySetInnerHTML: {
          __html: items.length < minItems ? translations.warning.replace("{number}", minItems - items.length) : translations.warningMinimum
        }
      });
    }

    return /*#__PURE__*/React.createElement(Typography, {
      variant: "small"
    }, text.length, "/", maxLength);
  };

  return /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    direction: "column"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm"
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.inputContainer
  }, /*#__PURE__*/React.createElement(TextField, {
    ref: textFieldRef,
    className: classes.input,
    value: text,
    placeholder: translations.placeholder,
    onChange: handleUpdateText,
    onKeyDown: handleKeyDown,
    disabled: itemsError || isLoading,
    helperText: getHelper()
  }), /*#__PURE__*/React.createElement(Button, {
    onClick: handleAddItem,
    disabled: text.trim() === "",
    className: classes.enterButton
  }, /*#__PURE__*/React.createElement(Enter, null)))), isLoading && /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    alignItems: "center"
  }, _toConsumableArray(Array(3)).map(function (_, index) {
    return /*#__PURE__*/React.createElement(Skeleton, {
      key: "loading-skeleton-".concat(index),
      className: classes.loadingContainer
    });
  })), !isLoading && /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: items,
    displayCount: 5,
    onDelete: function onDelete(item) {
      return onSelectAssets([], [item], type, "deselect");
    }
  }));
};

export default TextSectionBody;