"use strict";

var React = require("react");
var ReactNative = require("react-native");
var PropTypes = require("prop-types");
var { Dimensions, StyleSheet, Text, TouchableOpacity, View, Animated } =
  ReactNative;

var deviceWidth = Dimensions.get("window").width;
var DOT_SIZE = 6;
var DOT_SAPCE = 4;

var styles = StyleSheet.create({
  tab: {
    alignItems: "center",
  },

  tabs: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },

  dot: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: "#E0E1E2",
    marginLeft: DOT_SAPCE,
    marginRight: DOT_SAPCE,
  },

  curDot: {
    position: "absolute",
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: "#80ACD0",
    marginHorizontal: DOT_SAPCE,
    bottom: 0,
  },
});

class DefaultViewPageIndicator extends React.Component {
  static propTypes = {
    goToPage: PropTypes.func,
    activePage: PropTypes.number,
    pageCount: PropTypes.number,
    dotColor: PropTypes.string,
    activeDotColor: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      viewWidth: 0,
    };
  }

  renderIndicator(page) {
    var dotStyle = [styles.dot];
    if (this.props.dotColor) {
      dotStyle.push({ backgroundColor: this.props.dotColor });
    }

    return (
      <TouchableOpacity
        style={styles.tab}
        key={"idc_" + page}
        onPress={() => this.props.goToPage(page)}
      >
        <View style={dotStyle} />
      </TouchableOpacity>
    );
  }

  render() {
    var pageCount = this.props.pageCount;
    var itemWidth = DOT_SIZE + DOT_SAPCE * 2;
    var offset =
      (this.state.viewWidth - itemWidth * pageCount) / 2 +
      itemWidth * this.props.activePage;

    //var left = offset;
    var offsetX = itemWidth * (this.props.activePage - this.props.scrollOffset);
    var left = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [offsetX, offsetX + itemWidth],
    });

    var indicators = [];
    for (var i = 0; i < pageCount; i++) {
      indicators.push(this.renderIndicator(i));
    }

    var curDotStyle = [styles.curDot, { left }];
    if (this.props.activeDotColor) {
      curDotStyle.push({ backgroundColor: this.props.activeDotColor });
    }

    return (
      <View
        style={styles.tabs}
        onLayout={(event) => {
          var viewWidth = event.nativeEvent.layout.width;
          if (!viewWidth || this.state.viewWidth === viewWidth) {
            return;
          }
          this.setState({
            viewWidth: viewWidth,
          });
        }}
      >
        {indicators}
        <Animated.View style={curDotStyle} />
      </View>
    );
  }
}

module.exports = DefaultViewPageIndicator;