"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CommunityCategories = CommunityCategories;
var _reactNative = require("react-native");
var _CommunityCategory = require("../../elements/CommunityCategory/CommunityCategory");
var _styles = require("./styles");
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const MAX_VISIBLE_CATEGORIES = 2;
function CommunityCategories({
  categories = [],
  allVisible,
  ...props
}) {
  const {
    styles
  } = (0, _styles.useStyles)();
  const visibleCategories = categories.slice(0, MAX_VISIBLE_CATEGORIES);
  const hiddenCategoriesCount = categories.length - MAX_VISIBLE_CATEGORIES;
  const showMoreText = hiddenCategoriesCount > 0 ? `+${hiddenCategoriesCount}` : '';
  const showMore = hiddenCategoriesCount > 0;

  // Dynamic maxWidth based on number of visible categories
  const getMaxWidthForItem = totalVisibleItems => {
    // If allVisible is true, return 100% for all items
    if (allVisible) {
      return '100%';
    }

    // If only 1 visible category, let it use more space (but still have some limit)
    if (totalVisibleItems === 1 && !showMore) {
      return '100%'; // Use percentage for flexibility
    }
    if (totalVisibleItems === 2 && !showMore) {
      return '50%'; // Use percentage for flexibility
    }

    // More restrictive as items increase
    if (totalVisibleItems === 2 || showMore) {
      return '40%'; // Match your existing maxWidth
    }

    // Default case
    return '40%';
  };

  // Choose all categories or just the visible ones based on allVisible
  const displayCategories = allVisible ? categories : visibleCategories;
  // Only show more indicator if not showing all categories
  const displayShowMore = !allVisible && showMore;
  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
    style: styles.container
  }, props), allVisible ? /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
    horizontal: true,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: styles.scrollableContainer
  }, displayCategories.map((category, index) => /*#__PURE__*/React.createElement(_CommunityCategory.CommunityCategory, {
    key: index,
    categoryName: category.name,
    maxWidth: getMaxWidthForItem(displayCategories.length)
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, displayCategories.map((category, index) => /*#__PURE__*/React.createElement(_CommunityCategory.CommunityCategory, {
    key: index,
    categoryName: category.name,
    maxWidth: getMaxWidthForItem(displayCategories.length)
  })), displayShowMore && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.chipContainer
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.chipText
  }, showMoreText))));
}
//# sourceMappingURL=CommunityCategories.js.map