"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockTypesTab = _interopRequireDefault(require("./block-types-tab"));
var _reusableBlocksTab = _interopRequireDefault(require("./reusable-blocks-tab"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const TAB_ANIMATION_DURATION = 250;
function InserterTabs({
  listProps,
  onSelect,
  rootClientId,
  showReusableBlocks,
  tabIndex
}) {
  const tabAnimation = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
  const lastScrollEvents = (0, _element.useRef)([]).current;
  const [wrapperWidth, setWrapperWidth] = (0, _element.useState)(0);
  function onScroll(event) {
    lastScrollEvents[tabIndex] = event.nativeEvent;
    listProps.onScroll(event);
  }
  const onWrapperLayout = (0, _element.useCallback)(({
    nativeEvent
  }) => {
    setWrapperWidth(nativeEvent.layout.width);
  }, [setWrapperWidth]);
  (0, _element.useEffect)(() => {
    _reactNative.Animated.timing(tabAnimation, {
      duration: TAB_ANIMATION_DURATION,
      toValue: tabIndex,
      useNativeDriver: true
    }).start();

    // Notify upstream with the last scroll event of the current tab.
    const lastScrollEvent = lastScrollEvents[tabIndex];
    if (lastScrollEvent) {
      listProps.onScroll({
        nativeEvent: lastScrollEvent
      });
    }
  }, [tabIndex]);
  const {
    tabs,
    tabKeys
  } = (0, _element.useMemo)(() => {
    const filteredTabs = InserterTabs.getTabs().filter(({
      name
    }) => showReusableBlocks || name !== 'reusable');
    return {
      tabs: filteredTabs,
      tabKeys: [...filteredTabs.keys()]
    };
  }, [showReusableBlocks]);
  const translateX = (0, _element.useMemo)(() => tabKeys.length > 1 ? tabAnimation.interpolate({
    inputRange: tabKeys,
    outputRange: tabKeys.map(key => key * -wrapperWidth)
  }) : tabAnimation, [tabAnimation, tabKeys, wrapperWidth]);
  const containerStyle = [_style.default['inserter-tabs__container'], {
    width: wrapperWidth * tabKeys.length,
    transform: [{
      translateX
    }]
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: _style.default['inserter-tabs__wrapper'],
    onLayout: onWrapperLayout,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
      style: containerStyle,
      children: tabs.map(({
        component: TabComponent
      }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabComponent, {
          rootClientId: rootClientId,
          onSelect: onSelect,
          listProps: {
            ...listProps,
            onScroll
          }
        })
      }, `tab-${index}`))
    })
  });
}
function TabsControl({
  onChangeTab,
  showReusableBlocks
}) {
  const tabs = InserterTabs.getTabs();
  const segments = (0, _element.useMemo)(() => {
    const filteredTabs = tabs.filter(({
      name
    }) => showReusableBlocks || name !== 'reusable');
    return filteredTabs.map(({
      title
    }) => title);
  }, [showReusableBlocks]);
  const segmentHandler = (0, _element.useCallback)(selectedTab => {
    const tabTitles = tabs.map(({
      title
    }) => title);
    onChangeTab(tabTitles.indexOf(selectedTab));
  }, [onChangeTab]);
  return segments.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SegmentedControl, {
    segments: segments,
    segmentHandler: segmentHandler
  }) : null;
}
InserterTabs.Control = TabsControl;
InserterTabs.getTabs = () => [{
  name: 'blocks',
  title: (0, _i18n.__)('Blocks'),
  component: _blockTypesTab.default
}, {
  name: 'reusable',
  title: (0, _i18n.__)('Synced patterns'),
  component: _reusableBlocksTab.default
}];
var _default = exports.default = InserterTabs;
//# sourceMappingURL=tabs.native.js.map