import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from "react";
import Chip from "../../../../ui/Chip";
import CssFlex from "../../../../ui/CssFlex";
import Popover from "../../../../ui/lab/Popover";
import Typography from "../../../../ui/Typography";
import Checkbox from "../../../../ui/next/Checkbox";
import TextField from "../../../../ui/next/TextField";
import Link from "../../../../ui/Link";
import Button from "../../../../ui/next/Button";
import InputAdornment from "../../../../ui/next/InputAdornment";
import IconSearch from "../../../../ui/Icon/Search";
import Equalizer from "../../../../ui/Icon/Equalizer";
import Enter from "../../../../ui/Icon/Enter";
import getClasses from "./styles";

var Filter = function Filter(props) {
  var translations = props.translations,
      typeTranslations = props.typeTranslations,
      modal = props.modal,
      video = props.video,
      applyFilters = props.applyFilters,
      reload = props.reload,
      isLoadingAssets = props.isLoadingAssets,
      onTrackEvent = props.onTrackEvent;

  var _useState = useState(""),
      _useState2 = _slicedToArray(_useState, 2),
      textFieldValue = _useState2[0],
      setTextFieldValue = _useState2[1];

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      appliedFilters = _useState4[0],
      setAppliedFilters = _useState4[1];

  var _useState5 = useState([]),
      _useState6 = _slicedToArray(_useState5, 2),
      auxFilters = _useState6[0],
      setAuxFilters = _useState6[1];

  var classes = getClasses();
  var filterOptions = {
    orientation: [{
      label: "".concat(translations.filter.orientation.option1),
      value: "all"
    }, {
      label: "".concat(translations.filter.orientation.option2),
      value: "square"
    }, {
      label: "".concat(translations.filter.orientation.option3),
      value: "landscape"
    }],
    source: [{
      label: "".concat(translations.filter.source.option1),
      value: "all"
    }, {
      label: "".concat(translations.filter.source.option2),
      value: "ai"
    }, {
      label: "".concat(translations.filter.source.option3),
      value: "user"
    } // { label: `${translations.filter.source.option4}`, value: "media" },
    ]
  };

  var manageFilter = function manageFilter(value, type) {
    var auxFilterGroup = auxFilters;
    var auxValues = auxFilters.filter(function (item) {
      return item.type === type;
    }).map(function (item) {
      return item.value;
    });
    var label = "";

    if (type !== "tagged") {
      label = filterOptions[type].find(function (item) {
        return item.value === value;
      }).label;
    }

    var newFilter = [].concat(_toConsumableArray(auxFilterGroup), [{
      type: type,
      label: label,
      value: value
    }]);

    if (auxValues.includes(value)) {
      if (type !== "tagged") {
        newFilter = auxFilterGroup.filter(function (item) {
          return item.value !== value || item.type !== type;
        });
      } else {
        newFilter = auxFilterGroup;
      }
    }

    setAuxFilters(newFilter);
    return newFilter;
  };

  var handleFilters = function handleFilters() {
    setAppliedFilters(auxFilters);
    applyFilters(auxFilters);
  };

  var addTagFilter = function addTagFilter() {
    if (textFieldValue.trim() !== "") {
      var filters = manageFilter(textFieldValue, "tagged");
      setAppliedFilters(filters);
      applyFilters(filters);
      setTextFieldValue("");
    }
  };

  var handleKeyPress = function handleKeyPress(event) {
    if (event.key === "Enter") {
      addTagFilter();
    }
  };

  var deleteFilterValue = function deleteFilterValue(value, type) {
    var auxFilterGroup = auxFilters.filter(function (item) {
      return item.type !== type || item.value !== value;
    });
    setAuxFilters(auxFilterGroup);
    setAppliedFilters(auxFilterGroup);
    applyFilters(auxFilterGroup);
  };

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

  var handlePopoverClose = function handlePopoverClose(action) {
    if (action === "apply") {
      onTrackEvent === null || onTrackEvent === void 0 ? void 0 : onTrackEvent("apply_filters");
      handleFilters();
    } else {
      setAuxFilters(appliedFilters);
    }

    setOpenPopover(!openPopover);
  };

  var handleOpenPopover = function handleOpenPopover() {
    if (!isLoadingAssets) {
      setOpenPopover(!openPopover);
    }
  };

  var getChipLabel = function getChipLabel(item) {
    var res = "";

    if (item.type === "orientation") {
      res = "".concat(translations.filter.aspect_chip, " ").concat(item.label);
    } else if (item.type === "source") {
      res = "".concat(translations.filter.source_chip, "  ").concat(item.label);
    } else {
      res = "".concat(translations.filter.tagged_chip, "  ").concat(item.value);
    }

    return res;
  }; // Este useEffect es para actualizar el contenido del modal de asset manager al sugerir desde IA:


  useEffect(function () {
    setAppliedFilters([]);
    setAuxFilters([]);
    applyFilters([]);
  }, [reload]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "sm",
    width: "100%",
    maxWidth: "450px",
    mx: ["md", "lg"]
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "md",
    justifyContent: "center",
    mb: "sm",
    width: "100%"
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.inputContainer
  }, /*#__PURE__*/React.createElement(TextField, {
    className: classes.input,
    value: textFieldValue,
    placeholder: typeTranslations.modal.placeholder,
    startAdornment: /*#__PURE__*/React.createElement(InputAdornment, null, /*#__PURE__*/React.createElement(IconSearch, {
      color: "primary"
    })),
    onChange: function onChange(ev) {
      return setTextFieldValue(ev.target.value);
    },
    onKeyPress: handleKeyPress,
    disabled: isLoadingAssets
  }), /*#__PURE__*/React.createElement(Button, {
    onClick: addTagFilter,
    className: classes.enterButton
  }, /*#__PURE__*/React.createElement(Enter, null))), /*#__PURE__*/React.createElement(Popover, {
    open: openPopover,
    onOpenChange: handleOpenPopover,
    placement: "bottom-center"
  }, /*#__PURE__*/React.createElement(Popover.Trigger, null, /*#__PURE__*/React.createElement(Button, {
    variant: "secondary",
    disabled: isLoadingAssets,
    "data-applied": appliedFilters.length > 0,
    className: classes.filterTrigger,
    onClick: function onClick() {
      return onTrackEvent === null || onTrackEvent === void 0 ? void 0 : onTrackEvent("open_filters");
    }
  }, /*#__PURE__*/React.createElement(Equalizer, {
    size: 24
  }))), /*#__PURE__*/React.createElement(Popover.Content, {
    side: "bottom",
    className: classes.popover
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md",
    p: "xl"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title",
    color: "primary",
    weight: "bold"
  }, translations.filter.title), /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "space-between",
    gap: "lg"
  }, (!modal || video) && /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    weight: "semibold",
    shade: 900
  }, translations.filter.orientation.title), filterOptions.orientation.map(function (filter) {
    return /*#__PURE__*/React.createElement(Checkbox, {
      key: filter.value,
      value: filter.value,
      checked: auxFilters.filter(function (item) {
        return item.type === "orientation" && item.value === filter.value;
      }).length !== 0,
      disabled: filter.value !== "all" && auxFilters.filter(function (item) {
        return item.type === "orientation" && item.value === "all";
      }).length !== 0,
      onChange: function onChange(ev) {
        onTrackEvent === null || onTrackEvent === void 0 ? void 0 : onTrackEvent("update_orientation");
        manageFilter(ev.target.value, "orientation");
      }
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "inputText",
      weight: "semibold",
      shade: auxFilters.filter(function (item) {
        return item.type === "orientation" && item.value === filter.value;
      }).length !== 0 ? 900 : 400
    }, filter.label));
  })), !video && /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    weight: "semibold",
    shade: 900
  }, translations.filter.source.title), filterOptions.source.map(function (filter) {
    return /*#__PURE__*/React.createElement(Checkbox, {
      key: filter.value,
      value: filter.value,
      checked: auxFilters.filter(function (item) {
        return item.type === "source" && item.value === filter.value;
      }).length !== 0,
      disabled: filter.value !== "all" && auxFilters.filter(function (item) {
        return item.type === "source" && item.value === "all";
      }).length !== 0,
      onChange: function onChange(ev) {
        onTrackEvent === null || onTrackEvent === void 0 ? void 0 : onTrackEvent("update_source");
        manageFilter(ev.target.value, "source");
      }
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "inputText",
      weight: "semibold",
      shade: auxFilters.filter(function (item) {
        return item.type === "source" && item.value === filter.value;
      }).length !== 0 ? 900 : 400
    }, filter.label));
  }))), /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "space-between",
    gap: "lg"
  }, /*#__PURE__*/React.createElement(Link, {
    onClick: function onClick() {
      return handlePopoverClose("close");
    }
  }, translations.filter.cancel), /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return handlePopoverClose("apply");
    },
    variant: "primary"
  }, translations.filter.apply)))))), appliedFilters.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 900,
    weight: "semibold"
  }, typeTranslations.modal.results), /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm",
    flexWrap: "wrap"
  }, appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.map(function (item) {
    return /*#__PURE__*/React.createElement(Chip, {
      key: "".concat(item.type, "_").concat(item.value),
      color: "primary",
      label: getChipLabel(item),
      onDelete: function onDelete() {
        return deleteFilterValue(item.value, item.type);
      }
    });
  }))));
};

export default Filter;