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

class CompanyRoomReservationScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      room_id: this.props.roomDetail.id,
      activeIndex: 1,
      user:{}
    }
    this.sendReserve = this.sendReserve.bind(this)
  }

  componentDidMount = () => {
    this.setState({
      user: {
        ...this.state.user,
        type: 'company',
        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')},
        ]
      )
    })
  }

  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() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1, }}>
          <View style={styles.form}>
            <Text style={styles.headerTitle}> {t('coporate')} </Text>
            <View style={styles.row}>
              <CustomInput style={styles.custom_input} labelName={t('company_name')} labelColor={'white'} placeholderTextColor={'#FFFFFF40'} placeholder={t('specific_company')}
              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} labelName={t('email')} labelColor={'white'} 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} labelName={t('phone2')} labelColor={'white'} placeholderTextColor={'#FFFFFF40'} 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}>
              <CustomInput style={styles.custom_input} labelName={t('tax_id')} labelColor={'white'} placeholderTextColor={'#FFFFFF40'} placeholder={t('specific_tax_id')} maxLength={13}
              onEndEditing={e => {
                let input = e.nativeEvent.text
                this.setState({
                  user: {
                    ...this.state.user,
                    company_code: input
                  }
                })
              }}/>
            </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}>
            <View style={styles.row_grow}>
              <CustomButton style={{ backgroundColor: '#145EB3', height: 40, }} title={t('book_room')}
                onPress={() => {
                  if(this.state.user.name != null && this.state.user.email != null && this.state.user.phone != null
                    && this.state.user.company_code != 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'))
                    }
                }}
              />
            </View>

          </View>
        </View>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </View>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
    height: GetWidthHeightDevice.HeightDevice,
  },
  row: {
    flexDirection: 'row',
    height: 48,
    marginBottom: 7,
  },
  row_grow_first: {
    flexGrow: 1,
    marginRight: 5,
    width: '9%'
  },
  row_grow: {
    flexGrow: 1,
  },
  form: {
    height: '100%',
    flex: 1,
    padding: 15,
    paddingTop: 5,
    paddingBottom: 0,
  },
  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(CompanyRoomReservationScreen)
