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

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


import PickerView from './view/PickerView'


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  title: {
    backgroundColor: '#fff',
    textAlign: 'center',
    fontSize: (16),
    color: '#2F2F2F',
  },
  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),
  },
})

export default class CustomPicker extends Component {

  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,
    }
  }
  mScreenWidth = global.SCREEN_WIDTH;

  mScreenHeight = global.SCREEN_HEIGHT;

  //最小显示单位
  mOnePixel = (PixelRatio.get() === 3 ? 2 : 1) / PixelRatio.get();

  dismiss = () => {
    if(this.props.dismiss) {
      this.props.dismiss()
    }
  }

  setSelectIndex = (index) => {
    this.setState({
      selectIndex: index,
    })
  }

  /**
   * return 當前分辨率下的數值
   * @param {*} size 375标注图下的值
   */
  getSize(size) {
    return parseInt(this.mScreenWidth * size / 375);
  }

  render() {
    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={{height: (45),flex: 1,justifyContent: 'center'}} >
          <Text
            allowFontScaling={false}
            style={[styles.buttonText,
              { color: '#2F2F2F',}]}
          >
            {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)}
      />
    </View>)
  }

}
