import React from "react";
import Divider from "../../ui/Divider";
import CssFlex from "../../ui/CssFlex";
import getClasses from "./styles";
import TextSection from "./TextSection";
import { useTrackEvent } from "./events";

var TextsTab = function TextsTab(props) {
  var assets = props.assets,
      suggestedAssets = props.suggestedAssets,
      translations = props.translations,
      isLoading = props.isLoading,
      hasDomains = props.hasDomains;
  var onSelectAssets = props.onSelectAssets,
      onRemoveAsset = props.onRemoveAsset,
      onGetAISuggestions = props.onGetAISuggestions;
  var classes = getClasses();
  var trackEvent = useTrackEvent();

  var handleGetAISuggestions = function handleGetAISuggestions() {
    trackEvent({
      key: "asset_manager_texts_click_ai_gen"
    });
    onGetAISuggestions();
  };

  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "lg"
  }, /*#__PURE__*/React.createElement(TextSection, {
    type: "headlines",
    isLoading: isLoading,
    hasDomains: hasDomains,
    translations: translations.headlines,
    onSelectAssets: onSelectAssets,
    onRemoveAsset: onRemoveAsset,
    onGetAISuggestions: handleGetAISuggestions,
    assets: assets.filter(function (asset) {
      return asset.type === "headline";
    }),
    suggestedAssets: suggestedAssets.filter(function (asset) {
      return asset.type === "headline";
    }),
    maxLength: 30
  }), /*#__PURE__*/React.createElement(TextSection, {
    type: "long_headlines",
    isLoading: isLoading,
    hasDomains: hasDomains,
    translations: translations.longHeadlines,
    onSelectAssets: onSelectAssets,
    onRemoveAsset: onRemoveAsset,
    onGetAISuggestions: handleGetAISuggestions,
    assets: assets.filter(function (asset) {
      return asset.type === "long_headline";
    }),
    suggestedAssets: suggestedAssets.filter(function (asset) {
      return asset.type === "long_headline";
    }),
    maxLength: 90
  }), /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center"
  }, /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  })), /*#__PURE__*/React.createElement(TextSection, {
    type: "descriptions",
    isLoading: isLoading,
    hasDomains: hasDomains,
    translations: translations.descriptions,
    onSelectAssets: onSelectAssets,
    onRemoveAsset: onRemoveAsset,
    onGetAISuggestions: handleGetAISuggestions,
    assets: assets.filter(function (asset) {
      return asset.type === "description";
    }),
    suggestedAssets: suggestedAssets.filter(function (asset) {
      return asset.type === "description";
    }),
    maxLength: 90
  }));
};

export default TextsTab;