import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  StatusBar,
  Text,
  TouchableOpacity,
  Dimensions,
  Animated,
} from 'react-native'
import { connect } from 'react-redux'

import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../utils'
import Interactable from 'react-native-interactable'
import { AddAttentModal } from '../common/datamodel/dataModel'

const Screen = Dimensions.get('window')

@connect(({ shoppingcart }) => ({ ...shoppingcart }))
export default class Row extends Component {
  constructor(props) {
    super(props)
    this._deltaX = new Animated.Value(0)
    this.state = {
      isMoving: false,
      position: 1,
    }
    this._this = []
  }

  render() {
    const activeOpacity = this.state.position !== 1 ? 0.5 : 1
    return (
      <View>
        <View
          style={{
            position: 'absolute',
            flexDirection: 'row',
            right: 0,
          }}
        >
          <TouchableOpacity onPress={this.onButtonPress.bind(this, 'trash')}>
            <Animated.View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                width: Screen.width * 0.16,
                paddingBottom: 40,
                paddingTop: 37,
                backgroundColor: '#FFBF00',
                overflow: 'hidden',
                // transform: [
                //   {
                //     scale: this._deltaX.interpolate({
                //       inputRange: [
                //         -Screen.width,
                //         -Screen.width * 0.32,
                //         -Screen.width * 0.16
                //       ],
                //       outputRange: [1, 1, 0]
                //     })
                //   }
                // ]
              }}
            >
              <Text
                style={{ flex: 1, fontSize: 14, lineHeight: 20, color: '#FFF' }}
              >
                关注
              </Text>
            </Animated.View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.onButtonPress.bind(this, 'delete')}>
            <Animated.View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                width: Screen.width * 0.16,
                paddingBottom: 40,
                paddingTop: 37,
                backgroundColor: '#E14C46',
                // transform: [
                //   {
                //     scale: this._deltaX.interpolate({
                //       inputRange: [-Screen.width, -Screen.width * 0.16, 0],
                //       outputRange: [1, 1, 0]
                //     })
                //   }
                // ]
              }}
            >
              <Text
                style={{ flex: 1, fontSize: 14, lineHeight: 20, color: '#FFF' }}
              >
                删除
              </Text>
            </Animated.View>
          </TouchableOpacity>
        </View>

        <Interactable.View
          boundaries={{ right: 0 }}
          ref={el => (this.interactableElem = el)}
          horizontalOnly={true}
          onAlert={e => {
            alert(e)
          }}
          snapPoints={[
            {
              x: 0,
            },
            {
              x: -Screen.width * 0.32,
            },
          ]}
          onSnap={this.onSnap.bind(this)}
          onDrag={this.onDrag.bind(this)}
          onStop={this.onStopMoving.bind(this)}
          dragToss={0.01}
          animatedValueX={this._deltaX}
        >
          <TouchableOpacity
            // onPress={this.onRowPress.bind(this)}
            activeOpacity={1}
            underlayColor={'#dddddd'}
          >
            <View
              style={{
                left: 0,
                right: 0,
                backgroundColor: 'white',
              }}
            >
              {this.props.children}
            </View>
          </TouchableOpacity>
        </Interactable.View>
      </View>
    )
  }
  onSnap({ nativeEvent }) {
    const { index } = nativeEvent
    this.setState({ position: index })
    if (index == 1) {
      this.props.addThis && this.props.addThis(this)
    }
  }

  onRowPress() {
    const { isMoving, position } = this.state
  }

  onDrag({ nativeEvent }) {
    const { state } = nativeEvent
    if (state === 'start') {
      this.setState({ isMoving: true })
    }
  }
  onStopMoving() {
    this.setState({ isMoving: false })
  }

  onButtonPress(name) {
    this.interactableElem.snapTo({ index: 0 })
    if (name == 'delete') {
      this.props
        .dispatch(
          createAction('shoppingcart/deleteShop')({
            params: {
              id: this.props.itemData,
              customer: this.props.customerId,
            },
          })
        )
        .finally(() => {
          if (this.props.isDelete) {
            this.props.deleteTouch()
          }
        })
    } else if (name == 'trash') {
      let returnData = AddAttentModal(
        this.props.item,
        CUSTOMERINFO.id,
        CUSTOMERINFO.customerRankCode
      )
      this.props.dispatch(createAction('attention/addAttention')(returnData))
    }
  }
}