import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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();
  var textFieldRef = useRef();

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

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      assetIndex = _useState4[0],
      setAssetIndex = _useState4[1];

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

  var handleAddItem = function handleAddItem() {
    onSelectAssets(text, type);
    setText("");
  };

  var handleKeyDown = function handleKeyDown(event) {
    if (event.key === "Enter" && event.target.value.trim() !== "") {
      handleAddItem();
    }
  };

  var handleAIAssets = function handleAIAssets() {
    var _suggestedAssets$asse, _suggestedAssets$asse2, _textFieldRef$current;

    setText((_suggestedAssets$asse = (_suggestedAssets$asse2 = suggestedAssets[assetIndex]) === null || _suggestedAssets$asse2 === void 0 ? void 0 : _suggestedAssets$asse2.text) !== null && _suggestedAssets$asse !== void 0 ? _suggestedAssets$asse : "");

    if (assetIndex >= suggestedAssets.length - 1) {
      if (suggestedAssets.length === 0 && hasDomains) {
        onGetAISuggestions();
      }

      setAssetIndex(0);
    } else {
      setAssetIndex(assetIndex + 1);
    }

    textFieldRef === null || textFieldRef === void 0 ? void 0 : (_textFieldRef$current = textFieldRef.current) === null || _textFieldRef$current === void 0 ? void 0 : _textFieldRef$current.focus();
  };

  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,
    helperText: /*#__PURE__*/React.createElement(Typography, {
      variant: "small"
    }, text.length, "/", maxLength)
  }), /*#__PURE__*/React.createElement(Button, {
    onClick: handleAddItem,
    disabled: text.trim() === "",
    className: classes.enterButton
  }, /*#__PURE__*/React.createElement(Enter, null))), /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    onClick: handleAIAssets,
    disabled: isLoading && suggestedAssets.length === 0,
    isLoading: isLoading && suggestedAssets.length === 0,
    className: classes.button
  }, /*#__PURE__*/React.createElement(Bolt, {
    color: "inherit"
  }), translations.button)), 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: function onDelete(item) {
      return onRemoveAsset(item.value);
    }
  }));
};

export default TextSectionBody;