import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from "react";
import CssFlex from "../../../../ui/CssFlex";
import Dialog from "../../../../ui/lab/Dialog";
import Typography from "../../../../ui/Typography";
import { useTrackEvent } from "../../events";
import GalleryArea from "./GalleryArea";
import UploadImagesMenu from "./UploadImagesMenu";

var AssetsManagerModal = function AssetsManagerModal(props) {
  var open = props.open,
      setOpen = props.setOpen,
      logo = props.logo,
      landscape = props.landscape,
      video = props.video,
      maxToSelect = props.maxToSelect,
      images = props.images;
  var onUploadImage = props.onUploadImage,
      onGetAISuggestions = props.onGetAISuggestions,
      translations = props.translations,
      isLoadingAI = props.isLoadingAI;
  var selectedImages = props.selectedImages,
      onUpdateAssetSection = props.onUpdateAssetSection;
  var trackEvent = useTrackEvent();

  var _useState = useState(selectedImages),
      _useState2 = _slicedToArray(_useState, 2),
      selected = _useState2[0],
      setSelected = _useState2[1];

  var _useState3 = useState(images.slice().reverse()),
      _useState4 = _slicedToArray(_useState3, 2),
      filteredAssets = _useState4[0],
      setFilteredAssets = _useState4[1];

  var handleSelectAsset = function handleSelectAsset() {
    var prevSelected = selectedImages;
    var newSelected = selected;
    var type;

    if (logo) {
      type = landscape ? "landscape_logo_images" : "square_logo_images";
    } else {
      type = landscape ? "landscape_images" : "square_images";
    }

    var unselectData = {
      assets_ids: prevSelected.filter(function (id) {
        return !newSelected.includes(id);
      }),
      assets_texts: [],
      type: type,
      update_action: "unselect"
    };
    var selectData = {
      assets_ids: newSelected.filter(function (id) {
        return !prevSelected.includes(id);
      }),
      assets_texts: [],
      type: type,
      update_action: "select"
    };
    onUpdateAssetSection(unselectData, selectData);
    setOpen(false);
  };

  var getTypeTranslations = function getTypeTranslations() {
    var copys = {};

    if (logo) {
      if (landscape) {
        copys = translations.landscapeLogo;
      } else {
        copys = translations.squareLogo;
      }
    } else if (!video) {
      if (landscape) {
        copys = translations.landscapeImages;
      } else {
        copys = translations.squareImages;
      }
    } else {
      copys = translations.videos;
    }

    return copys;
  };

  useEffect(function () {
    setFilteredAssets(images.slice().reverse());
    setSelected(selectedImages);
  }, [logo, landscape, video, images]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
    open: open,
    onClose: function onClose() {
      return setOpen(false);
    }
  }, /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "space-between",
    alignItems: "center",
    gap: "sm",
    width: "100%"
  }, /*#__PURE__*/React.createElement(Typography, {
    component: "h2",
    variant: "title2",
    weight: "semibold",
    shade: 800
  }, getTypeTranslations().modal.title), /*#__PURE__*/React.createElement(UploadImagesMenu, {
    modal: true,
    logo: logo,
    landscape: landscape,
    onUploadImage: onUploadImage,
    onGetAISuggestions: onGetAISuggestions,
    disableAIButton: isLoadingAI,
    translations: translations,
    typeTranslations: getTypeTranslations(),
    onTrackEvent: function onTrackEvent(ev) {
      if (ev === "open_add_image") {
        trackEvent({
          key: "step_assets_visuals_click_add_image"
        });
      }
    }
  })), /*#__PURE__*/React.createElement(Dialog.Body, {
    mb: "md"
  }, /*#__PURE__*/React.createElement(GalleryArea, {
    modal: true,
    video: video,
    minWidth: landscape ? "110px" : "80px",
    landscape: landscape,
    images: filteredAssets,
    maxToSelect: maxToSelect,
    selected: selected,
    setSelected: setSelected,
    imagesPerRow: landscape ? 5 : 7,
    translations: translations,
    typeTranslations: getTypeTranslations()
  })), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "terciary",
    color: "primary",
    onClick: function onClick() {
      return setOpen(false);
    }
  }, getTypeTranslations().modal.cancelButton), /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "primary",
    disabled: selected.length === 0,
    onClick: handleSelectAsset
  }, selected.length === 0 ? getTypeTranslations().modal.disabledButton : getTypeTranslations().modal.button.replace("{number}", selected.length)))));
};

export default AssetsManagerModal;