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

var GalleryArea = function GalleryArea(props) {
  var images = props.images,
      landscape = props.landscape,
      video = props.video,
      onRemoveAsset = props.onRemoveAsset,
      translations = props.translations,
      isLoadingAssets = props.isLoadingAssets;

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

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedIndexes = _useState4[0],
      setSelectedIndexes = _useState4[1];

  var trackEvent = useTrackEvent();

  var applyFilters = function applyFilters(filters) {
    setSelectedIndexes([]);
    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 _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      reload = _useState6[0],
      setReload = _useState6[1];

  useEffect(function () {
    setFilteredImages(images);
    setReload(!reload);
  }, [images]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "lg",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Filter, {
    applyFilters: applyFilters,
    video: video,
    translations: translations,
    typeTranslations: translations,
    onTrackEvent: function onTrackEvent(ev) {
      if (ev === "apply_filters") {
        trackEvent({
          key: "asset_manager_filters_click_apply"
        });
      }

      if (ev === "open_filters") {
        trackEvent({
          key: "asset_manager_click_filters"
        });
      }

      if (ev === "update_orientation") {
        trackEvent({
          key: "asset_manager_filters_update_orientation"
        });
      }

      if (ev === "update_source") {
        trackEvent({
          key: "asset_manager_filters_update_source"
        });
      }
    }
  }), /*#__PURE__*/React.createElement(SelectableGallery, {
    maxImages: 14,
    minWidth: "100px",
    imagesPerRow: 7,
    landscape: landscape,
    images: filteredImages,
    onRemoveAsset: onRemoveAsset,
    translations: translations,
    selectedAssets: selectedIndexes,
    setSelectedAssets: setSelectedIndexes,
    isLoadingAssets: isLoadingAssets
  }));
};

export default GalleryArea;