"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 _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const MAX_ITEM_WIDTH = 120;
const HALF_COLUMN = 0.5;
function StylePreview({
  onPress,
  isActive,
  style,
  url
}) {
  const [itemWidth, setItemWidth] = (0, _element.useState)(MAX_ITEM_WIDTH);
  const {
    label,
    name
  } = style;
  const opacity = (0, _element.useRef)(new _reactNative.Animated.Value(1)).current;
  function onLayout() {
    const columnsNum =
    // To indicate scroll availabilty, there is a need to display additional half the column.
    Math.floor(_components.BottomSheet.getWidth() / MAX_ITEM_WIDTH) + HALF_COLUMN;
    setItemWidth(_components.BottomSheet.getWidth() / columnsNum);
  }
  (0, _element.useEffect)(() => {
    onLayout();
    const dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', onLayout);
    return () => {
      dimensionsChangeSubscription.remove();
    };
  }, []);
  const labelStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.label, _style.default.labelDark);
  const animateOutline = () => {
    opacity.setValue(0);
    _reactNative.Animated.timing(opacity, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true,
      easing: _reactNative.Easing.linear
    }).start();
  };
  const innerOutlineStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.innerOutline, _style.default.innerOutlineDark);
  const getOutline = outlineStyles => outlineStyles.map((outlineStyle, index) => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
      style: [outlineStyle, {
        opacity
      }, _style.default[name]]
    }, index);
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
    onPress: () => {
      onPress();
      animateOutline();
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_style.default.container, {
        width: itemWidth
      }],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: _style.default.imageWrapper,
        children: [isActive && getOutline([_style.default.outline, innerOutlineStyle]), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
          style: [_style.default.image, _style.default[name]],
          source: {
            uri: url
          }
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [labelStyle, isActive && _style.default.labelSelected],
        children: label
      })]
    })
  });
}
var _default = exports.default = StylePreview;
//# sourceMappingURL=preview.native.js.map