import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Dimensions,
  PixelRatio,
  TouchableOpacity,
  Text,
  DatePickerIOS,
} from 'react-native'

import ModalEcx from '../../components/Modal'
import moment from 'moment'
const { width, height } = Dimensions.get('window')

// @connect(({ theme }) => ({ ...theme }))
class SelectTime extends Component {
  constructor(props) {
    super(props)
    this.state = {
      //动态state
      date: new Date(),
      timeZoneOffsetInHours: -1 * new Date().getTimezoneOffset(),
      time: '',
      mark: '',
    }
  }

  _closeModal() {
    this.showTime._setModalVisible(false)
  }
  _openModal = va => {
    this.showTime._setModalVisible(true)
    this.setState({ mark: va })
  }

  _renderModalContent() {
    return (
      <View
        style={{
          width: width,
          backgroundColor: '#FFF',
          alignSelf: 'center',
          borderRadius: 8,
        }}
      >
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            padding: 15,
          }}
        >
          <TouchableOpacity onPress={() => this._closeModal()}>
            <Text style={{ fontSize: 18, lineHeight: 22, color: '#333' }}>
              取消
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this._closeModal()
              this.props.cb(this.state.time, this.state.mark)
            }}
          >
            <Text style={{ fontSize: 18, lineHeight: 22, color: '#333' }}>
              确定
            </Text>
          </TouchableOpacity>
        </View>
        <DatePickerIOS
          date={this.state.date}
          // minimumDate={new Date()}
          mode="date"
          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours}
          onDateChange={date => {
            this.setState({
              date: date,
              time: date,
            })
            // this.props.cb(date);
          }} //当内容改变的时候出发此函数
        />
      </View>
    )
  }

  render() {
    return (
      <ModalEcx
        ref={showTime => (this.showTime = showTime)}
        content={this._renderModalContent()}
      />
    )
  }
}

export default SelectTime