import React from 'react';
import { Animated, TouchableWithoutFeedback } from 'react-native';
import { View } from 'native-base';
import PropTypes from 'prop-types';


export default class CycleView extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      activeView: props.initialView
    };

    this.opacityArr = React.Children.map(props.children,
      (c, i) => { console.log("iter", c, i); return new Animated.Value(i === props.initialView ? 1 : 0); });

    this.fadeInAnimations = this.opacityArr.map(a => Animated.timing(a, {
      toValue: 1,
      duration: props.fadeDuration,
      useNativeDriver: true
    }));
    this.fadeOutAnimations = this.opacityArr.map(a => Animated.timing(a, {
      toValue: 0,
      duration: props.fadeDuration,
      useNativeDriver: true
    }));

    console.log("opacity arr length", this.opacityArr.length, React.Children.count(props.children));
  }

  _onTouch = () => {
    const currentViewIdx = this.state.activeView;
    const nextViewIdx = (currentViewIdx + 1) % React.Children.count(this.props.children);
    this.fadeOutAnimations[currentViewIdx].start();
    this.fadeInAnimations[nextViewIdx].start();
    this.setState({ activeView: nextViewIdx });
    this.props.onViewChange(nextViewIdx);
  }

  render() {
    const children = React.Children.map(this.props.children, (c, i) => c);
    
    return (
      <TouchableWithoutFeedback onPress={this._onTouch} styles={{ flex: 1 }}>
        <View styles={{ flex: 1, flexDirection: 'row', width: "100%" }}>
          {
            React.Children.map(this.props.children, (c, i) => {
              return <Animated.View style={{
                position: i === 0 ? 'relative' : 'absolute',
                left: 0,
                right: 0,
                opacity: this.opacityArr[i],
                transform: [{
                  scale: this.opacityArr[i].interpolate({
                    inputRange: [0, 1],
                    outputRange: [this.props.minScaleOnFade, 1],
                  })
                }]
              }}>
                {c}
              </Animated.View>
            })
          }
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

CycleView.propTypes = {
  initialView: PropTypes.number,
  fadeDuration: PropTypes.number,
  minScaleOnFade: PropTypes.number,
  onViewChange: PropTypes.func,
}

CycleView.defaultProps = {
  initialView: 0,
  fadeDuration: 600,
  minScaleOnFade: 0.4,
  onViewChange: viewIdx => null,
}