import React from 'react';
import { BackHandler,AsyncStorage,Alert } from 'react-native';
import UpdateScreenn from "../views/UpdateScreenView";
import {responseData,updateHandler} from '../models/updateBridge';
import ImagePicker from 'react-native-image-picker';
import Crop from 'react-native-image-crop-picker';
export var username1 = null;
const options = {
    title: "Select a Photo",
    takePhotoButtonTitle: "Take a Photo",
    chooseFromLibraryButtonTitle: "Choose from gallery",
    quality: 1
}

export default class UpdateScreen extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            username : '',
            email: '',
            password: '',
            uri: '',
            newProf:'',
            type: '',
            name: '',
            user_id: '',
            modalVisibility: false,
            imageSource: null,
            image: null
        }
        this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    }
    showModal = (visibility) => {
        this.setState({modalVisibility : visibility})
    }
    clearAsyncStorage = async() => {
        AsyncStorage.clear();
    }
    // selectImage = () => {
    //     ImagePicker.clean().then(() => {
    //         console.log("img temp cleaned")
    //     }).catch(e => {
    //         alert(e)
    //     });
    //     ImagePicker.openPicker({
    //         width: 720,
    //         height: 720,
    //         compressImageMaxWidth: 720,
    //         compressImageMaxHeight: 720,
    //         cropping: true,
    //         cropperCircleOverlay: true,
    //         mediaType: 'photo'
    //     }).then(image => {
    //         console.log(image);
    //         let source = { uri: image.path }
    //         let pathParts = image.path.split('/');
    //         const data = new FormData();
    //         data.append('image', {
    //             uri: image.path,
    //             type: image.mime,
    //             name: pathParts[pathParts.length - 1]
    //         })
    //         this.setState({
    //             imageSource: source,
    //             image: data
    //         })
    //     });
    //     this.showModal(false);
    // }
    // takeCamera = () => {
    //     ImagePicker.clean().then(() => {
    //         console.log("img temp cleaned")
    //     }).catch(e => {
    //         alert(e)
    //     });
    //     ImagePicker.openCamera({
    //         width: 720,
    //         height: 720,
    //         compressImageMaxWidth: 720,
    //         compressImageMaxHeight: 720,
    //         cropping: true,
    //         cropperCircleOverlay: true,
    //         mediaType: 'photo'
    //     }).then(image => {
    //         console.log(image);
    //         let source = { uri: image.path }
    //         let pathParts = image.path.split('/');
    //         const data = new FormData();
    //         data.append('image', {
    //             uri: image.path,
    //             type: image.mime,
    //             name: pathParts[pathParts.length - 1]
    //         })
    //         this.setState({
    //             imageSource: source,
    //             image: data
    //         })
    //     });
    //     this.showModal(false);
    // }
    componentWillMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
        AsyncStorage.getItem("email",(error,result)=>{
            this.setState({
                email : result
            })

        })
        AsyncStorage.getItem("username",(error,result)=>{
            this.setState({
                username : result
            })
        })
        AsyncStorage.getItem("imageProf",(error,result)=>{
            this.setState({
                imageSource : result
            })
        })
        AsyncStorage.getItem("user_id",(error,result)=>{
            this.setState({
                user_id : result
            })
        })
        username1 = this.state.username;
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);

    }

    handleBackButtonClick() {
        this.props.navigation.goBack(null);
        return true;
    }

    async selectPhoto(){
        Crop.clean().then(() => {
            console.log("img temp cleaned")
        }).catch(e => {
            alert(e)
        });
        ImagePicker.showImagePicker(options, (response) => {
            console.log("Response = ", response);

            if(response.didCancel)  console.log("User cancelled image picker");
            else if(response.error) console.log("ImagePicker Error: ", response.error);
            else {
                let sources = { uri : response.uri }
                Crop.openCropper({
                path: response.uri,
                width: 600,
                height: 600,
                compressImageMaxWidth: 600,
                compressImageMaxHeight: 600,
                compressImageQuality: 0.8,
                cropping: true,
                cropperCircleOverlay: true,
                mediaType: 'photo'
            }).then(image =>{
                console.log(image);
                let source = { uri: image.path }
                let pathParts = image.path.split('/');
                // const imageData = {
                // uri: image.path,
                // type: image.mime,
                // name: pathParts[pathParts.length - 1]
                // }
                this.setState({
                    imageSource: source,
                    uri : image.path,
                    type: image.mime,
                    name: pathParts[pathParts.length - 1]
                })

                // this.setState({
                // imageSource: source,
                // image: data

            })
                // this.setState({
                //     imageSource: source,
                //     uri : response.uri,
                //     type : response.type,
                //     name : response.fileName
                // })



            }
        })

    }
    saveData(){
        AsyncStorage.setItem('status', this.state.status, ( error ) => {
            if( error ){
                console.error( error );
            }
        });
        AsyncStorage.setItem('email', this.state.email, ( error ) => {
            if( error ){
                console.error( error );
            }
        });
        AsyncStorage.setItem('imageProf', this.state.newProf, ( error ) => {
            if( error ){
                console.error( error );
            }
        });
        AsyncStorage.setItem('username', this.state.username, ( error ) => {
            if( error ){
                console.error( error );
            }
        });
        AsyncStorage.setItem('user_id', this.state.user_id, ( error ) => {
            if( error ){
                console.error( error );
            }
        });

    }
    sendData = async () => {
        const data = new FormData();
        data.append('user_id', this.state.user_id)
        data.append('name', this.state.username )
        data.append('password', this.state.password)
        data.append('email', this.state.email)
        data.append('image',{
            uri     : this.state.uri,
            type    : this.state.type,
            name    : this.state.name,



        },)
        console.log(data);
        // this.setState({
        //     _isLoading : true
        // })
        await updateHandler(data).then(res => {
            if(responseData != null){ console.log("Update Succes");
            this.setState({
                _isLoading : false
            })
            AsyncStorage.clear();
            this.setState({
                status : "Yeah",
                username : responseData.data.username,
                email : responseData.data.email,
                newProf : responseData.data.imageProfil,
                gender : responseData.data.gender,
                user_id: responseData.data.id_user

            })
            this.saveData();
            Alert.alert('Upload Succes');
            this.props.navigation.push("Home");
        }else{
            Alert.alert('Gagal')
        }

    })

    }
    Moleh = async () => {
        this.props.navigation.push("Home");
    }
    setUsername = (usnam) =>{
        this.setState({
            username : usnam
        })
    }
    setEmail = (imel) =>{
        this.setState({
            email : imel
        })
    }
    setPassw = (pass) =>{
        this.setState({
            password : pass
        })
    }


    render = () => {
        return <UpdateScreenn
        _isLoading={this.state._isLoading}
        sendData={()=> this.sendData()}
        onPress={()=> this.Moleh()}
        nameChange = {
            name => this.setUsername(name)
        }
        emailChange = {
            email => this.setEmail(email)
        }
        passwordChange = {
            password => this.setPassw(password)
        }

        username = {this.state.username}
        email = {this.state.email}
        modalVisibility={this.state.modalVisibility}
        openModal={() => this.showModal(true)}
        closeModal={() => this.showModal(false)}
        openPicker={() => this.selectImage()}
        openCamera={() => this.selectPhoto()}
        image={this.state.imageSource}
        />
    }
}