/* eslint-disable prefer-destructuring */
import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions, ScrollView, Text } from 'react-native';
import { connect } from 'react-redux';
import PickerComponent from '../../../components/pickerComponent';
import { createAction } from '../../../utils/index';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
// create a component
@connect(({ userInfo, domain }) => ({ userInfo, domain }))
class UserInfoHomeScreen extends PureComponent {
  onClick = () => {
    console.log('666');
    this.props.dispatch(createAction('domain/fetch')());
  };
  onPickerChange =(path) => {
    // console.log(path);
    this.props.dispatch(createAction('domain/fetchParam')(path));
  };
  render() {
    const { list, listChildren, arrayPath, cols } = this.props.domain;
    console.log(arrayPath);
    let datas = [];
    if (listChildren.length === 0) {
      datas = list;
    } else {
      datas = listChildren;
    }
    return (
      <View style={{ flex: 1, backgroundColor: '#06C1AE' }}>
        <View style={{ position: 'absolute', width, height, backgroundColor: '#06C1AE' }} />
        <ScrollView>
          <View style={styles.header}>
            <View style={styles.userContainer}>
              <Text style={styles.avatar} />
              <View>
                <View style={{ flexDirection: 'row' }}>
                  <Text style={{ color: 'white' }}>素敌</Text>
                  <Text style={{ marginLeft: 4 }} />
                </View>
                <Text style={{ color: 'white', marginTop: 4 }}>个人信息</Text>
              </View>
            </View>
            <PickerComponent onClick={this.onClick} onPickerChange={this.onPickerChange} data={datas} pathVal={arrayPath} cols={cols} />
          </View>
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  header: {
    backgroundColor: '#06C1AE',
    paddingBottom: 20,
  },
  icon: {
    width: 27,
    height: 27,
  },
  userContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  avatar: {
    width: 50,
    height: 50,
    marginRight: 10,
    borderRadius: 25,
    borderWidth: 2,
    borderColor: '#51D3C6',
  },
});
export default UserInfoHomeScreen;
