// @ts-nocheck
import React, { useEffect } from "react";
import CssFlex from "../../../../ui/CssFlex";
import Typography from "../../../../ui/Typography";
import ImageSection from "./ImageSection";
import getClasses from "./styles";
import { MIN_SQUARE_LOGOS, MIN_LANDSCAPE_IMAGES, MIN_LANDSCAPE_LOGOS, MIN_SQUARE_IMAGES } from "../../constants";
import { useTrackEvent } from "../../events";
var TabVisuals = /*#__PURE__*/React.forwardRef(function (props, _ref) {
  var _autoCampaign$square_, _autoCampaign$landsca, _autoCampaign$landsca2, _autoCampaign$square_2, _autoCampaign$square_3, _autoCampaign$landsca3;

  var translations = props.translations,
      warnings = props.warnings,
      autoCampaign = props.autoCampaign,
      pressed = props.pressed,
      isLoading = props.isLoading;
  var onSelectAssets = props.onSelectAssets,
      onUploadImage = props.onUploadImage,
      onUpdateAsset = props.onUpdateAsset,
      onOpenAIModal = props.onOpenAIModal;
  var assets = props.assets,
      isLoadingAI = props.isLoadingAI,
      onUpdateAssetSection = props.onUpdateAssetSection;
  var trackEvent = useTrackEvent();
  var maxLogoAssets = 1;
  var maxImagesAssets = 20;
  var classes = getClasses();
  useEffect(function () {
    trackEvent({
      key: "step_assets_visuals_seen"
    });
  }, [trackEvent]);

  var handleAISuggestions = function handleAISuggestions(section) {
    trackEvent({
      key: "step_assets_visuals_click_ai_gen"
    });
    onOpenAIModal(section);
  };

  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md",
    className: classes.section
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 700,
    weight: "semibold"
  }, translations.logos), /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "space-between",
    gap: ["md", "lg"],
    mb: "md",
    wrap: "wrap"
  }, /*#__PURE__*/React.createElement(ImageSection, {
    ref: function ref(el) {
      _ref.current.visuals.squareLogos = el;
    },
    logo: true,
    warning: warnings.squareLogos,
    pressed: pressed,
    minAssets: MIN_SQUARE_LOGOS,
    maxAssets: maxLogoAssets,
    onUpdateAssetSection: onUpdateAssetSection,
    onSelectAssets: onSelectAssets,
    onUpdateAsset: onUpdateAsset,
    images: (_autoCampaign$square_ = autoCampaign.square_logo_images) !== null && _autoCampaign$square_ !== void 0 ? _autoCampaign$square_ : [],
    assets: assets.filter(function (asset) {
      return asset.aspect_ratio === 1 && asset.logo;
    }),
    translations: translations,
    typeTranslations: translations.squareLogo,
    type: "square_logo_images",
    onUploadImage: onUploadImage,
    onGetAISuggestions: handleAISuggestions,
    isLoading: isLoading,
    isLoadingAI: isLoadingAI
  }), /*#__PURE__*/React.createElement(ImageSection, {
    ref: function ref(el) {
      _ref.current.visuals.landscapeLogos = el;
    },
    logo: true,
    landscape: true,
    warning: warnings.landscapeLogos,
    pressed: pressed,
    minAssets: MIN_LANDSCAPE_LOGOS,
    maxAssets: maxLogoAssets,
    onUpdateAssetSection: onUpdateAssetSection,
    onSelectAssets: onSelectAssets,
    onUpdateAsset: onUpdateAsset,
    autoCampaignId: autoCampaign.id,
    images: (_autoCampaign$landsca = autoCampaign.landscape_logo_images) !== null && _autoCampaign$landsca !== void 0 ? _autoCampaign$landsca : [],
    assets: assets.filter(function (asset) {
      return asset.aspect_ratio === 4 && asset.logo;
    }),
    translations: translations,
    typeTranslations: translations.landscapeLogo,
    type: "landscape_logo_images",
    onUploadImage: onUploadImage,
    onGetAISuggestions: handleAISuggestions,
    isLoading: isLoading,
    isLoadingAI: isLoadingAI
  })), /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 800
  }, translations.images), /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(ImageSection, {
    ref: function ref(el) {
      _ref.current.visuals.squareImages = el;
    },
    warning: warnings.squareImages,
    pressed: pressed,
    minAssets: MIN_SQUARE_IMAGES,
    maxAssets: maxImagesAssets - (((_autoCampaign$landsca2 = autoCampaign.landscape_images) === null || _autoCampaign$landsca2 === void 0 ? void 0 : _autoCampaign$landsca2.length) || 1),
    onUpdateAssetSection: onUpdateAssetSection,
    onSelectAssets: onSelectAssets,
    onUpdateAsset: onUpdateAsset,
    autoCampaignId: autoCampaign.id,
    images: (_autoCampaign$square_2 = autoCampaign.square_images) !== null && _autoCampaign$square_2 !== void 0 ? _autoCampaign$square_2 : [],
    assets: assets.filter(function (asset) {
      return asset.aspect_ratio === 1;
    }),
    translations: translations,
    typeTranslations: translations.squareImages,
    type: "square_images",
    onUploadImage: onUploadImage,
    onGetAISuggestions: handleAISuggestions,
    isLoading: isLoading,
    isLoadingAI: isLoadingAI
  }), /*#__PURE__*/React.createElement(ImageSection, {
    ref: function ref(el) {
      _ref.current.visuals.landscapeImages = el;
    },
    warning: warnings.landscapeImages,
    landscape: true,
    minAssets: MIN_LANDSCAPE_IMAGES,
    maxAssets: maxImagesAssets - (((_autoCampaign$square_3 = autoCampaign.square_images) === null || _autoCampaign$square_3 === void 0 ? void 0 : _autoCampaign$square_3.length) || 1),
    pressed: pressed,
    onUpdateAssetSection: onUpdateAssetSection,
    onSelectAssets: onSelectAssets,
    onUpdateAsset: onUpdateAsset,
    autoCampaignId: autoCampaign.id,
    images: (_autoCampaign$landsca3 = autoCampaign.landscape_images) !== null && _autoCampaign$landsca3 !== void 0 ? _autoCampaign$landsca3 : [],
    assets: assets.filter(function (asset) {
      return asset.aspect_ratio === 1.91;
    }),
    translations: translations,
    typeTranslations: translations.landscapeImages,
    type: "landscape_images",
    onUploadImage: onUploadImage,
    onGetAISuggestions: handleAISuggestions,
    isLoading: isLoading,
    isLoadingAI: isLoadingAI
  })));
});
export default TabVisuals;