function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import { StyleSheet, Animated } from 'react-native';
import { SliderContext } from './index';
import { Box, Icon } from '../../primitives';
import { usePropsConfig } from '../../../theme';

const SliderThumb = ({
  children,
  ...props
}) => {
  const { ...newProps
  } = usePropsConfig('SliderThumb', props);
  const {
    sliderOffset,
    panResponder,
    colorScheme,
    thumbSize
  } = React.useContext(SliderContext);
  const customStyle = StyleSheet.create({
    SliderThumb: {
      position: 'absolute',
      display: 'flex',
      left: sliderOffset,
      justifyContent: 'center',
      alignItems: 'center'
    }
  });

  const sizedIcon = () => /*#__PURE__*/React.cloneElement(children, {
    size: thumbSize,
    color: children.props.color ? children.props.color : colorScheme
  }, children.props.children);

  return /*#__PURE__*/React.createElement(Animated.View, _extends({
    style: customStyle.SliderThumb
  }, panResponder.panHandlers), /*#__PURE__*/React.createElement(Box, _extends({
    position: "relative",
    borderRadius: 999,
    backgroundColor: "light.50",
    p: 1,
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }, newProps), children ? sizedIcon() : /*#__PURE__*/React.createElement(Icon, {
    name: "circle-medium",
    type: "MaterialCommunityIcons",
    color: colorScheme,
    size: thumbSize,
    opacity: 0
  })));
};

export default SliderThumb;
//# sourceMappingURL=SliderThumb.js.map