import React, { Component } from 'react'
import { View, Alert, TouchableOpacity, Platform } from 'react-native'
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import { CustomInput } from '../../components/CustomInput'
import { CustomPicker } from '../../components/CustomPicker'
import { CustomButton } from '../../components/CustomButton'
import Text from '../../components/Text';
import { Picker, Right } from 'native-base'
import moment from 'moment'
import CustomDatePicker from './CustomDatePicker';
import {postReserveRoom} from '../../api/UserApi';
import {withNavigation} from 'react-navigation';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n'

class PersonRoomReservationScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading:false,
      room_id: this.props.roomDetail.id,
      activeIndex: 0,
      user:{},
    }
    this.sendReserve = this.sendReserve.bind(this)
  }

  componentDidMount = () => {
    this.setState({
      user: {
        ...this.state.user,
        type: 'customer',
        gender: 'ชาย',
        room_type: this.props.roomDetail.type_name,
        project_name: this.props.roomDetail.project.name
      }
    })
  };

  sendReserve() {

    var email_validate = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    if (email_validate.test(this.state.user.email) !== true){
      Alert.alert(null, t('email_format_invalid'))
      return
    }

    postReserveRoom(this.state.room_id,this.state.user)
    .then(res => {
      console.log('response ---------> ',res.data)
    })
    .then(() => {
      Alert.alert(
        t('booking_success'),null,
        [
          { text: t('ok'), onPress: () => this.props.navigation.navigate('HomeScreen') },
        ]
      )
    })
  }

  handleDatePickedBirthDay = (date) => {
    console.log("A date birth day has been picked: ", date);
    this.setState({
      user: {
        ...this.state.user,
        birth_date: moment(date).format('DD-MM-YYYY')
      }
    })
  };

  handleDatePickedCheckIn = (date) => {
    console.log("A date check-in has been picked: ", date);
    this.setState({
      user: {
        ...this.state.user,
        check_in_date: moment(date).format('DD-MM-YYYY')
      }
    })
  };

  render() {
    let width_device = GetWidthHeightDevice.WidthDevice
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={[styles.form]}>
            <Text style={styles.headerTitle}> {t('profile')} </Text>
            <View style={styles.row}>
              <CustomInput style={styles.custom_input} labelColor={'white'} labelName={t('fullname')} placeholderTextColor={'#FFFFFF40'} placeholder={t('specific_fullname')}
              onEndEditing={e => {
                let input = e.nativeEvent.text
                this.setState({
                  user: {
                    ...this.state.user,
                    name: input
                  }
                })
              }}/>
            </View>
            <View style={styles.row}>
              <CustomInput style={styles.custom_input} labelColor={'white'} labelName={t('email')} placeholderTextColor={'#FFFFFF40'} placeholder={t('specific_email')}
              onEndEditing={e => {
                let input = e.nativeEvent.text
                this.setState({
                  user: {
                    ...this.state.user,
                    email: input
                  }
                })
              }}/>
            </View>
            <View style={styles.row}>
              <CustomInput style={styles.custom_input} labelColor={'white'} placeholderTextColor={'#FFFFFF40'} labelName={t('phone2')} placeholder={t('specific_phone')} keyboardType={'phone-pad'} maxLength={10}
              onEndEditing={e => {
                let input = e.nativeEvent.text
                this.setState({
                  user: {
                    ...this.state.user,
                    phone: input
                  }
                })
              }}/>
            </View>
            <View style={[styles.row]}>
              <View style={{flexDirection:'row',flex:1,width:'100%',backgroundColor:'#FFFFFF40',borderRadius:24,alignItems:'center',paddingHorizontal:10}}>
                <Text style={{color:'white'}}>{t('gender')}</Text>
                <View style={{width:'95%',paddingRight:10}}>
                {
                  Platform.OS == 'ios' ?
                  <Right>
                    <Picker
                        mode="dropdown"
                        style={{
                          flex:1,
                          height: 48,
                          color:'white'
                        }}
                        textStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14,textAlign:'right'}}
                        itemStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14}}
                        itemTextStyle={{color:'black',fontFamily: 'Prompt-Regular',fontSize:14}}
                        labelName={t('gender')}
                        placeholder={t('male') +"/"+ t('female')}
                        selectedValue={this.state.user.gender}
                        onValueChange={e => {
                          this.setState({
                            user: {
                              ...this.state.user,
                              gender: e
                            }
                          })
                        }}>
                        <Picker.Item label={t('male')} value="ชาย"/>
                        <Picker.Item label={t('female')} value="หญิง"/>
                      </Picker>
                    </Right>
                    :  <Picker
                      mode="dropdown"
                      style={{
                        flex:1,
                        height: 48,
                        color:'white'
                      }}
                      textStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14,textAlign:'right'}}
                      itemStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14}}
                      itemTextStyle={{color:'black',fontFamily: 'Prompt-Regular',fontSize:14}}
                      labelName={t('gender')}
                      placeholder={t('male') +"/"+ t('female')}
                      selectedValue={this.state.user.gender}
                      onValueChange={e => {
                        this.setState({
                          user: {
                            ...this.state.user,
                            gender: e
                          }
                        })
                      }}>
                      <Picker.Item label={t('male')} value="ชาย"/>
                      <Picker.Item label={t('female')} value="หญิง"/>
                    </Picker>
                  }
                </View>
              </View>
            </View>
            <View style={width_device >= 400 ? styles.row : styles.row_minSize}>
              <View style={styles.row_grow}>
                <CustomDatePicker titleText={t('birth_date')} dateText={this.state.user.birth_date} handleDate={this.handleDatePickedBirthDay} maxDate={new Date()}/>
              </View>
            </View>
            <View style={styles.row}>
              <CustomDatePicker titleText={t('expect_checkin')} dateText={this.state.user.check_in_date} handleDate={this.handleDatePickedCheckIn} minDate={new Date()}/>
            </View>
          </View>
        </View>
        <View style={{ flexGrow: 0.5, justifyContent: 'flex-end' }}>
          <View style={{ ...styles.buttons }}>
            <CustomButton style={{ backgroundColor: '#145EB3',height: 40, }}
              onPress={() => {
                if(this.state.user.name != null && this.state.user.email != null && this.state.user.phone != null
                  && this.state.user.birth_date != null && this.state.user.check_in_date){
                    Alert.alert(
                      t('booking_submit'),
                      t('booking_confirm'),
                      [
                        { text: t('cancel'), style: 'cancel' },
                        { text: t('ok'), onPress: () => this.sendReserve() },
                      ],
                      { cancelable: false }
                    )
                  }else{
                    Alert.alert(t('error_occurred'), t('required_field'))
                  }
              }}
              title={t('book_room')} />
          </View>
        </View>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </View>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
    height: GetWidthHeightDevice.HeightDevice,
  },
  row: {
    flexDirection: 'row',
    marginBottom: 7,
    height: 48,
  },
  row_grow_first: {
    flexGrow: 1,
    marginRight: 5,
    width: '9%'
  },
  row_grow_first_minSize: {
    flexGrow: 1,
    marginBottom: 5,
    width: '100%',
  },
  row_grow: {
    flexGrow: 1,

  },
  form: {
    height: '100%',
    flex: 1,
    padding: 15,
    paddingTop: 5,
    paddingBottom: 0,
  },
  row_minSize: {
    flexDirection: 'column',
    marginBottom: 5,
  },
  box_form_reservation: {
    marginLeft: 15,
    marginRight: 15,
  },
  input_reservation: {
    marginLeft: 15,
    marginRight: 15,

  },
  contentContainer: {
    paddingVertical: 5
  },
  headerTitle: {
    color: 'white',
    marginVertical: 5
  },
  buttons: {
    paddingHorizontal: 15,
    paddingVertical: 10
  },
  custom_input: {
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 30,
    height: 48,
    color: 'white'
  }
}

export default withNavigation(PersonRoomReservationScreen)