import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React, { useState, useRef } from "react";
import CssFlex from "../../../ui/CssFlex"; // import TextField from "../../../ui/next/TextField";
// import Typography from "../../../ui/Typography";

import Skeleton from "../../../ui/Skeleton"; // import Button from "../../../ui/next/Button";

import CollapsableChipsList from "../../../ui/CollapsableChipsList"; // import Enter from "../../../ui/Icon/Enter";
// import Bolt from "../../../ui/Icon/Bolt";

import getClasses from "./styles";

var TextSectionBody = function TextSectionBody(props) {
  var type = props.type,
      translations = props.translations,
      onSelectAssets = props.onSelectAssets,
      maxLength = props.maxLength,
      hasDomains = props.hasDomains,
      assets = props.assets,
      isLoading = props.isLoading,
      onGetAISuggestions = props.onGetAISuggestions,
      onRemoveAsset = props.onRemoveAsset,
      suggestedAssets = props.suggestedAssets;
  var classes = getClasses(); // const textFieldRef = useRef();
  // const [text, setText] = useState("");
  // const [assetIndex, setAssetIndex] = useState(0);
  // const handleUpdateText = ev => {
  //   if (ev.target.value.length <= maxLength) {
  //     setText(ev.target.value);
  //   }
  // };
  // const handleAddItem = () => {
  //   onSelectAssets(text, type);
  //   setText("");
  // };
  // const handleKeyDown = event => {
  //   if (event.key === "Enter" && event.target.value.trim() !== "") {
  //     handleAddItem();
  //   }
  // };
  // const handleAIAssets = () => {
  //   setText(suggestedAssets[assetIndex]?.text ?? "");
  //   if (assetIndex >= suggestedAssets.length - 1) {
  //     if (suggestedAssets.length === 0 && hasDomains) {
  //       onGetAISuggestions();
  //     }
  //     setAssetIndex(0);
  //   } else {
  //     setAssetIndex(assetIndex + 1);
  //   }
  //   textFieldRef?.current?.focus();
  // };

  return /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    direction: "column"
  }, isLoading && /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    alignItems: "center"
  }, _toConsumableArray(Array(5)).map(function () {
    return /*#__PURE__*/React.createElement(Skeleton, {
      className: classes.loadingContainer
    });
  })), !isLoading && /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: assets.map(function (asset) {
      return {
        label: asset.text,
        value: asset.id
      };
    }),
    displayCount: 5 // onDelete={item => onRemoveAsset(item.value)}

  }));
};

export default TextSectionBody;