"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockTypesList;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
var _inserterButton = _interopRequireDefault(require("../inserter-button"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const MIN_COL_NUM = 3;
function BlockTypesList({
  name,
  sections,
  onSelect,
  label,
  listProps,
  initialNumToRender = 3
}) {
  const [numberOfColumns, setNumberOfColumns] = (0, _element.useState)(MIN_COL_NUM);
  const [itemWidth, setItemWidth] = (0, _element.useState)();
  const [maxWidth, setMaxWidth] = (0, _element.useState)();
  (0, _element.useEffect)(() => {
    const dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', onLayout);
    onLayout();
    return () => {
      dimensionsChangeSubscription.remove();
    };
  }, []);
  function calculateItemWidth() {
    const {
      paddingLeft: itemPaddingLeft,
      paddingRight: itemPaddingRight
    } = _inserterButton.default.Styles.modalItem;
    const {
      width
    } = _inserterButton.default.Styles.modalIconWrapper;
    return width + itemPaddingLeft + itemPaddingRight;
  }
  function onLayout() {
    const columnStyle = _style.default['block-types-list__column'];
    const sumLeftRightPadding = columnStyle.paddingLeft + columnStyle.paddingRight;
    const bottomSheetWidth = _components.BottomSheet.getWidth();
    const containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;
    const itemTotalWidth = calculateItemWidth();
    const columnsFitToWidth = Math.floor(containerTotalWidth / itemTotalWidth);
    const numColumns = Math.max(MIN_COL_NUM, columnsFitToWidth);
    setNumberOfColumns(numColumns);
    setMaxWidth(containerTotalWidth / numColumns);
    if (columnsFitToWidth < MIN_COL_NUM) {
      const updatedItemWidth = (bottomSheetWidth - 2 * sumLeftRightPadding) / MIN_COL_NUM;
      setItemWidth(updatedItemWidth);
    }
  }
  const contentContainerStyle = _reactNative.StyleSheet.flatten(listProps.contentContainerStyle);
  const renderSection = ({
    item
  }) => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
      accessible: false,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
        data: item.list,
        // Re-render when numberOfColumns changes.
        numColumns: numberOfColumns,
        ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
          accessible: false,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: _style.default['block-types-list__row-separator']
          })
        }),
        scrollEnabled: false,
        renderItem: renderListItem
      }, `InserterUI-${name}-${numberOfColumns}`)
    });
  };
  const renderListItem = ({
    item
  }) => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterButton.default, {
      item: item,
      itemWidth: itemWidth,
      maxWidth: maxWidth,
      onSelect: onSelect
    });
  };
  const colorScheme = (0, _compose.usePreferredColorScheme)();
  const sectionHeaderGradientValue = colorScheme === 'light' ? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))' : 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
  const sectionHeaderTitleStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['block-types-list__section-header-title'], _style.default['block-types-list__section-header-title--dark']);
  const renderSectionHeader = ({
    section: {
      metadata
    }
  }) => {
    if (!metadata?.icon || !metadata?.title) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
      accessible: false,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Gradient, {
        gradientValue: sectionHeaderGradientValue,
        style: _style.default['block-types-list__section-header'],
        children: [metadata?.icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: sectionHeaderTitleStyles,
          children: metadata?.title
        })]
      })
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.SectionList, {
    onLayout: onLayout,
    testID: `InserterUI-${name}`,
    accessibilityLabel: label,
    keyboardShouldPersistTaps: "always",
    sections: sections,
    initialNumToRender: initialNumToRender,
    renderItem: renderSection,
    renderSectionHeader: renderSectionHeader,
    ...listProps,
    contentContainerStyle: {
      ...contentContainerStyle,
      paddingBottom: Math.max(listProps.safeAreaBottomInset, contentContainerStyle.paddingBottom)
    }
  });
}
//# sourceMappingURL=index.native.js.map