import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
  StatusBar,
  Alert,
  ImageBackground,
  PixelRatio,
  TouchableOpacity,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import { createAction, NavigationActions } from '../../utils'
import AboutLogo from '../../static/images/about-logo.png'
import Icon from '../../components/Iconfont/Iconfont'

@connect(({ app, theme }) => ({ ...app, ...theme }))
class Setting extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  logout = () => {
    this.props.dispatch(createAction('app/logout')())
  }

  touchList() {
    return (
      <TouchableOpacity
        style={{ flexDirection: 'row', justifyContent: 'space-between' }}
      >
        <Text>sss</Text>
      </TouchableOpacity>
    )
  }

  // 头部
  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 10, flexDirection: 'row' }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              size={20}
              color={'#666'}
              style={{ marginTop: 4 }}
            />
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              返回
            </Text>
          </TouchableOpacity>
          <Text
            style={{
              alignSelf: 'center',
              fontSize: 18,
              lineHeight: 25,
              letterSpacing: 0.19,
              color: '#333',
            }}
          >
            关于
          </Text>
        </View>
      </View>
    )
  }

  TouchList(item) {
    let returnVal = []
    for (let i = 0; i < item.length; i++) {
      returnVal.push(
        <TouchableOpacity
          key={i}
          onPress={() => item[i].onTouch()}
          style={{
            paddingVertical: 10,
            flexDirection: 'row',
            justifyContent: 'space-between',
            borderTopWidth: 1 / PixelRatio.get(),
            borderTopColor: '#EEE',
          }}
        >
          <View
            style={{
              flexDirection: 'row',
            }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#333',
                marginLeft: 5,
                alignSelf: 'center',
              }}
            >
              {item[i].text}
            </Text>
          </View>
          <Icon name="icon-icon-jianjinzhishiqi" size={24} color={'#CCC'} />
        </TouchableOpacity>
      )
    }
    return (
      <View
        style={{
          marginTop: 10,
          paddingHorizontal: 10,
          backgroundColor: '#FFF',
        }}
      >
        {returnVal}
      </View>
    )
  }

  render() {
    const { login, appTheme } = this.props,
      basicInfo = [
        {
          text: '特别声明',
          onTouch: () => {},
        },
        {
          text: '使用帮助',
          onTouch: () => {},
        },
        {
          text: '给我评分',
          onTouch: () => {},
        },
        {
          text: '隐私政策',
          onTouch: () => {},
        },
        {
          text: '退出',
          onTouch: () => this.logout(),
        },
      ]
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        {this.header()}

        {/* 查看详情 */}
        <View style={{ flex: 1 }}>
          <View style={{ paddingTop: 20, paddingBottom: 5 }}>
            <Image
              source={AboutLogo}
              style={{ width: 77, height: 50, alignSelf: 'center' }}
            />
            {/* <Text
              style={{
                fontSize: 14,
                color: '#999',
                marginTop: 12,
                alignSelf: 'center',
              }}
            >
              渠道云销 2.0
            </Text> */}
            <Text
              style={{
                fontSize: 14,
                color: '#999',
                marginTop: 12,
                alignSelf: 'center',
              }}
            >
              易下单
            </Text>
          </View>
          <ScrollView style={{ flex: 1 }}>
            {this.TouchList(basicInfo)}
          </ScrollView>
        </View>
        <View style={{ paddingBottom: 30 }}>
          <Text
            style={{
              fontSize: 10,
              color: '#999',
              letterSpacing: 0.12,
              alignSelf: 'center',
            }}
          >
            Copyright@2017-2018
          </Text>
          <Text
            style={{
              fontSize: 10,
              color: '#999',
              letterSpacing: 0.12,
              alignSelf: 'center',
            }}
          >
            {/* 京软信科 版权所有 */}
            用友 Yonyou.com 版权所有
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default Setting