import firebase from 'firebase';
import Framework7 from 'framework7/framework7.esm.bundle.js';
import { v4 as uuidv4 } from 'uuid';
import axios from "axios";
const FileModule = {
    state: {
        image_url: 'https://penpalamerica.com/images/profilepicture.png',
        image_url1: 'https://penpalamerica.com/images/profilepicture.png',
        image_url2: 'https://penpalamerica.com/images/profilepicture.png',
        image_url3: 'https://penpalamerica.com/images/profilepicture.png',
        image_url4: 'https://penpalamerica.com/images/profilepicture.png',
        image_url5: 'https://penpalamerica.com/images/profilepicture.png',
        image_url6: 'https://penpalamerica.com/images/profilepicture.png',

        files: null,
        images: [],
        group_image_url: 'https://penpalamerica.com/images/profilepicture.png',
        uploadFile: 0
    },
    getters: {
        image_url: state => state.image_url,
        image_url1: state => state.image_url1,
        image_url2: state => state.image_url2,
        image_url3: state => state.image_url3,
        image_url4: state => state.image_url4,
        image_url5: state => state.image_url5,
        image_url6: state => state.image_url6,

        files: state => state.files,
        images: state => state.images,
        group_image_url: state => state.group_image_url,
        uploadFile: state => state.uploadFile,
    },
    mutations: {
        setUploadFile(state, payload) {
            state.uploadFile = payload
        },

        setImageURL(state, payload) {
            state.image_url = payload
        },

        setImageURL1(state, payload) {
            state.image_url1 = payload
        },

        setImageURL2(state, payload) {
            state.image_url2 = payload
        },
        setImageURL3(state, payload) {
            state.image_url3 = payload
        },
        setImageURL4(state, payload) {
            state.image_url4 = payload
        },
        setImageURL5(state, payload) {
            state.image_url5 = payload
        },

        setImageURL6(state, payload) {
            state.image_url6 = payload
        },

        setGroupImageURL(state, payload) {
            state.group_image_url = payload
        },
        setFiles(state, payload) {
            state.files = payload
        },
        setImages(state, payload) {
            state.images = payload
        },

    },
    actions: {
        readFileMessage({ commit }) {
            const files = event.target.files;
            let mfile = files[0]
            if (mfile['size'] > 2097152) {
                commit("setAlertMessage", "The File size is greater than 2MB. Kindly upload image less than 2MB")
                return;
            }
            for (let i = 0; i < files.length; i++) {
                var file = files[i]
                if (!file.type.match("image")) {
                    commit("setAlertMessage", "Invalid File Format. Upload Images only")
                    return;
                }
                var picReader = new FileReader();
                var images = []
                picReader.addEventListener('load', event => {
                    var picFile = event.target;
                    images.push(picFile.result)
                });
               // console.log("image",images)
                commit('setFiles', files)
                commit('setImages', images)

                picReader.readAsDataURL(file)

            }
        },
        readFile({ commit }, action_name) {
            const files = event.target.files;
            // console.log("files", files)
            commit('setFiles', files)
            const fileReader = new FileReader();
            let file = files[0]
            if (file['size'] <= 2097152) {
                fileReader.readAsDataURL(file)
                fileReader.addEventListener('load', () => {
                    var imageUrl = fileReader.result;
                    //  console.log("action_name", action_name)
                    commit(action_name, imageUrl)
                })
            } else {
                commit('setAlertMessage', 'The image size is greater than 2MB')
                return
            }

        },


        readFilePlus({ commit }, payload) {
            var promise = new Promise((resolve, reject) => {
                const files = event.target.files;
                //console.log("files", files)
                commit('setFiles', files)
                const fileReader = new FileReader();
                let file = files[0]
                //console.log("Print files details", files[0])

                if (payload.url == 5 || payload.url == 6) {
                    if (file['type'] == "image/jpeg" || file['type'] == "image/png" || file['type'] == "image/pjpeg") {
                        commit("setAlertMessage", "Only Video is allowed here")
                        return
                    }
                }


                if (payload.url == 1 || payload.url == 2 || payload.url == 3 || payload.url == 4) {
                    if (file['type'] == "video/mp4") {
                        commit("setAlertMessage", "Only Image is allowed here")
                        return
                    }
                }

                if (file['type'] == "image/jpeg" || file['type'] == "image/png" || file['type'] == "image/pjpeg") {

                    if (file['size'] <= 3145728) {

                        fileReader.readAsDataURL(file)
                        fileReader.addEventListener('load', () => {
                            var imageUrl = fileReader.result;
                            //  console.log("action_name", action_name)
                            commit(payload.action_name, imageUrl)
                        })
                    } else {
                        commit('setAlertMessage', 'The image size is greater than 3MB')
                        return
                    }
                }//end of immage file


                if (file['type'] == "video/mp4") {


                    if (file['size'] <= 10485760) {

                        fileReader.readAsDataURL(file)
                        fileReader.addEventListener('load', () => {
                            var imageUrl = fileReader.result;
                            //  console.log("action_name", action_name)
                            commit(payload.action_name, imageUrl)
                        })
                    } else {
                        commit('setAlertMessage', 'The video File is greater than 10MB')
                        return
                    }
                }//end of immage file


                resolve(files)
            })
            return promise

        },
        uploadFile({ commit, state }, filepath) {
            console.log("file upload module", filepath)
            return new Promise((resolve, reject) => {
                var file = state.files[0]
                //console.log("file", file)
                var storageRef = firebase.storage().ref(filepath + "/" + uuidv4() + ".jpg")
                //console.log("storageRef", storageRef)
                var uploadTask = storageRef.put(file)

                uploadTask.on('state_changed', function (snapshot) {
                    // Observe state change events such as progress, pause, and resume
                    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    //console.log('Upload is ' + progress + '% done');
                    commit("setUploadFile", progress)

                }, function (error) {
                    // Handle unsuccessful uploads
                    //console.log(error.message)
                    reject(error)
                }, function () {
                    // Handle successful uploads on complete
                    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
                    uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                        resolve(downloadURL)
                    });
                });
            })
        },

        uploadImageMySQL({ commit }, payload) {
            //console.log("uploadImageMySQL", payload)
            var promise = new Promise((resolve, reject) => {
                // console.log("uploadImageMySQL files[0]", self.payload.files[0])
                const URL = "https://penpalamerica.com/penpalamerica/upload/php/upload.php";

                let data = new FormData();
                data.append("name", "photo");
                data.append("photo", payload);

                let config = {
                    header: {
                        "Content-Type": "image/png",
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
                    },
                };

                axios.post(URL, data, config).then((response) => {
                    //console.log("image upload response > ", response.data[1]);

                    var stringified = JSON.stringify(response);
                    var obj = JSON.parse(stringified);
                    // console.log("Display1", obj);
                    this.updateResponse = obj;
                    //console.log("Display2", obj.data[0].errorNo);
                    console.log("Display2", response.data[0].message);

                    commit('setImages', response.data[0].message)
                    resolve(response.data[0].message)
                });
            })
            return promise
        },


        uploadImageMySQLAddPhoto({ commit }, payload) {
            //console.log("uploadImageMySQL", payload)
            var promise = new Promise((resolve, reject) => {
                // console.log("uploadImageMySQL files[0]", self.payload.files[0])
                const URL = "https://penpalamerica.com/penpalamerica/upload/php/upload.php";

                let data = new FormData();
                data.append("name", "photo");
                data.append("photo", payload.files);

                let config = {
                    header: {
                        "Content-Type": "image/png",
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
                    },
                };
                var errorMessage = ""
                axios.post(URL, data, config).then((response) => {
                    //console.log("image upload response > ", response.data[1]);

                    var stringified = JSON.stringify(response);
                    var obj = JSON.parse(stringified);
                    // console.log("Display1", obj);
                    this.updateResponse = obj;
                    //console.log("Display3 error", response.data[0].errorNo);
                    // console.log("Display2", response.data[0].message);
                    errorMessage = response.data[0].errorNo
                    //commit('setImages', response.data[0].message)
                    var url_details = response.data[0].message

                    //send res
                    //console.log("errorMessage", errorMessage)

                    if (errorMessage == "0") {
                        var postData = {
                            url: payload.url,
                            url_details: url_details,
                            domain: payload.domain,
                            email: payload.email,
                        };
                        var action_name2 = "setImageURL" + payload.url
                        console.log("action_name2", action_name2)
                        Framework7.request.post(
                            "https://penpalamerica.com/penpal/uploadaddphoto.php",
                            postData,
                            function (data) {
                                //console.log("location data", data)
                                //var obj = JSON.parse(data);
                                if (data == '0') {
                                    commit(action_name2, url_details)
                                    commit("setAlertMessage", "Photo Uploaded Successfully")
                                    return
                                }

                            }
                        );

                    } //end of error = 0

                    resolve("done")


                });

            })
            return promise
        },



        uploadImageMySQLPlus({ commit }, payload) {
            //console.log("uploadImageMySQL", payload)
            var promise = new Promise((resolve, reject) => {
                // console.log("uploadImageMySQL files[0]", self.payload.files[0])
                const URL = "https://penpalamerica.com/penpal/uploadplus.php";

                let data = new FormData();
                data.append("name", "photo");
                data.append("photo", payload.photo);
                data.append("email", payload.email);
                data.append("domain", payload.domain);

                let config = {
                    header: {
                        "Content-Type": "image/png",
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
                    },
                };

                axios.post(URL, data, config).then((response) => {
                    console.log("image upload response > ", response);
                    if (response.data == "0") {
                        resolve("0")
                    } else {
                        resolve("1")
                    }



                });
            })
            return promise
        },



        uploadImageMySQLChat({ commit }, payload) {
            // console.log("uploadImageMySQL", payload)
            var promise = new Promise((resolve, reject) => {
                // console.log("uploadImageMySQL files[0]", self.payload.files[0])
                const URL = "https://penpalamerica.com/penpalamerica/upload/php/uploadchat.php";

                let data = new FormData();
                data.append("name", "photo");
                data.append("photo", payload);

                let config = {
                    header: {
                        "Content-Type": "image/png",
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
                    },
                };

                axios.post(URL, data, config).then((response) => {
                    //console.log("image upload response > ", response.data[1]);

                    var stringified = JSON.stringify(response);
                    var obj = JSON.parse(stringified);
                    // console.log("Display1", obj);
                    this.updateResponse = obj;
                    //console.log("Display2", obj.data[0].errorNo);
                    console.log("Display2", response.data[0].message);

                    commit('setImages', response.data[0].message)
                    resolve(response.data[0].message)
                });
            })
            return promise
        },




        uploadChatImages({ commit }, payload) {
            return new Promise((resolve, reject) => {
                var number = Math.random()
                var uniq_id = number.toString(36).substr(2, 9);
                console.log("file upload images", payload)
                var storageRef = firebase.storage().ref('chat_images/' + `${uniq_id}.png`)
                var uploadTask = storageRef.putString(payload, 'data_url', {
                    contentType: "image/png"
                })

                uploadTask.on('state_changed', function (snapshot) {
                    // Observe state change events such as progress, pause, and resume
                    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    console.log('Upload is ' + progress + '% done');

                }, function (error) {
                    // Handle unsuccessful uploads
                    reject(error)
                }, function () {
                    // Handle successful uploads on complete
                    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
                    uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                        resolve(downloadURL)
                    });
                });
            })
        }



    },


}


export default FileModule