/**
 * @flow
 */
import React, { Component } from 'react'

import {
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  Platform,
  Dimensions,
  PixelRatio,
  StyleSheet,
} from 'react-native';

import BaseDialog from './view/BaseDialog';
import PickerView from './view/PickerView';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  title: {
    padding: (13),
    backgroundColor: '#fff',
    textAlign: 'center',
    fontSize: (16),
    color: '#2F2F2F',
  },
  contentWrapper: {
    backgroundColor: '#F9FAFB',
    borderTopColor: '#ddd',
    borderBottomColor: '#ddd',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  buttonWrapper: {
    flexDirection: 'row',
    height: (45),
    width: Dimensions.get('window').width,
    backgroundColor: '#fff',
  },
  button: {
    width: (80),
    padding: (13),
  },
  buttonText: {
    color: '#0074E1',
    fontWeight: '400',
    textAlign: 'center',
    fontSize: (18),
  },
  separator: {
    backgroundColor: '#E5E5E5',
    width: 1,
  },
})

export default class CustomPicker extends BaseDialog {

  static defaultProps = {
    list: ['item0'],
    //list1: ['item10', 'item11', 'item12', 'item13', 'item14', 'item15', 'item16', 'item17', 'item18', 'item19'],
  }

  constructor(props) {
    super(props)
    this.state = {
      selectIndex: props.defaultIndex ? props.defaultIndex : 0,
    }
  }

  //componentWillReceiveProps(newProps) {
  //  if (newProps.defaultIndex && newProps.defaultIndex !== this.state.selectIndex) {
  //    console.log('newProps.defaultIndex:', newProps.defaultIndex)
  //    this.setState({
  //      selectIndex: newProps.defaultIndex,
  //    })
  //  }
  //}
  setSelectIndex = (index) => {
    this.setState({
      selectIndex: index,
    });
  }

  _getContentPosition() {
    return { justifyContent: 'flex-end', alignItems: 'center' }
  }

  renderContent() {
    return (<View
      style={{
        width: this.mScreenWidth,
        flexDirection: 'column',
        alignItems: 'stretch',
      }}
    >
      <View style={[styles.buttonWrapper, { width: this.mScreenWidth }]} >
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            this.props.onCancel()
            this.dismiss()
          }}
        >
          <Text
            allowFontScaling={false}
            style={styles.buttonText}
          >
            取消
          </Text>
        </TouchableOpacity>
        <View style={styles.container} >
          <Text
            allowFontScaling={false}
            style={styles.title}
          >
            {this.props.title}
          </Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            this.props.onConfirm(this.state.selectIndex)
            this.dismiss()
          }}
        >
          <Text
            allowFontScaling={false}
            style={styles.buttonText}
          >
            确认
          </Text>
        </TouchableOpacity>
      </View>
      <PickerView
        list={this.props.list}
        onPickerSelected={(toValue) => {
          const selectIndex = this.props.list.findIndex((item) => item === toValue)
          this.setState({
            selectIndex,
          })
        }}
        selectedIndex={this.state.selectIndex}
        fontSize={this.getSize(16)}
        itemWidth={this.mScreenWidth}
        itemHeight={this.getSize(40)}
      />
      {/*<PickerView
       list={this.props.list1}
       onPickerSelected={(toValue) => {
       // console.warn(toValue)
       }}
       selectedIndex={0}
       fontSize={this.getSize(14)}
       itemWidth={this.mScreenWidth / 2}
       itemHeight={this.getSize(40)}
       />*/}
    </View>)
  }

}
