import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    height: 75,
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 14
  },
  containerIos: {

  },
  containerAndroid: {

  }
})

class Toast extends Component {
  constructor (props) {
    super(props)
    this.animatedValue = new Animated.Value(0)
    this.closeToast = this.closeToast.bind(this)
    this.clearErrorMessage = this.clearErrorMessage.bind(this)
    this.state = {
      message: this.props.message
    }
  }

  renderToast () {
    if (!this.props.visible || this.props.message.length === 0) return
    if (!isAndroid()) {
      Animated.timing(
        this.animatedValue,
        {
          toValue: 1,
          duration: 350
        }).start(this.closeToast())
    } else {
      Snackbar.show(this.props.message, {showAsError: true})
    }
  }

  clearErrorMessage () {
    this.props.resetErrorMessage()
  }

  closeToast () {
    setTimeout(() => {
      Animated.timing(
        this.animatedValue,
        {
          toValue: 0,
          duration: 350
        }).start(this.clearErrorMessage)
    }, displayDuration)
  }

  getColorForToastType (type = 'success') {
    let color
    if (type === SystemMessageTypes.error) color = '#B53553'
    if (type === SystemMessageTypes.primary) color = '#2487DB'
    if (type === SystemMessageTypes.warning) color = '#ec971f'
    if (type === SystemMessageTypes.success) color = 'green'
    return color
  }

  render () {
    const type = isEmptyVar(this.props.type) ? SystemMessageTypes.error : this.props.type
    let animation = this.animatedValue.interpolate({
      inputRange: [0, 0.3, 10],
      outputRange: [-90, -10, 0]
    })
    if (Platform.OS === 'ios') {
      return (
        <Animated.View
          style={[style.container, style.containerIos, {
            transform: [{
              translateY: animation
            }],
            backgroundColor: this.getColorForToastType(type)
          }]}>
          <Text
            numberOfLines={2}
            ellipsizeMode={'clip'}
            style={{marginLeft: 10, color: 'white', fontSize: 14, fontWeight: 'bold', textAlign: 'center'}}>
            {this.renderToast()}
            {this.props.message}
          </Text>
        </Animated.View>
      )
    } else {
      return (
        <Animated.View
          style={[style.container, style.containerAndroid, {
            transform: [{
              translateY: animation
            }],
            backgroundColor: this.getColorForToastType(type)
          }]}>
          <Text
            numberOfLines={2}
            ellipsizeMode={'tail'}
            style={{marginLeft: 10, color: 'white', fontSize: 14, fontWeight: 'bold', textAlign: 'center'}}>
            {this.renderToast()}
            {this.props.message}
          </Text>
        </Animated.View>
      )
    }
  }
}

Toast.defaultProps = {
  type: 'error',
  visible: false
}

Toast.propTypes = {
  message: PropTypes.string,
  type: PropTypes.string,
  visible: PropTypes.bool
}

const mapStateToProps = (state, props) => {
  return {
    message: state.error ? state.error.errorMessage : null,
    visible: !isEmptyVar(state.error.errorMessage)
  }
}

const mapDispatchToProps = (dispatch, props) => {
  return {
    resetErrorMessage: () => dispatch(receiveErrorMessage(null))
  }
}

const reduxContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Toast)

export default reduxContainer