import React, {
    Component
} from 'react'

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback
} from 'react-native'

import CircleTransition from './CircleTransition'

export default class Exemples extends Component {
  constructor (props) {
    super(props)
    this.state = {
      color: 'orange',
      expand: true,
      position: 'center',
      counter: 0,
      callback: '',
      customLeftMargin: 0,
      customTopMargin: 200
    }
    this.handlePress = this.handlePress.bind(this)
  }

  getPosition (counter) {
    switch(counter) {
      case 0:
        return 'center'
      case 1:
        return 'topLeft'
      case 2:
        return 'topRight'
      case 3:
        return 'bottomLeft'
      case 4:
        return 'bottomRight'
      case 5:
        return 'left'
      case 6:
        return 'right'
      case 7:
        return 'top'
      case 8:
        return 'bottom'
      case 9:
        return 'custom'
    }
  }

  getNextCounter (counter) {
    if (counter === 9) {
      return 0
    }
    return counter + 1
  }

  handlePress () {
    let { counter } = this.state
    const position = this.getPosition(counter)
    counter = this.getNextCounter(counter)
    this.setState({
      color: 'orange',
      expand: true,
      position: position,
      counter: counter,
      callback: ''
    })

    // TO START THE ANIMATION !
    this.circleTransition.start()
  }

  render () {
    let {
      color,
      expand,
      position,
      customLeftMargin,
      callback,
      customTopMargin
    } = this.state
    return (
      <View style={styles.container}>
        <CircleTransition
          ref={(circle) => { this.circleTransition = circle }}
          color={color}
          expand={expand}
          callback={() => {
            this.setState({
              callback: 'callback has been called'
            })
          }}
          position={position}
          customTopMargin={customTopMargin}
          customLeftMargin={customLeftMargin}
        />
        <TouchableWithoutFeedback style={styles.touchable} onPress={this.handlePress}>
          <View>
            <Text style={styles.position}>CircleTransition {position} {callback}</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  position: {
    flex: 1,
    top: 320,
    fontSize: 25,
    alignSelf: 'center',
    fontWeight: '400',
    textAlign: 'center',
    color: '#333333'
  },
  touchable: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
})