import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
// @ts-nocheck
import React, { useState, useMemo } from "react";
import CssFlex from "../../ui/CssFlex";
import Tabs from "../../ui/next/Tabs";
import Tab from "../../ui/next/Tab";
import Skeleton from "../../ui/Skeleton";
import Header from "./AssetsManagerHeader";
import Visuals from "./VisualsTab";
import Texts from "./TextsTab";
import { useTrackEvent } from "./events";

var AssetsManager = function AssetsManager(props) {
  var assetsManager = props.assetsManager,
      isLoading = props.isLoading,
      pmaxCampaigns = props.pmaxCampaigns,
      translations = props.translations,
      generatingFromAI = props.generatingFromAI,
      defaultCampaignSelected = props.defaultCampaignSelected;
  var onRemoveAsset = props.onRemoveAsset,
      onGetAISuggestions = props.onGetAISuggestions,
      onUpdateAsset = props.onUpdateAsset,
      hasDomains = props.hasDomains;
  var trackEvent = useTrackEvent();

  var _useState = useState(defaultCampaignSelected || "all"),
      _useState2 = _slicedToArray(_useState, 2),
      campaignSelected = _useState2[0],
      setCampaignSelected = _useState2[1];

  var _useState3 = useState("texts"),
      _useState4 = _slicedToArray(_useState3, 2),
      tab = _useState4[0],
      setTab = _useState4[1];

  var _useMemo = useMemo(function () {
    if (campaignSelected === "all") {
      return {
        currentCampaignSelected: "all",
        assets: assetsManager.filter(function (asset) {
          return asset.status === "selected";
        })
      };
    }

    var autoCampaign = pmaxCampaigns.find(function (campaign) {
      return campaign.id === campaignSelected;
    });

    if (autoCampaign == null) {
      return {
        currentCampaignSelected: "all",
        assets: assetsManager.filter(function (asset) {
          return asset.status === "selected";
        })
      };
    }

    var newAssets = assetsManager.filter(function (asset) {
      var _autoCampaign$images$, _autoCampaign$images$2, _autoCampaign$images$3, _autoCampaign$images$4;

      return ((_autoCampaign$images$ = autoCampaign.images.square_logo_images) === null || _autoCampaign$images$ === void 0 ? void 0 : _autoCampaign$images$.includes(asset.id)) || ((_autoCampaign$images$2 = autoCampaign.images.landscape_logo_images) === null || _autoCampaign$images$2 === void 0 ? void 0 : _autoCampaign$images$2.includes(asset.id)) || ((_autoCampaign$images$3 = autoCampaign.images.square_images) === null || _autoCampaign$images$3 === void 0 ? void 0 : _autoCampaign$images$3.includes(asset.id)) || ((_autoCampaign$images$4 = autoCampaign.images.landscape_images) === null || _autoCampaign$images$4 === void 0 ? void 0 : _autoCampaign$images$4.includes(asset.id)) || autoCampaign.headlines.includes(asset.text) || autoCampaign.long_headlines.includes(asset.text) || autoCampaign.descriptions.includes(asset.text);
    });
    return {
      currentCampaignSelected: autoCampaign.id,
      assets: newAssets
    };
  }, [campaignSelected, pmaxCampaigns, assetsManager]),
      currentCampaignSelected = _useMemo.currentCampaignSelected,
      assets = _useMemo.assets;

  var removeAsset = function removeAsset(id) {
    onRemoveAsset({
      id: id
    });
  };

  var selectAssets = function selectAssets(text, type) {
    onUpdateAsset({
      text: text,
      type: type
    });
  };

  var handleChangeTab = function handleChangeTab(value) {
    trackEvent({
      key: "asset_manager_click_".concat(value)
    });
    setTab(value);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading &&
  /*#__PURE__*/
  // Añadir un skeleton para que se vea que está cargando
  React.createElement(CssFlex, {
    justifyContent: "center",
    alignItems: "center",
    gap: "sm"
  }, [1, 2, 3].map(function (index) {
    return /*#__PURE__*/React.createElement(Skeleton, {
      key: "skeleton-loading-".concat(index),
      variant: "rect",
      width: 200,
      height: 200
    });
  })), !isLoading && /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "lg"
  }, /*#__PURE__*/React.createElement(Header, {
    translations: translations,
    pmaxCampaigns: pmaxCampaigns,
    campaignSelected: currentCampaignSelected,
    setCampaignSelected: setCampaignSelected
  }), /*#__PURE__*/React.createElement(Tabs, {
    value: tab,
    variant: "caption",
    onChange: handleChangeTab,
    sx: {
      gap: "2xl",
      justifyContent: "center"
    }
  }, /*#__PURE__*/React.createElement(Tab, {
    variant: "caption",
    label: translations.header.sections.texts,
    value: "texts"
  }), /*#__PURE__*/React.createElement(Tab, {
    variant: "caption",
    label: translations.header.sections.visuals,
    value: "visuals"
  })), tab === "texts" && /*#__PURE__*/React.createElement(Texts, {
    assets: assets.filter(function (asset) {
      return asset.type !== "image";
    }),
    suggestedAssets: assetsManager.filter(function (asset) {
      return asset.type !== "image" && asset.status === "suggested";
    }),
    hasDomains: hasDomains,
    translations: translations,
    onRemoveAsset: removeAsset,
    onSelectAssets: selectAssets,
    onGetAISuggestions: onGetAISuggestions,
    generatingFromAI: generatingFromAI
  }), tab === "visuals" && /*#__PURE__*/React.createElement(Visuals, {
    translations: translations,
    images: assets.filter(function (asset) {
      return asset.type === "image";
    }),
    suggestedImages: assetsManager.filter(function (asset) {
      return asset.type === "image" && asset.status === "suggested";
    }),
    generatingFromAI: generatingFromAI,
    onRemoveAsset: removeAsset
  })));
};

export default AssetsManager;