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); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import { get } from 'lodash';
import { PanResponder } from 'react-native';
import { ThemeContext } from '../../../theme';
import styled from 'styled-components/native';
import { space, color, layout, typography } from 'styled-system';
import { Box } from '@native-base/v3';
export { default as SliderThumb } from './SliderThumb';
export { default as SliderFilledTrack } from './SliderFilledTrack';
export { default as SliderTrack } from './SliderTrack';
export const SliderContext = /*#__PURE__*/React.createContext({});

class Slider extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      barSize: null,
      deltaValue: 0,
      value: this.props.defaultValue || 0
    });

    _defineProperty(this, "getColorScheme", schemeColor => {
      return get(this.context.colors, schemeColor, 'default.0');
    });

    _defineProperty(this, "panResponder", PanResponder.create({
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderMove: (_event, gestureState) => this.onMove(gestureState),
      onPanResponderRelease: () => this.onEndMove(),
      onPanResponderTerminate: () => {}
    }));

    _defineProperty(this, "onBarLayout", event => {
      const {
        width: barSize
      } = event.nativeEvent.layout;
      this.setState({
        barSize
      });
    });

    _defineProperty(this, "capValueWithinRange", (value, range) => {
      if (value < range[0]) return range[0];
      if (value > range[1]) return range[1];
      return value;
    });

    _defineProperty(this, "getValueFromBottomOffset", (offset, barSize, rangeMin, rangeMax) => {
      if (barSize === null) return 0;
      return (rangeMax - rangeMin) * offset / barSize;
    });

    _defineProperty(this, "getBottomOffsetFromValue", (value, rangeMin, rangeMax, barSize) => {
      if (barSize === null) return 0;
      const valueOffset = value - rangeMin;
      const totalRange = rangeMax - rangeMin;
      const percentage = valueOffset / totalRange;
      return barSize * percentage;
    });
  }

  onMove(gestureState) {
    const {
      barSize
    } = this.state;
    const newDeltaValue = this.getValueFromBottomOffset(gestureState.dx, barSize, this.props.min || 0, this.props.max || 100);
    this.props.onChange && this.props.onChange(this.state.value + newDeltaValue);
    this.setState({
      deltaValue: newDeltaValue
    });
  }

  onEndMove() {
    const {
      value,
      deltaValue
    } = this.state;
    this.props.onChangeEnd && this.props.onChangeEnd(value + deltaValue);
    this.setState({
      value: value + deltaValue,
      deltaValue: 0
    });
  }

  render() {
    const {
      value,
      deltaValue,
      barSize
    } = this.state;
    const cappedValue = this.capValueWithinRange(value + deltaValue, [this.props.min || 0, this.props.max || 100]);
    const sliderOffset = this.getBottomOffsetFromValue(cappedValue, this.props.min || 0, this.props.max || 100, barSize);
    return /*#__PURE__*/React.createElement(SliderContext.Provider, {
      value: {
        sliderOffset,
        colorScheme: this.getColorScheme(this.props.colorScheme || 'default.2'),
        barSize: this.state.barSize,
        panResponder: this.panResponder,
        isReversed: this.props.isReversed
      }
    }, /*#__PURE__*/React.createElement(Box, _extends({
      position: "relative",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      minWidth: "100%"
    }, this.props, {
      onLayout: this.onBarLayout
    }), this.props.children));
  }

}

_defineProperty(Slider, "contextType", ThemeContext);

const StyledSlider = styled(Slider)(space, color, layout, typography);
StyledSlider.defaultProps = {
  min: 0,
  max: 100,
  step: 1
};

const NBSlider = ({ ...props
}) => {
  return /*#__PURE__*/React.createElement(StyledSlider, props);
};

export default NBSlider;
//# sourceMappingURL=index.js.map