import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Text,
  TouchableOpacity,
  PixelRatio,
  FlatList,
} from 'react-native'
import { connect } from 'react-redux'
import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../utils'
import { HeaderView } from '../common/HeaderView'
@connect(({ theme, mine }) => ({ ...theme, ...mine }))
class SelectAdress extends Component {
  constructor() {
    super()
    this.state = { adress: [], adressDefault: {} }
  }

  componentDidMount() {
    this.props.dispatch(
      createAction('mine/getAdress')({ customer: CUSTOMERINFO.id })
    )
    // this.setState({ adress: adress });
  }

  setDefault(item, addressData) {
    let adress = addressData
    for (val of adress) {
      val.isDefault = 0
    }
    adress[item.index].isDefault = 1
    this.setState({ adress: adress, adressDefault: adress[item.index] })
  }

  touchItem(item) {
    this.props.dispatch(NavigationActions.back())
    this.props.navigation.state.params(item)
  }

  _renderItem(item, addressData) {
    return (
      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: 'row',
          flex: 1,
          backgroundColor: '#FFF',
          marginBottom: 10,
        }}
        onPress={() => this.touchItem(item)}
      >
        {item.item.isDefault == 1 ? (
          <Icon
            name="icon-icon-duigou"
            size={24}
            color={'#E14C46'}
            style={{ alignSelf: 'center' }}
          />
        ) : null}
        <View style={{ paddingLeft: 10, flex: 1 }}>
          <View style={{ flexDirection: 'row' }}>
            <Text style={{ fontSize: 15, lineHeight: 21, color: '#333' }}>
              {item.item.receiver}
            </Text>
            <Text
              style={{
                fontSize: 15,
                lineHeight: 21,
                color: '#333',
                marginLeft: 10,
              }}
            >
              {item.item.receiverPhone}
            </Text>
            {item.item.isDefault == 1 ? (
              <View
                style={{
                  marginLeft: 25,
                  paddingHorizontal: 5,
                  backgroundColor: '#E14C46',
                  borderRadius: 4,
                }}
              >
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#FFF',
                  }}
                >
                  默认地址
                </Text>
              </View>
            ) : (
              <TouchableOpacity
                activeOpacity={1}
                style={{ marginLeft: 25 }}
                onPress={() => this.setDefault(item, addressData)}
              >
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#666',
                  }}
                >
                  设为默认
                </Text>
              </TouchableOpacity>
            )}
          </View>

          <Text
            style={{
              fontSize: 13,
              lineHeight: 18,
              color: '#333',
              marginTop: 3,
            }}
          >
            {/* {item.item.receiverProvince +
              item.item.receiverCity +
              item.item.receiverDistrict +
              item.item.receiverTown +
              item.item.receiverAddress} */}
              {item.item.country+item.item.receiverAddress}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const { appTheme, addressData } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />

        {/* 头部 */}
        {HeaderView(this.props.dispatch, '选择地址')}

        {/* 内容 */}
        <FlatList
          data={addressData}
          extraData={this.state}
          keyExtractor={(item, index) => index}
          renderItem={(item, index) => this._renderItem(item, addressData)}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text333: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.17,
    color: '#333',
  },
  text666: {
    fontSize: 12,
    lineHeight: 17,
    color: '#666',
  },
  text999: {
    fontSize: 12,
    lineHeight: 17,
    color: '#999',
  },
})

export default SelectAdress