import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from "react";
import CssFlex from "../../../../ui/CssFlex";
import Filter from "../../../PMAXAssetsManagerView/components/filter";
import SelectableGallery from "../../../PMAXAssetsManagerView/components/selectableGallery";

var GalleryArea = function GalleryArea(props) {
  var translations = props.translations,
      typeTranslations = props.typeTranslations,
      images = props.images,
      landscape = props.landscape,
      video = props.video,
      onRemoveAsset = props.onRemoveAsset;
  var selected = props.selected,
      setSelected = props.setSelected,
      maxToSelect = props.maxToSelect,
      minWidth = props.minWidth,
      imagesPerRow = props.imagesPerRow,
      modal = props.modal,
      isLoadingAssets = props.isLoadingAssets;

  var _useState = useState(images),
      _useState2 = _slicedToArray(_useState, 2),
      filteredImages = _useState2[0],
      setFilteredImages = _useState2[1];

  var applyFilters = function applyFilters(filters) {
    var tags = filters.filter(function (filter) {
      return filter.type === "tagged";
    }).map(function (filter) {
      return filter.value;
    });
    var orientation = filters.filter(function (filter) {
      return filter.type === "orientation";
    }).map(function (filter) {
      return filter.value;
    });
    var source = filters.filter(function (filter) {
      return filter.type === "source";
    }).map(function (filter) {
      return filter.value;
    });
    var newImages = images.filter(function (image) {
      var res = true;

      if (tags.length > 0) {
        res = res && tags.some(function (tag) {
          return image.tags.includes(tag);
        });
      }

      ;

      if (orientation.length > 0 && !orientation.includes("all")) {
        var res1 = orientation.includes("square") ? image.aspect_ratio === 1 : false;
        var res2 = orientation.includes("landscape") ? image.aspect_ratio !== 1 : false;
        res = res && (!!res1 || !!res2);
      }

      ;

      if (source.length > 0 && !source.includes("all")) {
        var _res = source.includes("user") ? image.source === "user" : false;

        var _res2 = source.includes("ai") ? image.source === "ai" || image.source === "pexels" : false;

        res = res && (!!_res || !!_res2);
      }

      ;
      return res;
    });
    setFilteredImages(newImages);
  }; // Actualiza el contenido del modal assetManager al sugerir desde IA, "reload" permite borrar los filtros previos al actualizar:


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

  useEffect(function () {
    setFilteredImages(images);
    setReload(!reload);
  }, [images]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "lg",
    alignItems: "center",
    pt: "lg"
  }, /*#__PURE__*/React.createElement(Filter, {
    applyFilters: applyFilters,
    video: video,
    modal: modal,
    reload: reload,
    translations: translations,
    isLoadingAssets: isLoadingAssets,
    typeTranslations: typeTranslations
  }), /*#__PURE__*/React.createElement(SelectableGallery, {
    modal: modal,
    minWidth: minWidth,
    maxImages: 21,
    imagesPerRow: imagesPerRow || 7,
    landscape: landscape,
    video: video,
    images: filteredImages,
    onRemoveAsset: onRemoveAsset,
    selectedAssets: selected,
    setSelectedAssets: setSelected,
    maxToSelect: maxToSelect,
    translations: translations,
    isLoadingAssets: isLoadingAssets
  }));
};

export default GalleryArea;