import React, { Component } from 'react'

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  PixelRatio,
} from 'react-native'

import BaseDialog from './BaseDialog'

const px2pt = px => PixelRatio.roundToNearestPixel(px)

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

class SimpleItemsDialog extends BaseDialog {

  static defaultProps = {
    items: ['a', 'b', 'c'],
    itemKey: 'key',
    itemStyle: {
      fontSize: 14,
      fontWeight: '400',
      color: '#333333',
    },
    cancel: false,
    cancelText: '取消',
    cancelTextStyle: {
      fontSize: 14,
      fontWeight: '400',
      color: '#999999',
    },
    onPress: null,
  }

  constructor(props) {
    super(props)
  }

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


  renderItems() {
    return this.props.items.map((item, index) => <TouchableOpacity
      onPress={() => {
        this.dismiss(() => {
          if (this.props.onPress) {
            this.props.onPress(index)
          }
        })
      }}
      key={index}
      style={{ width: this.mScreenWidth, height: this.getSize(49), justifyContent: 'center', alignItems: 'center' }}
    >
      <Text style={this.props.itemStyle} >{typeof item === 'string' ? item : item[this.props.itemKey]}</Text>
      <View
        style={{
        position: 'absolute',
        bottom: 0,
        width: this.mScreenWidth,
        height: this.mOnePixel,
        backgroundColor: '#E8EEF0',
      }} />
    </TouchableOpacity>)
  }

  renderCancel() {
    return (<TouchableOpacity
      onPress={() => this.dismiss()}
      style={{ width: this.mScreenWidth, height: this.getSize(49), justifyContent: 'center', alignItems: 'center' }}
    >
      <Text style={this.props.cancelTextStyle} >{this.props.cancelText}</Text>
      <View style={{
        position: 'absolute',
        bottom: 0,
        width: this.mScreenWidth,
        height: this.mOnePixel,
        backgroundColor: '#E8EEF0'
      }} />
    </TouchableOpacity>)
  }

  renderContent() {
    return (
      <View style={{ width: this.mScreenWidth, backgroundColor: '#ffffff' }}>
        <View style={styles.buttonWrapper} >
          <TouchableOpacity style={styles.button} onPress={this.props.cancel} >
            <Text style={styles.buttonText} >取消</Text>
          </TouchableOpacity>
          <View style={styles.container} >
            <Text style={styles.title} >{this.props.title}</Text>
          </View>
          <TouchableOpacity style={styles.button} onPress={this.props.onConfirm} >
            <Text style={styles.buttonText} >确认</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.contentWrapper} >
          {this.renderItems()}
          {this.props.cancel ? this.renderCancel() : null}
        </View>
      </View>
    )
  }
}

export default SimpleItemsDialog
