import React, { Component } from 'react';
import { View, Text, StyleSheet,TouchableOpacity,Image, TextInput, Dimensions } from 'react-native';
import CheckBox from '@react-native-community/checkbox'
import X from '../../assets/X.svg'
import { ScrollView } from 'react-native-gesture-handler';
import Heart from '../../assets/heart_.svg'
import Chat from '../../assets/chat_.svg'
import Home from '../../assets/home.svg'
import QR from '../../assets/qr.svg'
import Alarm from '../../assets/alarm.svg'
import Avatar from '../../assets/avatar.svg'
import Notice from '../Notice'
import AsyncStorage from '@react-native-community/async-storage';
import {put} from 'axios'
import { SERVER } from '../../common/servername';
import ImagePicker from 'react-native-image-picker';
import moment from 'moment';
import DateTimePickerModal from "react-native-modal-datetime-picker";
const options = {
    mediaType: 'photo',
    maxWidth: 550,
    storageOptions: {
        skipBackup:true
    },
    includeBase64:true
  };
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    constructor(props) {
        super(props)
    }
    state = {
        currentState:0,
        nickname:"",
        email:"",
        password:"",
        phone_number:"",
        date_of_birth:"",
        wedding_day:"",
        image:"",
        user:{},
        file:null,
        DatePicker:false,
        DatePicker_:false,
    }
    componentDidMount() {
        AsyncStorage.getItem("user",(err,res) => {
            if(!res) alert("로그인 후 이용 가능합니다.")
            if(!res) return this.props.navigation.goBack(null)
            console.log("user",JSON.parse(res))
            this.setState({
                user:JSON.parse(res),
                nickname:JSON.parse(res).nickname,
                email:JSON.parse(res).email,
                phone_number:JSON.parse(res).phone,
                date_of_birth:JSON.parse(res).date_of_birth,
                wedding_day:JSON.parse(res).wedding_day,
                image:JSON.parse(res).picture
            })
            
        })
        AsyncStorage.getItem("token",(err,res) => {
            console.log(res)
        })
    }
    
    showDatePicker = () => {
        this.setState({
            DatePicker:true
        })
    };

    hideDatePicker = () => {
        this.setState({
            DatePicker:false
        })
    };

    handleConfirm = (date) => {
        this.setState({
            date_of_birth:date
        })
        this.hideDatePicker();
    };
    
    showDatePicker_ = () => {
        this.setState({
            DatePicker:true
        })
    };

    hideDatePicker_ = () => {
        this.setState({
            DatePicker:false
        })
    };

    handleConfirm_ = (date) => {
        this.setState({
            wedding_day:date
        })
        this.hideDatePicker_();
    };
    ImagePick = () => {
        ImagePicker.launchImageLibrary(options, (response) => {
        
            if (response.didCancel) {
              console.log('User cancelled image picker');
            } else if (response.error) {
              console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
              console.log('User tapped custom button: ', response.customButton);
            } else {
              const source = { uri: response.uri };
              this.setState({
                  image:response.uri,
                  file:response
              })
              // You can also display the image using data:
              // const source = { uri: 'data:image/jpeg;base64,' + response.data };
            
              //this.setState({
                //avatarSource: source,
              //});
            }
          });
    }
    onSubmit = () => {
        const {nickname, password, date_of_birth,wedding_day,image} = this.state
        const formData = new FormData()
        if(this.state.file) {
            formData.append('image', {uri:this.state.file.uri,name:"jpeg",type:'image/jpeg'})
            formData.append('nickname',nickname)
            formData.append('password',password)
            formData.append('date_of_birth', new Date(this.state.date_of_birth).toUTCString())
            formData.append('wedding_day',new Date(this.state.wedding_day).toUTCString())
            put(`http://${SERVER}/auth/${this.state.user.id}`,formData,{ headers: 
            {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data' } 
            }).then(res => {
                console.log(res.data)
                if(res.data.success) {
                    var temp_user = this.state.user
                    temp_user.nickname=nickname
                    temp_user.date_of_birth=this.state.date_of_birth
                    temp_user.wedding_day=this.state.wedding_day
                    temp_user.picture = this.state.image
                    AsyncStorage.setItem("user",JSON.stringify(temp_user))
                    AsyncStorage.setItem("token",JSON.stringify(res.data.data.token.token))
                    alert("프로필이 수정되었습니다.")
                }
            })
        }
        else {
            put(`http://${SERVER}/auth/${this.state.user.id}`,{nickname,password,date_of_birth: new Date(this.state.date_of_birth).toUTCString(),wedding_day:new Date(this.state.wedding_day).toUTCString()},{ headers: 
            {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data' } 
            }).then(res => {
                console.log(res.data)
                if(res.data.success) {
                    var temp_user = this.state.user
                    temp_user.nickname=nickname
                    temp_user.date_of_birth=this.state.date_of_birth
                    temp_user.wedding_day=this.state.wedding_day
                    temp_user.picture = this.state.image
                    AsyncStorage.setItem("user",JSON.stringify(temp_user))
                    AsyncStorage.setItem("token",JSON.stringify(res.data.data.token.token))
                    alert("프로필이 수정되었습니다.")
                }
            })
        }

    }
    render() {
        return (
            <View style={{height:"100%"}}>
                <View style={{width:"100%",flexDirection:"row",paddingTop:16,paddingBottom:16,paddingLeft:16,backgroundColor:"#615F5F"}}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack(null)}>
                        <Image source={require('../../assets/back.png')}/>
                    </TouchableOpacity>
                    <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                        프로필 편집
                    </Text>
                </View>
            <ScrollView style={{paddingLeft:55,paddingRight:55,width:"100%",backgroundColor:"white",paddingTop:16}}>
                {this.state.image?<Image style={{alignSelf:"center",width:48,height:48,borderRadius:100,borderWidth:2,borderColor:"#615F5F"}} source={{uri:this.state.image}} /> :<Avatar style={{alignSelf:"center",marginBottom:6}}/>}
                <TouchableOpacity onPress={() => this.ImagePick()} style={{borderBottomColor:"#FFD63A",borderBottomWidth:1,alignSelf:"center",marginBottom:17}}>
                <Text style={{color:"#FFD63A",fontSize:12,fontWeight:"bold",textAlign:"center"}}>
                    사진편집
                </Text>
                </TouchableOpacity>
                
                
                
                <View style={{marginBottom:16}}>
                    <Text style={{color:"#615F5F",fontsize:12,marginBottom:8}}>
                        닉네임 편집
                    </Text>
                    <TextInput value={this.state.nickname} onChangeText={e => this.setState({nickname:e})} placeholder="상가톡" style={{padding:16,paddingTop:9,paddingBottom:9,borderColor:"#FFD63A",borderWidth:1}}/>
                </View>
                <View style={{marginBottom:16}}>
                    <Text style={{color:"#615F5F",fontsize:12,marginBottom:8}}>
                        이메일 아이디
                    </Text>
                    <TextInput value={this.state.email} onChangeText={e => this.setState({email:e})}  keyboardType="email-address" placeholder="talk@sangga.io" style={{padding:16,paddingTop:9,paddingBottom:9,borderColor:"#FFD63A",borderWidth:1}}/>
                </View>
                <View style={{marginBottom:16}}>
                    <Text style={{color:"#615F5F",fontsize:12,marginBottom:8}}>
                        비밀번호
                    </Text>
                    <TextInput value={this.state.password} onChangeText={e => this.setState({password:e})} secureTextEntry={true} placeholder="*************" style={{padding:16,paddingTop:9,paddingBottom:9,borderColor:"#FFD63A",borderWidth:1}}/>
                </View>
                <View style={{marginBottom:16}}>
                    <Text style={{color:"#615F5F",fontsize:12,marginBottom:8}}>
                        전화번호
                    </Text>
                    <TextInput value={this.state.phone_number} onChangeText={e => this.setState({phone_number:e})}  keyboardType="phone-pad" placeholder="010 1234 7777" style={{padding:16,paddingTop:9,paddingBottom:9,borderColor:"#FFD63A",borderWidth:1}}/>
                </View>
                <View style={{marginBottom:16}}>
                    <Text style={{color:"#615F5F",fontsize:12,marginBottom:8}}>
                        생년월일
                    </Text>
                    <TouchableOpacity onPress={() => this.setState({
                        DatePicker:true
                    })} value={this.state.date_of_birth} onChangeText={e => this.setState({date_of_birth:e})}  keyboardType="number-pad"  style={{padding:16,paddingTop:9,paddingBottom:9,borderColor:"#FFD63A",borderWidth:1}}>
                        <Text style={{color:"#615F5F",fontSize:14}}>
                            {this.state.date_of_birth? moment(this.state.date_of_birth).format("YY. M. D"):""}
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{marginBottom:16}}>
                    <Text style={{color:"#615F5F",fontsize:12,marginBottom:8}}>
                        결혼기념일
                    </Text>
                    <TouchableOpacity onPress={() => this.setState({
                        DatePicker_:true
                    })} value={this.state.wedding_day} onChangeText={e => this.setState({wedding_day:e})}  keyboardType="number-pad" style={{padding:16,paddingTop:9,paddingBottom:9,borderColor:"#FFD63A",borderWidth:1}}>
                        <Text style={{color:"#615F5F",fontSize:14}}>
                            {this.state.wedding_day? moment(this.state.wedding_day).format("YY. M. D"):""}
                        </Text>
                    </TouchableOpacity>
                </View>
                <DateTimePickerModal
                  isVisible={this.state.DatePicker}
                  mode="date"
                  onConfirm={this.handleConfirm}
                  onCancel={this.hideDatePicker}
                />
                <DateTimePickerModal
                  isVisible={this.state.DatePicker_}
                  mode="date"
                  onConfirm={this.handleConfirm_}
                  onCancel={this.hideDatePicker_}
                />
            </ScrollView>
            <View style={{flexDirection:"row",width:"100%",position:"absolute",backgroundColor:"white",bottom:0}}>
                <TouchableOpacity onPress={() => this.onSubmit()} style={{backgroundColor:"#FFD63A",width:"100%",paddingTop:21,paddingBottom:19}}>
                    <Text style={{textAlign:"center",fontWeight:"bold",fontSize:15}}>
                        저장
                    </Text>

                </TouchableOpacity>
            </View>
            
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});