import React, {Component} from 'react'
import {Alert, ScrollView, TouchableOpacity, View, Platform, KeyboardAvoidingView} from 'react-native'
import Image from 'react-native-fast-image'
import {CustomStepIndicator} from '../../components/StepIndicator'
import {CustomInput} from '../../components/CustomInput'
import {CustomButton} from '../../components/CustomButton'
import Icon from 'src/components/Icon'
import {bindActionCreators} from 'redux'
import {appSetUser} from '../../redux/app/action'
import {connect} from 'react-redux'
import {Picker} from 'native-base'
import moment from 'moment'
import {BackgroundImage_RegisterForm} from '../../components/BackgroundImage_RegisterForm'
import LinearGradient from 'react-native-linear-gradient'
import Text from '../../components/Text'
import {getBuildingByProjectId, project} from '../../api/UserApi'
import ImagePicker from 'react-native-image-crop-picker'
import ActionSheet from 'react-native-action-sheet'
import CustomDatePicker from '../room/CustomDatePicker';
import {t} from '../../utils/i18n'

let ACTIONSHEET_BUTTONS = [
  'ถ่ายรูป',
  'รูปจากแกลอรี่',
  t('cancel')
]

let CANCEL_INDEX = 2

class RegisterFormLoginScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: props.user,
      project_list: [],
      building_list: [],
      selected_project: 0,
      project_name: t('choose_project'),
      image_url: require('../../../assets/images/profile.png'),
      enableSummit: false,
      checkFullname: false,
      checkCitizenID: false,
      checkBirthDate: null,
      checkRoomNo: false,
      is_customer: true
    }
    this._onNextStep = this._onNextStep.bind()
    this.onImagePick = this.onImagePick.bind(this)
    this.onTakeCamera = this.onTakeCamera.bind(this)
  }

  componentDidMount() {
    this.getProjectList()
    this.setDefaultUserData()
  }

  setDefaultUserData() {
    this.setState({
      user: {
        ...this.state.user,
        gender: 'ชาย'
      }
    })
  }

  getProjectList() {
    project()
      .then(res => {
        if (res.ok) {
          return this.setState({
            project_list: res.data.data,
            selected_project: res.data.data[0].id
          })
        }
      })
      .then(res => {
        // this.getBuildingList()
      })
  }

  getBuildingList() {
    getBuildingByProjectId(this.state.selected_project)
      .then(res => {
        // console.log('-------------------> ', res)
        if (res.ok) {
          this.setState({
            building_list: res.data.data,
            user: { //set default building index 0
              ...this.state.user,
              building: res.data.data[0].room_build
            }
          })
        }
      })
  }

  _onNextStep = async () => {
    // if (this.state.user.email && this.state.user.mobile) {
    // let tax_id = this.state.user && this.state.user.tax_id
    // if(!tax_id && !this.state.is_customer){
    //   tax_id = (Math.floor(1000000000000 + Math.random() * 9000000000000)).toString();
    // }
    if (this.state.user.mobile
      // && this.state.is_customer && this.state.user.tax_id && (this.state.user.tax_id.toString()).length > 0
      // && tax_id.length > 0
      && this.state.user.name) {
      /*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) {
        this.props.appSetUser(this.state.user)
        this.props.navigation.navigate('RegisterProfile')
      } else {
        Alert.alert(null, 'ท่านกรอกรูปแบบอีเมลไม่ถูกต้อง')
      }*/
      console.log('check user data next <<<<<<<< ', this.state.user);
      this.setState({
        user: {
          ...this.state.user,
          // tax_id: !this.state.is_customer ? Math.floor(1000000000000 + Math.random() * 9000000000000) : this.state.user.tax_id,
          // is_customer: this.state.is_customer
        }
      }, () => {
        // console.log('user >>> ', this.state.user)
        this.props.appSetUser(this.state.user)
        // next page !!
        this.props.navigation.navigate('RegisterProfile', {image_url: this.state.image_url})
      })
    } else {
      console.log('กรุณากรอกข้อมูลให้ครบถ้วน')
      Alert.alert(null, 'กรุณากรอกข้อมูลให้ครบถ้วน')
    }
  }

  onImagePick() {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: true,
      includeBase64: true
    }).then(image => {
      console.log('received base64 image', image)
      let image_profile = {
        uri: image.path,
        type: image.mime,
        name: 'image_profile.jpg',
      }
      this.setState({
        image_url: {uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height},
        images: null,
        user: {
          ...this.state.user,
          profile_image_id: image_profile
        }
      })
    }).catch(e => alert(e))
  }

  onTakeCamera() {
    ImagePicker.openCamera({
      cropping: true,
      width: 300,
      height: 300,
      includeExif: true
    }).then(image => {
      console.log('received image', image)
      let image_profile = {
        uri: image.path,
        type: image.mime,
        name: 'image_profile.jpg',
      }
      this.setState({
        image_url: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
        images: null,
        user: {
          ...this.state.user,
          profile_image_id: image_profile
        }
      })
    }).catch(e => alert(e))
  }

  validateNextStepBtn(){
    if (this.state.checkFullname.length > 0 && this.state.user.project && this.state.user.building && this.state.checkRoomNo.length > 0) {
      this.setState({
        enableSummit: true
      });
    } else {
      this.setState({
        enableSummit: false
      });
    }
  }

  handleRequired = (e, type) => {
    // e = value
    switch (type) {
      case 'fullname':
        // code block
        this.setState(() => ({['checkFullname']: e}), () => {
          this.validateNextStepBtn()
        });
        break;
      case 'room':
        // code block
        this.setState(() => ({['checkRoomNo']: e}), () => {
          this.validateNextStepBtn()
        });
        break;
      /*case 'citizen_id':
        this.setState(() => ({['checkCitizenID']: e}));
        break;*/
      default:
        this.validateNextStepBtn()
      // code block
    }

    // console.log(this.state.user.birth_date);
    // check all
  }

  render() {
    return (
      <LinearGradient
        colors={['#00420A', '#00420A']}
        style={{
          flex: 1,
          width: null,
          height: null,
          resizeMode: 'cover'
        }}
      >
        <KeyboardAvoidingView style={{flex: 1}} keyboardVerticalOffset={Platform.OS == 'ios' ? 75 : 0} behavior={Platform.OS == 'ios' ? "padding" : ""} enabled>
          <BackgroundImage_RegisterForm>
            <ScrollView showsVerticalScrollIndicator={false} style={{flex: 1}}>
              <View style={styles.container}>
                <View style={[styles.step_indicator]}>
                  <CustomStepIndicator
                    currentStep={2}
                    totalStep={3}
                  />
                </View>
                <View style={styles.logo}>
                  <View
                    style={{
                      flex: 1,
                      flexGrow: 1,
                      backgroundColor: '#3AA40C',
                      alignItems: 'center',
                      paddingVertical: 20,
                      position: 'relative'
                    }}
                  >
                    <TouchableOpacity
                      style={{
                        backgroundColor: '#FFF',
                        borderRadius: 50,
                        padding: 5,
                        justifyContent: 'center',
                        alignItems: 'center',
                        position: 'absolute',
                        right: '37%',
                        top: '30%',
                        zIndex: 1
                      }}
                      onPress={() => {
                        ActionSheet.showActionSheetWithOptions({
                            options: ACTIONSHEET_BUTTONS,
                            cancelButtonIndex: CANCEL_INDEX,
                            // destructiveButtonIndex: DESTRUCTIVE_INDEX,
                            // tintColor: 'blue'
                          },
                          (buttonIndex) => {
                            // console.log('button clicked :', buttonIndex)
                            if (buttonIndex == 0) {
                              this.onTakeCamera()
                            } else if (buttonIndex == 1) {
                              this.onImagePick()
                            }
                          })
                      }}
                    >
                      <Icon
                        name={'ic_outline_camera'}
                        size={20}
                        color={'#8BC34A'}
                      />
                    </TouchableOpacity>
                    <Image
                      style={{
                        width: 100,
                        height: 100,
                        borderRadius: 50,
                        borderColor: 'white',
                        borderWidth: 2
                      }}
                      source={this.state.image_url}
                    />
                  </View>
                  {/*<Text> LOGO </Text>*/}
                </View>
                <View style={{flex: 1}}>
                  <View style={[styles.form]}>
                    <Text style={styles.headerTitle}> {t('profile')} </Text>
                    <View style={styles.row}>
                      <CustomInput
                        labelName={t('fullname')}
                        //New Code style
                        style={styles.register_input}
                        labelColor={'white'}
                        placeholderTextColor={'white'}
                        //New Code style
                        onEndEditing={e => {
                          let input = e.nativeEvent.text
                          this.setState({
                            user: {
                              ...this.state.user,
                              name: input,
                            }
                          })
                        }}
                        value={this.state.user.name}
                        onChangeText={(evt) => {
                          this.handleRequired(evt, "fullname")
                          this.setState({
                            user:{
                              ...this.state.user,
                              name:  evt.replace(/\u0020/, '\u00a0')

                            }
                          })
                        }}
                        placeholder={t('specific_fullname')}
                        placeholderTextColor={'#FFFFFF40'}
                      />
                    </View>
                    {/* <View style={styles.row}>
                    <CustomInput
                      //New Code style
                      keyboardType={'email-address'}
                      style={styles.register_input}
                      labelColor={'white'}
                      placeholderTextColor={'white'}
                      //New Code style
                      labelName={'อีเมล'}
                      onEndEditing={e => {
                        let input = e.nativeEvent.text
                        this.setState({
                          user: {
                            ...this.state.user,
                            email: input
                          }
                        })
                      }}
                      textContentType={'emailAddress'}
                      placeholder={'ระบุอีเมล'}
                      placeholderTextColor={'#FFFFFF40'}
                    />
                  </View> */}
                    {/*<View style={styles.row}>
                    <View style={styles.row_grow_first}>
                      <View
                        style={{
                          flex: 1,
                          flexDirection: 'row',
                          height: 40,
                          paddingHorizontal: 5,
                          backgroundColor: 'rgba(255,255,255,0.3)',
                          borderRadius: 30,
                        }}
                      >
                        <View style={{ justifyContent: 'center', paddingLeft: 5, paddingRight: 5 }}>
                          <Text
                            style={{
                              color: 'white'
                            }}
                          >
                            {t('gender')}
                          </Text>
                        </View>
                        <View style={{ flex: 1,alignItems: Platform.OS == 'ios' ? 'flex-end' : 'stretch'}}>
                          <Picker
                            mode="dropdown"
                            style={{
                              height: 40,
                              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')}
                            placeholderStyle={{color:'#FFFFFF40'}}
                            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>*/}
                    {/* /// */}
                    {/*<View style={styles.row}>
                    <View style={styles.row_grow}>
                      <CustomDatePicker titleText={t('birth_date')}  dateText={this.state.user.text_birth} maxDate={new Date()} handleDate={(data) => {
                        this.setState({
                            user: {
                              ...this.state.user,
                              birth_date: moment(data).format('YYYY-MM-DD'),
                              birth_date_show: moment(data).format('MM/DD/YYYY'),
                              text_birth: moment(data).add(543, 'years').format('DD-MM-YYYY')
                            }
                          }, () => {
                          this.handleRequired(data, "birth_date");
                        })
                      }}/>
                    </View>
                  </View>*/}
                    <View style={styles.row}>
                      <CustomInput
                        maxLength={10}
                        //New Code style
                        style={styles.register_input}
                        labelColor={'white'}
                        placeholderTextColor={'white'}
                        //New Code style
                        labelName={t('phone')}
                        onEndEditing={e => {
                          let input = e.nativeEvent.text
                          this.setState({
                            user: {
                              ...this.state.user,
                              mobile: input
                            }
                          })
                        }}
                        placeholder={t('phone')}
                        placeholderTextColor={'#FFFFFF40'}
                        value={this.state.user.mobile || ''}
                      />
                    </View>

                    {/*<View style={styles.userTypeContainer}>
                    <TouchableOpacity style={styles.radioInput}
                                      onPress={() => {this.setState({
                                        is_customer: true }, () => {
                                        this.handleRequired(this.state.is_customer, "user_type");
                                      })
                                      }}
                    >
                      {
                        this.state.is_customer ?
                          <Image source={require('../../../assets/images/radio_button_checked.png')} style={{width: 20, height: 20, marginRight: 5}} />
                          : <Image source={require('../../../assets/images/radio_button.png')} style={{width: 20, height: 20, marginRight: 5}} />
                      }

                      <Text style={{color: 'white'}}>{t('customer')}</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.radioInput}
                                      onPress={() => {
                                        this.setState({
                                          is_customer: false,
                                          user: {
                                            ...this.state.user,
                                            tax_id: '',
                                            building: '',
                                            room: ''
                                          },
                                          checkCitizenID: false
                                        }, () => {
                                        this.handleRequired(this.state.is_customer, "user_type");
                                      })
                                      }}
                    >
                      {
                        this.state.is_customer ?
                          <Image source={require('../../../assets/images/radio_button.png')} style={{width: 20, height: 20, marginRight: 5}} />
                          : <Image source={require('../../../assets/images/radio_button_checked.png')} style={{width: 20, height: 20, marginRight: 5}} />
                      }
                      <Text style={{color: 'white'}}>{t('guest')}</Text>
                    </TouchableOpacity>
                  </View>*/}

                    {/*{
                    this.state.is_customer &&
                    <View style={styles.row}>
                      <CustomInput
                        maxLength={13}
                        style={styles.register_input}
                        labelColor={'white'}
                        placeholderTextColor={'white'}
                        labelName={t('citizen_id')}
                        onEndEditing={e => {
                          let input = e.nativeEvent.text
                          this.setState({
                            user: {
                              ...this.state.user,
                              tax_id: input
                            }
                          })
                        }}
                        onChangeText={(evt) => this.handleRequired(evt, "citizen_id")}
                        placeholder={t('citizen_id_13')}
                        placeholderTextColor={'#FFFFFF40'}
                      />
                    </View>
                  }*/}

                    <Text style={styles.headerTitle}> {t('accom_info')} </Text>
                    <View style={styles.row}>
                      <View
                        style={{
                          flexGrow: 1,
                          flexDirection: 'row',
                          height: 40,
                          paddingHorizontal: 5,
                          backgroundColor: 'rgba(255,255,255,0.3)',
                          fontFamily: 'Prompt-Regular',
                          borderRadius: 30
                        }}
                      >
                        <View
                          style={{
                            justifyContent: 'center',
                            paddingLeft: 5,
                            paddingRight: 5
                          }}
                        >
                          <Text
                            style={{
                              color: 'white'
                            }}
                          >
                            {t('project')}
                          </Text>
                        </View>
                        <View style={{flex: 1}}>
                          <Picker
                            // mode="dropdown"
                            style={{
                              height: 40,
                              color: 'white'
                            }}
                            textStyle={{color: 'white', fontFamily: 'Prompt-Regular', fontSize: 14}}
                            labelName={t('project')}
                            placeholder={t('choose_project')}
                            placeholderStyle={{color: '#FFFFFF40'}}
                            selectedValue={this.state.project_item}
                            onValueChange={e => {
                              // console.log('@@@@@@ project selected --------> ',e);
                              this.setState({
                                project_name: e.name,
                                project_item: e,
                                selected_project: e.id,
                                user: {
                                  ...this.state.user,
                                  project: e.code,
                                  project_name: e.name
                                },
                              }, () => {
                                // console.log('check project selected --------> ',this.state.project_name);
                                this.handleRequired(e, "project")
                                this.getBuildingList()
                              })
                            }}
                          >
                            {this.state.project_list.map((item) => {
                              return <Picker.Item label={item.name} value={item} key={'project_' + item}/>
                            })}
                          </Picker>
                        </View>

                      </View>
                    </View>
                    {
                      this.state.is_customer &&
                      <View style={styles.row}>
                        <View
                          style={{
                            flexGrow: 1,
                            flexDirection: 'row',
                            height: 40,
                            maxHeight: 48,
                            minHeight: 40,
                            paddingHorizontal: 5,
                            backgroundColor: 'rgba(255,255,255,0.3)',
                            fontFamily: 'Prompt-Regular',
                            borderRadius: 30
                          }}
                        >
                          <View
                            style={{
                              justifyContent: 'center',
                              paddingLeft: 5,
                              paddingRight: 5
                            }}
                          >
                            <Text
                              style={{
                                color: 'white'
                              }}
                            >
                              {t('building')}
                            </Text>
                          </View>
                          <View style={{flex: 1}}>
                            <Picker
                              // mode="dropdown"
                              style={{
                                height: 40,
                                color: 'white'
                              }}
                              textStyle={{color: 'white', fontFamily: 'Prompt-Regular', fontSize: 14}}
                              labelName={t('building')}
                              placeholder={'เลือกอาคาร'}
                              placeholderStyle={{color: '#FFFFFF40'}}
                              selectedValue={this.state.user.building}
                              onValueChange={e => {
                                this.setState({
                                  user: {
                                    ...this.state.user,
                                    building: e
                                  }
                                }, () => {
                                  this.handleRequired(e, "building")
                                })
                              }}
                            >
                              {this.state.building_list.map((item) => {
                                return <Picker.Item label={item.room_build} value={item.room_build} key={'building_' + item.room_build}/>
                              })}
                            </Picker>
                          </View>
                        </View>
                        <View style={styles.row_grow}>
                          <CustomInput
                            //New Code style
                            style={styles.register_input}
                            labelColor={'white'}
                            placeholderTextColor={'white'}
                            //New Code style
                            labelName={t('room2')}
                            onChangeText={e => {
                              // let input = e.nativeEvent.text
                              this.setState({
                                user: {
                                  ...this.state.user,
                                  room: e
                                }
                              }, () => {
                                this.handleRequired(e, "room")
                              })
                            }}
                            placeholder={t('room_no')}
                            placeholderTextColor={'#FFFFFF40'}
                          />
                        </View>
                      </View>
                    }

                    <View style={[styles.buttons, {display: this.state.enableSummit ? 'none' : 'flex'}]}>
                      <View style={styles.row_grow}>
                        <CustomButton
                          // disabled="true"
                          style={styles.disableNext} // enableNext
                          title={t('next')}
                          sizeText={14}
                          // onPress={this._onNextStep}
                        />
                      </View>
                    </View>

                    <View style={[styles.buttons, {display: this.state.enableSummit ? 'flex' : 'none'}]}>
                      <View style={styles.row_grow}>
                        <CustomButton
                          // disabled="true"
                          style={styles.enableNext} // enableNext
                          title={t('next')}
                          sizeText={14}
                          onPress={this._onNextStep}
                        />
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </ScrollView>
          </BackgroundImage_RegisterForm>
        </KeyboardAvoidingView>
      </LinearGradient>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    flexGrow: 1,
    flexDirection: 'column'
  },
  logo: {
    flex: 1,
    backgroundColor: '#3AA40C',
    height: '20%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  form: {
    flex: 1,
    padding: 15,
    paddingTop: 5,
    paddingBottom: 0
  },
  row: {
    flexDirection: 'row',
    marginBottom: 5
  },
  form_address: {
    padding: 10,
    paddingBottom: 0
  },
  step_indicator: {
    backgroundColor: '#3AA40C',
    flex: 1
  },
  buttons: {
    flexDirection: 'row',
    marginTop: 15,
    marginBottom: 0,
    bottom: 10
  },
  row_grow: {
    flexGrow: 1
  },
  row_grow_first: {
    flexGrow: 1,
  },
  headerTitle: {
    color: '#8BC34A',
    marginVertical: 5,
    marginTop: 10
  },
  btn_next_register: {
    opacity: 1,
    backgroundColor: '#145EB3'
  },
  register_input: {
    backgroundColor: 'rgba(255,255,255,0.3)',
    color: 'red',
    fontFamily: 'Prompt-Regular',
    borderRadius: 30
  },
  disableNext: {
    opacity: 0.65,
    cursor: "not-allowed",
    backgroundColor: '#AAAAAA'
  },
  enableNext: {
    opacity: 1,
    color: '#FFFFFF',
    backgroundColor: '#145EB3'
  },
  userTypeContainer: {
    flex: 1,
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 10
  },
  radioInput: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  custom_button_container: {
    // flex:1,
    // flexDirection: 'row',
    height: 35,
    abckgroundColor: '#FF9500',
    borderRadius: 5,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    justifyContent: 'center',
    // alignItems: '',
    // flex: 1,
    paddingLeft: 5,
    paddingRight: 5
  },
}

const mapDisPatchToProps = state => {
  return state.app
}
const setUser = dispatch => bindActionCreators({appSetUser}, dispatch)
export default connect(
  mapDisPatchToProps,
  setUser
)(RegisterFormLoginScreen)