import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject;

// @ts-nocheck
import React, { useEffect, useState, useRef } from "react";
import { Fill } from "nano-slots";
import Dialog from "../../../ui/lab/Dialog";
import Tab from "../../../ui/next/Tab";
import Tabs from "../../../ui/next/Tabs";
import Divider from "../../../ui/Divider";
import Tooltip from "../../../ui/lab/Tooltip";
import styled from "../../../ui/styles/styled";
import { usePMaxState } from "../context";
import { nextStep, previousStep, setTab } from "../reducer";
import { MIN_SQUARE_LOGOS, MIN_LANDSCAPE_LOGOS, MIN_SQUARE_IMAGES, MIN_LANDSCAPE_IMAGES, MIN_HEADLINES, MIN_LONG_HEADLINES, MIN_DESCRIPTIONS } from "../constants";
import getClasses from "./styles";
import AssetsViewHeader from "./AssetsViewHeader";
import AIAssetsGeneration from "./AIAssetsGeneration";
import TabTexts from "./TabTexts";
import TabVisuals from "./TabVisuals";
import { useTrackEvent } from "../events";
import AIModal from "./AIModal";

var StepAssets = function StepAssets(props) {
  var _assetsManager$filter, _autoCampaign$square_5, _autoCampaign$landsca5, _autoCampaign$headlin3, _autoCampaign$descrip3, _autoCampaign$square_6, _autoCampaign$landsca6, _autoCampaign$square_7, _autoCampaign$landsca7, _autoCampaign$landsca8, _autoCampaign$square_8, _autoCampaign$long_he3, _autoCampaign$headlin4, _autoCampaign$descrip4;

  var translations = props.translations,
      pmaxCampaigns = props.pmaxCampaigns,
      autoCampaign = props.autoCampaign,
      assetsManager = props.assetsManager,
      isLoading = props.isLoading,
      isLoadingAI = props.isLoadingAI,
      onSelectAssets = props.onSelectAssets,
      onSelectAssetsFromAI = props.onSelectAssetsFromAI,
      onUpdateAsset = props.onUpdateAsset,
      onUpdateAssetSection = props.onUpdateAssetSection,
      _onGetAssetsFromPmaxCampaign = props.onGetAssetsFromPmaxCampaign,
      _onGetPreviousState = props.onGetPreviousState,
      onSubmit = props.onSubmit;
  var trackEvent = useTrackEvent();
  var classes = getClasses();
  var sectionsRef = useRef({
    visuals: {},
    texts: {}
  });

  var _usePMaxState = usePMaxState(),
      _usePMaxState2 = _slicedToArray(_usePMaxState, 2),
      state = _usePMaxState2[0],
      dispatch = _usePMaxState2[1];

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      openModal = _useState2[0],
      setOpenModal = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      fromSnackbar = _useState4[0],
      setFromSnackbar = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      modalSection = _useState6[0],
      setModalSection = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      pressed = _useState8[0],
      setPressed = _useState8[1];

  var _useState9 = useState({
    visuals: {
      squareLogos: false,
      landscapeLogos: false,
      squareImages: false,
      landscapeImages: false
    },
    texts: {
      headlines: false,
      longHeadlines: false,
      descriptions: false
    }
  }),
      _useState10 = _slicedToArray(_useState9, 2),
      warnings = _useState10[0],
      setWarnings = _useState10[1];

  var selectAssets = function selectAssets(ids, texts, type, updateAction) {
    onSelectAssets({
      autoCampaignId: autoCampaign.id,
      assets_ids: ids,
      assets_texts: texts,
      type: type,
      update_action: updateAction
    });
  };

  var updateAsset = function updateAsset(id, status, tags, tagAction, feedback) {
    var assetType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "";
    onUpdateAsset({
      id: id,
      status: status,
      tags: tags,
      tag_action: tagAction,
      feedback: feedback,
      asset_type: assetType
    });
  };

  var uploadImage = function uploadImage(base64image, aspectRatio) {
    var assetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
    var logo = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
    trackEvent({
      key: "step_assets_visuals_click_upload_image"
    });
    onUpdateAsset({
      image: base64image,
      aspect_ratio: aspectRatio,
      auto_campaign_id: autoCampaign.id,
      asset_type: assetType,
      logo: logo
    });
  };

  var updateAssetSection = function updateAssetSection(unselectData, selectData) {
    onUpdateAssetSection({
      autoCampaignId: autoCampaign.id,
      unselectData: unselectData,
      selectData: selectData
    });
  };

  var updateAssetsFromAI = function updateAssetsFromAI(data) {
    onSelectAssetsFromAI({
      autoCampaignId: autoCampaign.id,
      images: {
        square_images: data.images.squareImages,
        landscape_images: data.images.landscapeImages,
        square_logo_images: data.images.squareLogo,
        landscape_logo_images: data.images.landscapeLogo
      },
      texts: {
        long_headlines: data.texts.longHeadlines,
        headlines: data.texts.headlines,
        descriptions: data.texts.descriptions
      }
    });
  };

  var handleSubmit = function handleSubmit() {
    var continueFn = function continueFn() {
      return nextStep(dispatch);
    };

    onSubmit(continueFn);
  }; // Check if there are enough assets to continue:


  useEffect(function () {
    var _autoCampaign$square_, _autoCampaign$square_2, _autoCampaign$landsca, _autoCampaign$landsca2, _autoCampaign$square_3, _autoCampaign$square_4, _autoCampaign$landsca3, _autoCampaign$landsca4, _autoCampaign$headlin, _autoCampaign$headlin2, _autoCampaign$long_he, _autoCampaign$long_he2, _autoCampaign$descrip, _autoCampaign$descrip2;

    setWarnings({
      visuals: {
        squareLogos: ((_autoCampaign$square_ = (_autoCampaign$square_2 = autoCampaign.square_logo_images) === null || _autoCampaign$square_2 === void 0 ? void 0 : _autoCampaign$square_2.length) !== null && _autoCampaign$square_ !== void 0 ? _autoCampaign$square_ : 0) < MIN_SQUARE_LOGOS,
        landscapeLogos: ((_autoCampaign$landsca = (_autoCampaign$landsca2 = autoCampaign.landscape_logo_images) === null || _autoCampaign$landsca2 === void 0 ? void 0 : _autoCampaign$landsca2.length) !== null && _autoCampaign$landsca !== void 0 ? _autoCampaign$landsca : 0) < MIN_LANDSCAPE_LOGOS,
        squareImages: ((_autoCampaign$square_3 = (_autoCampaign$square_4 = autoCampaign.square_images) === null || _autoCampaign$square_4 === void 0 ? void 0 : _autoCampaign$square_4.length) !== null && _autoCampaign$square_3 !== void 0 ? _autoCampaign$square_3 : 0) < MIN_SQUARE_IMAGES,
        landscapeImages: ((_autoCampaign$landsca3 = (_autoCampaign$landsca4 = autoCampaign.landscape_images) === null || _autoCampaign$landsca4 === void 0 ? void 0 : _autoCampaign$landsca4.length) !== null && _autoCampaign$landsca3 !== void 0 ? _autoCampaign$landsca3 : 0) < MIN_LANDSCAPE_IMAGES
      },
      texts: {
        headlines: ((_autoCampaign$headlin = (_autoCampaign$headlin2 = autoCampaign.headlines) === null || _autoCampaign$headlin2 === void 0 ? void 0 : _autoCampaign$headlin2.length) !== null && _autoCampaign$headlin !== void 0 ? _autoCampaign$headlin : 0) < MIN_HEADLINES || autoCampaign.headlines.some(function (h) {
          return h.length <= 15;
        }) < 1,
        longHeadlines: ((_autoCampaign$long_he = (_autoCampaign$long_he2 = autoCampaign.long_headlines) === null || _autoCampaign$long_he2 === void 0 ? void 0 : _autoCampaign$long_he2.length) !== null && _autoCampaign$long_he !== void 0 ? _autoCampaign$long_he : 0) < MIN_LONG_HEADLINES,
        descriptions: ((_autoCampaign$descrip = (_autoCampaign$descrip2 = autoCampaign.descriptions) === null || _autoCampaign$descrip2 === void 0 ? void 0 : _autoCampaign$descrip2.length) !== null && _autoCampaign$descrip !== void 0 ? _autoCampaign$descrip : 0) < MIN_DESCRIPTIONS || autoCampaign.descriptions.some(function (d) {
          return d.length <= 60;
        }) < 1
      }
    });
  }, [autoCampaign]);

  var scrollIntoIncompleteField = function scrollIntoIncompleteField() {
    var _Object$entries$find = Object.entries(warnings[state.tab]).find(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 2),
          value = _ref2[1];

      return value;
    }),
        _Object$entries$find2 = _slicedToArray(_Object$entries$find, 1),
        section = _Object$entries$find2[0];

    sectionsRef.current[state.tab][section].scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "center"
    });
  };

  var handleNext = function handleNext() {
    var visualsWarning = Object.values(warnings.visuals).some(Boolean);
    var textsWarning = Object.values(warnings.texts).some(Boolean);

    if (!visualsWarning && !textsWarning) {
      handleSubmit();
    } else {
      setPressed(true);

      if (!visualsWarning) {
        // Only texts tab warnings, move to texts tab
        if (state.tab === "visuals") {
          setTab(dispatch, "texts");
        } else {
          scrollIntoIncompleteField();
        }
      } else if (!textsWarning) {
        // Only visuals tab warnings, move to visuals tab
        if (state.tab === "texts") {
          setTab(dispatch, "visuals");
        } else {
          scrollIntoIncompleteField();
        }
      } else {
        // Both tabs warnings, we stay in the current tab and scroll to first incomplete field
        scrollIntoIncompleteField();
      }
    }
  };

  return /*#__PURE__*/React.createElement(Fill, {
    name: "pmax-creation-step-assets"
  }, /*#__PURE__*/React.createElement(Dialog.Body, null, /*#__PURE__*/React.createElement(AssetsViewHeader, {
    isLoadingAI: isLoadingAI,
    translations: translations,
    onOpenAIModal: function onOpenAIModal() {
      return setOpenModal(true);
    },
    autoCampaign: autoCampaign,
    pmaxCampaigns: pmaxCampaigns === null || pmaxCampaigns === void 0 ? void 0 : pmaxCampaigns.filter(function (campaign) {
      return campaign.id !== autoCampaign.id;
    }),
    onGetAssetsFromPmaxCampaign: function onGetAssetsFromPmaxCampaign(selected) {
      return _onGetAssetsFromPmaxCampaign({
        id: autoCampaign.id,
        selected: selected
      });
    },
    onGetPreviousState: function onGetPreviousState(previousState) {
      return _onGetPreviousState({
        id: autoCampaign.id,
        previousState: previousState
      });
    }
  }), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }), /*#__PURE__*/React.createElement(AIAssetsGeneration, {
    isLoading: isLoading,
    isLoadingAI: isLoadingAI,
    translations: translations,
    suggestedAssets: (_assetsManager$filter = assetsManager === null || assetsManager === void 0 ? void 0 : assetsManager.filter(function (asset) {
      return asset.status === "suggested";
    })) !== null && _assetsManager$filter !== void 0 ? _assetsManager$filter : [],
    onOpenAIModal: function onOpenAIModal() {
      setFromSnackbar(true);
      setOpenModal(true);
    }
  }), /*#__PURE__*/React.createElement(Tabs, {
    value: state.tab,
    variant: "caption",
    onChange: function onChange(tab) {
      return setTab(dispatch, tab);
    },
    sx: {
      marginBottom: "lg",
      maxWidth: "20em"
    }
  }, /*#__PURE__*/React.createElement(Tab, {
    variant: "caption",
    label: translations.header.sections.texts,
    value: "texts",
    dotColor: Object.values(warnings.texts).some(Boolean) ? "warning" : undefined
  }), /*#__PURE__*/React.createElement(Tab, {
    variant: "caption",
    label: translations.header.sections.visuals,
    value: "visuals",
    dotColor: Object.values(warnings.visuals).some(Boolean) ? "warning" : undefined
  })), state.tab === "visuals" && /*#__PURE__*/React.createElement(TabVisuals, {
    isLoading: isLoading,
    ref: sectionsRef,
    pressed: pressed,
    warnings: warnings.visuals,
    translations: translations.visualSection,
    autoCampaign: autoCampaign,
    assets: assetsManager.filter(function (asset) {
      return asset.type === "image" && asset.status === "selected";
    }),
    onUpdateAsset: updateAsset,
    onSelectAssets: selectAssets,
    onUpdateAssetSection: updateAssetSection,
    onUploadImage: uploadImage,
    onOpenAIModal: function onOpenAIModal(section) {
      setModalSection(section);
      setOpenModal(true);
    },
    isLoadingAI: isLoadingAI
  }), state.tab === "texts" && /*#__PURE__*/React.createElement(TabTexts, {
    isLoading: isLoading,
    ref: sectionsRef,
    pressed: pressed,
    warnings: warnings.texts,
    translations: translations.textSection,
    autoCampaign: autoCampaign,
    assetsManager: assetsManager,
    onSelectAssets: selectAssets,
    onOpenAIModal: function onOpenAIModal(section) {
      setModalSection(section);
      setOpenModal(true);
    }
  }), /*#__PURE__*/React.createElement(AIModal, {
    tab: state.tab,
    section: modalSection,
    fromSnackbar: fromSnackbar,
    translations: translations,
    openModal: openModal,
    onClose: function onClose() {
      setFromSnackbar(false);
      setOpenModal(false);
      setModalSection(false);
    },
    allImages: assetsManager.filter(function (asset) {
      return asset.type === "image" && asset.status === "suggested";
    }).slice().reverse(),
    allTexts: assetsManager.filter(function (asset) {
      return asset.type !== "image" && asset.status === "suggested";
    }).slice().reverse(),
    minRequired: {
      squareImages: (autoCampaign === null || autoCampaign === void 0 ? void 0 : (_autoCampaign$square_5 = autoCampaign.square_images) === null || _autoCampaign$square_5 === void 0 ? void 0 : _autoCampaign$square_5.length) >= MIN_SQUARE_IMAGES ? 0 : MIN_SQUARE_IMAGES,
      landscapeImages: (autoCampaign === null || autoCampaign === void 0 ? void 0 : (_autoCampaign$landsca5 = autoCampaign.landscape_images) === null || _autoCampaign$landsca5 === void 0 ? void 0 : _autoCampaign$landsca5.length) >= MIN_LANDSCAPE_IMAGES ? 0 : MIN_LANDSCAPE_IMAGES,
      headlines: autoCampaign !== null && autoCampaign !== void 0 && (_autoCampaign$headlin3 = autoCampaign.headlines) !== null && _autoCampaign$headlin3 !== void 0 && _autoCampaign$headlin3.some(function (h) {
        return h.length <= 15;
      }) ? 0 : 1,
      descriptions: autoCampaign !== null && autoCampaign !== void 0 && (_autoCampaign$descrip3 = autoCampaign.descriptions) !== null && _autoCampaign$descrip3 !== void 0 && _autoCampaign$descrip3.some(function (d) {
        return d.length <= 60;
      }) ? 0 : 1,
      squareLogo: 0,
      landscapeLogo: 0,
      longHeadlines: 0
    },
    maxToSelect: {
      squareLogo: 1 - ((_autoCampaign$square_6 = autoCampaign.square_logo_images) === null || _autoCampaign$square_6 === void 0 ? void 0 : _autoCampaign$square_6.length) || 0,
      landscapeLogo: 1 - ((_autoCampaign$landsca6 = autoCampaign.landscape_logo_images) === null || _autoCampaign$landsca6 === void 0 ? void 0 : _autoCampaign$landsca6.length) || 0,
      squareImages: 20 - (((_autoCampaign$square_7 = autoCampaign.square_images) === null || _autoCampaign$square_7 === void 0 ? void 0 : _autoCampaign$square_7.length) || 0) - (((_autoCampaign$landsca7 = autoCampaign.landscape_images) === null || _autoCampaign$landsca7 === void 0 ? void 0 : _autoCampaign$landsca7.length) || 1),
      landscapeImages: 20 - (((_autoCampaign$landsca8 = autoCampaign.landscape_images) === null || _autoCampaign$landsca8 === void 0 ? void 0 : _autoCampaign$landsca8.length) || 0) - (((_autoCampaign$square_8 = autoCampaign.square_images) === null || _autoCampaign$square_8 === void 0 ? void 0 : _autoCampaign$square_8.length) || 1),
      longHeadlines: 5 - ((_autoCampaign$long_he3 = autoCampaign.long_headlines) === null || _autoCampaign$long_he3 === void 0 ? void 0 : _autoCampaign$long_he3.length) || 0,
      headlines: 15 - (((_autoCampaign$headlin4 = autoCampaign.headlines) === null || _autoCampaign$headlin4 === void 0 ? void 0 : _autoCampaign$headlin4.length) || 0),
      descriptions: 5 - (((_autoCampaign$descrip4 = autoCampaign.descriptions) === null || _autoCampaign$descrip4 === void 0 ? void 0 : _autoCampaign$descrip4.length) || 0)
    },
    updateAutoCampaign: function updateAutoCampaign(data) {
      return updateAssetsFromAI(data);
    }
  })), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "terciary",
    onClick: function onClick() {
      return previousStep(dispatch);
    }
  }, translations.cancelButton), Object.values(warnings).some(function (tab) {
    return Object.values(tab).some(Boolean);
  }) ? /*#__PURE__*/React.createElement(ButtonTooltip, {
    title: translations.tooltip
  }, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleNext
  }, translations.continueButton)) : /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleNext,
    disabled: isLoading
  }, translations.continueButton)));
};

var ButtonTooltip = styled(Tooltip)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 350px;\n"])));
export default StepAssets;