import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from "react";
import CssFlex from "../../../../../ui/CssFlex";
import CssGrid from "../../../../../ui/CssGrid";
import Typography from "../../../../../ui/Typography";
import CollapsableChipsList from "../../../../../ui/CollapsableChipsList";
import TextField from "../../../../../ui/next/TextField";
import ChevronRight from "../../../../../ui/Icon/ChevronRight";
import Warning from "../../../../../ui/Icon/Warning";
import Gallery from "../../../../PMAXAssetsManagerView/components/gallery";
import getClasses from "../styles";
import ImageSectionBody from "./ImageSectionBody";
import ImageSectionHeader from "./ImageSectionHeader";
import AssetsManagerModal from "../AssetsManagerModal";
import { useTrackEvent } from "../../../events";
var ImageSection = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var translations = props.translations,
      typeTranslations = props.typeTranslations,
      images = props.images,
      logo = props.logo,
      landscape = props.landscape,
      video = props.video;
  var minAssets = props.minAssets,
      maxAssets = props.maxAssets,
      warning = props.warning,
      pressed = props.pressed,
      onSelectAssets = props.onSelectAssets,
      onUpdateAsset = props.onUpdateAsset;
  var assets = props.assets,
      onUploadImage = props.onUploadImage,
      onGetAISuggestions = props.onGetAISuggestions,
      isLoading = props.isLoading,
      isLoadingAI = props.isLoadingAI;
  var onUpdateAssetSection = props.onUpdateAssetSection,
      type = props.type;
  var trackEvent = useTrackEvent();

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

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

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      imageIndex = _useState6[0],
      setImageIndex = _useState6[1];

  var galleryImages = images.slice().reverse();

  var _useState7 = useState((galleryImages === null || galleryImages === void 0 ? void 0 : galleryImages.first) || undefined),
      _useState8 = _slicedToArray(_useState7, 2),
      image = _useState8[0],
      setImage = _useState8[1];

  var classes = getClasses({
    showTags: showTags
  });

  var updateTags = function updateTags(id, value, action) {
    onUpdateAsset(id, undefined, value, action, undefined, type);
  };

  var handleAddTag = function handleAddTag(ev, onClose) {
    if (ev.type === "blur" || ev.type === "keypress" && ev.key === "Enter") {
      if (ev.target.value) {
        updateTags(image.id, ev.target.value, "add");
      }

      onClose();
    }
  };

  var handleGetAISuggestions = function handleGetAISuggestions() {
    onGetAISuggestions(type);
  };

  var handleCloseModal = function handleCloseModal() {
    setOpen(false);
  };

  var handleOpenModal = function handleOpenModal() {
    trackEvent({
      key: "step_assets_visuals_click_add_image"
    });
    setOpen(true);
  };

  useEffect(function () {
    if (imageIndex !== -1) {
      setImage(galleryImages[imageIndex]);
    } else if (images.length >= minAssets) {
      setImage(galleryImages[0]);
    }
  }, [imageIndex, images]);
  useEffect(function () {
    if (!warning || !pressed) {
      setImage(galleryImages[imageIndex]);
    } else {
      setImage(undefined);
      setImageIndex(-1);
    }
  }, [pressed]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssFlex, {
    ref: ref,
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(ImageSectionHeader, {
    logo: logo,
    video: video,
    warning: warning,
    openAssetsModal: handleOpenModal,
    maxAssets: maxAssets - images.length,
    translations: typeTranslations
  }), /*#__PURE__*/React.createElement(CssGrid, {
    gap: "lg",
    width: "100%",
    maxWidth: !logo && landscape ? "582px" : "",
    alignSelf: "center",
    templateColumns: landscape ? "1fr" : "repeat(auto-fill, minmax(max(160px, calc((100% - 24px) / 2)), 1fr))",
    placeItems: landscape && !logo ? "center" : "stretch"
  }, /*#__PURE__*/React.createElement(ImageSectionBody, {
    logo: logo,
    type: type,
    landscape: landscape,
    image: image,
    video: video,
    warning: warning,
    pressed: pressed,
    onSelectAssets: onSelectAssets,
    onUploadImage: onUploadImage,
    onUpdateAsset: onUpdateAsset,
    openAssetsModal: handleOpenModal,
    translations: translations,
    typeTranslations: typeTranslations,
    isLoading: isLoading,
    dragAndDrop: true
  }), !logo && /*#__PURE__*/React.createElement(Gallery, {
    images: galleryImages,
    landscape: landscape,
    imageIndex: imageIndex,
    setImageIndex: setImageIndex,
    imagesPerRow: 5,
    maxImages: 15,
    isLoading: isLoading
  })), !logo && image && !isLoading && /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    component: "button",
    alignItems: "center",
    gap: "xs",
    onClick: function onClick() {
      return setShowTags(!showTags);
    },
    className: classes.button
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 800
  }, translations.tags.title), /*#__PURE__*/React.createElement(ChevronRight, {
    shade: 400,
    className: classes.rotateIcon
  })), showTags && /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: image.tags,
    displayCount: 3,
    onDelete: function onDelete(item) {
      return updateTags(image.id, item, "remove");
    },
    addText: translations.tags.addTag,
    renderAddInput: function renderAddInput(_ref) {
      var onClose = _ref.onClose;
      return /*#__PURE__*/React.createElement(TextField, {
        onKeyPress: function onKeyPress(ev) {
          return handleAddTag(ev, onClose);
        },
        onBlur: function onBlur(ev) {
          return handleAddTag(ev, onClose);
        },
        autoFocus: "on",
        className: classes.tagEditable
      });
    }
  })), warning && !image && pressed && !isLoading && /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm",
    width: "0px",
    minWidth: "100%"
  }, /*#__PURE__*/React.createElement(Warning, {
    color: "warning",
    size: 24,
    className: classes.noShrink
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "warning"
  }, typeTranslations.warning.replace("{number}", minAssets)))), /*#__PURE__*/React.createElement(AssetsManagerModal, {
    open: open,
    setOpen: handleCloseModal,
    logo: logo,
    video: video,
    landscape: landscape,
    maxToSelect: maxAssets,
    selectedImages: galleryImages.map(function (im) {
      return im.id;
    }),
    onUpdateAssetSection: onUpdateAssetSection,
    images: assets,
    isLoadingAI: isLoadingAI,
    onSelectAssets: onSelectAssets,
    onUploadImage: onUploadImage,
    onGetAISuggestions: handleGetAISuggestions,
    translations: translations
  }));
});
export default ImageSection;