var cffStorage = window.localStorage;
/**
 * Add Source Popup
 *
 * @since 4.0
 */
Vue.component('sb-add-source-component', {
    name: 'sb-add-source-component',
    template: '#sb-add-source-component',
    props: [
    'genericText',
    'links',
    'svgIcons',
    'viewsActive',
    'selectSourceScreen',
    'selectedFeed',
    'parent'
    ],
    data: function() {
        return{
            sourcesList : cff_source.sources,
            //Add New Source
            newSourceData        : cff_source.newSourceData ? cff_source.newSourceData : null,
            sourceConnectionURLs : cff_source.sourceConnectionURLs,
            returnedApiSourcesList : [],
            addNewSource : {
                typeSelected        : 'page',
                manualSourceID      : null,
                manualSourceToken   : null
            },
            selectedSourcesToConnect : [],
            loadingAjax : false
        }
    },
    computed : {

    },
    mounted : function(){
        var self = this;
        if(self.newSourceData != null){
            self.initAddSourceData();
        }
        self.processFBConnectSuccess();
    },
    methods : {
        /**
         * Return Page/Group Avatar
         *
         * @since 4.0
         *
         * @return string
         */
         returnGroupPageAvatar : function(source){
            var info = this.$parent.jsonParse(source.info);
            return (source.account_type == 'page') ? 'https://graph.facebook.com/'+source.account_id+'/picture' : (info.picture.data.url ? info.picture.data.url : '');
        },


        /**
         * Add Feed Source Manually
         *
         * @since 4.0
         */
        addSourceManually: function(isEventSource = false){
            var self = this,
            manualSourceData = {
                'action' : 'cff_source_builder_update',
                'type' : self.addNewSource.typeSelected,
                'id' : self.addNewSource.manualSourceID,
                'access_token' : self.addNewSource.manualSourceToken,
            };
            if(isEventSource){
                manualSourceData.privilege = 'events';
            }
            var alerts = document.querySelectorAll(".sb-alerts-wrap");
            if (alerts.length) {
                alerts[0].parentNode.removeChild(alerts[0]);
            }

            if(self.$parent.checkNotEmpty(self.addNewSource.manualSourceID) && self.$parent.checkNotEmpty(self.addNewSource.manualSourceToken) ){
                self.loadingAjax = true;
                self.$parent.ajaxPost(manualSourceData, function(_ref){
                    var data = _ref.data;
                    if (typeof data.success !== 'undefined' && data.success === false) {
                        //cff-fb-source-inputs cff-fb-fs
                        var inputs = document.querySelectorAll(".cff-fb-source-inputs")[0];

                        var div = document.createElement('div');
                        div.innerHTML = data.message;
                        while (div.children.length > 0) {
                            inputs.appendChild(div.children[0]);
                        }

                    } else {
                        self.addNewSource = {typeSelected : 'page', manualSourceID : null,manualSourceToken : null};
                        self.sourcesList = data;
                        self.$parent.sourcesList = data;
                        self.$parent.viewsActive.sourcePopup = false;
                        if(self.$parent.customizerFeedData){
                            self.$parent.activateView('sourcePopup', 'customizer');
                        }
                    }
                    self.loadingAjax = false;

                });
            }else{
                alert("Token or ID Empty")
            }
        },

        /**
         * Make sure something entered for manual connections
         *
         * @since 4.0
         */
        checkManualEmpty : function() {
            var self = this;
            return self.$parent.checkNotEmpty(self.addNewSource.manualSourceID) && self.$parent.checkNotEmpty(self.addNewSource.manualSourceToken);
        },

        /**
         * Init Add Source Action
         * Triggered when the connect button is returned
         *
         * @since 4.0
         */
         initAddSourceData : function(){
            var self = this;
            self.$parent.viewsActive.sourcePopup = true;
            self.$parent.viewsActive.sourcePopupScreen = 'step_2';
            if(self.newSourceData && !self.newSourceData.error){
                if(self.newSourceData.admin || self.newSourceData.member){
                    self.addNewSource.typeSelected = 'group';
                    self.newSourceData.admin.forEach(function(singleSource){
                        singleSource.admin = true;
                        self.returnedApiSourcesList.push(self.createSourceObject('group',singleSource));
                    });
                    self.newSourceData.member.forEach(function(singleSource){
                        //if(!self.checkObjectArrayElement(self.returnedApiSourcesList, self.newSourceData.admin, 'id')){
                            singleSource.admin = false;
                            self.returnedApiSourcesList.push(self.createSourceObject('group',singleSource));
                        //}
                    });
                }else{
                    self.newSourceData.pages.forEach(function(singleSource){
                        self.returnedApiSourcesList.push(self.createSourceObject('page',singleSource));
                    });
                }
            }
        },

        /**
         * Create Single Source Object
         *
         * @since 4.0
         *
         * @return Object
         */
         createSourceObject : function(type,object){
            return {
                account_id : object.id,
                access_token : object.access_token,
                account_type : type,
                info : (type == 'group' ? JSON.stringify(object) : '{}'),
                admin : (type == 'group' ? object.admin  : ''),
                username : object.name
            }
        },

        /**
         * Select Page/Group to Connect
         *
         * @since 4.0
         */
         selectSourcesToConnect : function(source){
            var self = this;

            if (typeof window.cffSelected === 'undefined') {
                window.cffSelected = [];
            }
            if(self.selectedSourcesToConnect.includes(source.account_id)){
                self.selectedSourcesToConnect.splice(self.selectedSourcesToConnect.indexOf(source.account_id), 1);
                window.cffSelected.splice(self.selectedSourcesToConnect.indexOf(source.admin), 1);
            }else{
                self.selectedSourcesToConnect.push(source.account_id);
                window.cffSelected.push(source.admin);
            }
        },

        /**
         * Select Page/Group to Connect
         *
         * @since 4.0
         */
         addSourcesOnConnect : function(){
            var self = this;
            if(self.selectedSourcesToConnect.length > 0){
                var sourcesListToAdd = [];
                self.selectedSourcesToConnect.forEach(function(accountID, index){
                    self.returnedApiSourcesList.forEach(function(source){
                        if(source.account_id === accountID)
                            sourcesListToAdd.push(source);
                    });
                });
                var connectSourceData = {
                    'action' : 'cff_source_builder_update_multiple',
                    'type' : self.addNewSource.typeSelected,
                    'sourcesList' : sourcesListToAdd
                };
                self.$parent.ajaxPost(connectSourceData, function(_ref){
                    var data = _ref.data,
                        sourcesList = data.sourcesList;
                    if( data?.hasError ){
                        self.$parent.processNotification("addSourceError");
                    }
                    self.sourcesList = sourcesList;
                    self.$parent.sourcesList = sourcesList;
                    self.$parent.viewsActive.sourcePopup = false;
                    if(self.$parent.customizerFeedData){
                        self.$parent.activateView('sourcePopup', 'customizer');
                    }
                });
            }
        },

        /**
         * Process Connect FB Button
         *
         * @since 4.0
         */
         processFBConnect : function(){
            var self = this,
            accountType = self.addNewSource.typeSelected,
            params = accountType === 'page' ? self.sourceConnectionURLs.page : self.sourceConnectionURLs.group,
            ifConnectURL = params.connect,
            screenType = (self.$parent.customizerFeedData != undefined) ? 'customizer'  : 'creationProcess',
            appendURL = ( screenType == 'customizer' ) ? self.sourceConnectionURLs.stateURL + ',feed_id='+ self.$parent.customizerFeedData.feed_info.id : self.sourceConnectionURLs.stateURL;
            if(screenType != 'customizer'){
                self.createLocalStorage(screenType);
            }

            if( self.$parent.isSetupPage === 'true'){
                appendURL = appendURL+ ',is_setup_page=yes';
            }

            const urlParams = {
                'wordpress_user' : params.wordpress_user,
                'v' : params.v,
                'vn' : params.vn,
                'cff_con' : params.cff_con,
                'has_group' : params.has_group,
                'state' : "{'{url=" + appendURL + "}'}"
            };

            if(params.sw_feed) {
                urlParams['sw-feed'] = 'true';
            }

            var form = document.createElement('form');
            form.method = 'POST';
            form.action = ifConnectURL;
            form.action = ifConnectURL + (params.has_group === true ? '?has_group=true' : '');

            for (const param in urlParams) {
                if (urlParams.hasOwnProperty(param)) {
                    var input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = param;
                    input.value = urlParams[param];
                    form.appendChild(input);
                }
            }

            document.body.appendChild(form);
            form.submit();
        },

        /**
         * Browser Local Storage for FB Connect
         *
         * @since 4.0
         */
         createLocalStorage : function(screenType){
            var self = this;
            switch (screenType) {
                case 'creationProcess':
                    cffStorage.setItem('selectedFeed', self.$parent.selectedFeed);
                    if( self.$parent.isSetupPage === 'true'){
                        cffStorage.setItem('isSetupPage', 'true');
                    }
                break;
                case 'customizer':
                    cffStorage.setItem( 'feed_id', self.$parent.customizerFeedData.feed_info.id );
                break;
            }
            cffStorage.setItem( 'FBConnect', 'true' );
            cffStorage.setItem( 'screenType', screenType );
        },


        /**
         * Process FB Connect Success
         *
         * @since 4.0
         */
         processFBConnectSuccess : function(){
            var self = this;
            if( cffStorage.FBConnect === 'true' && cffStorage.screenType ){
                 if( cffStorage?.isSetupPage === 'true'  && cffStorage?.isSetupPage ){
                    cffStorage.removeItem("isSetupPage");
                    cffStorage.setItem('setCurrentStep',1);
                    window.location = window.location.href.replace('cff-feed-builder', 'cff-setup') ;
                }

                if( cffStorage.screenType == 'creationProcess' && cffStorage.selectedFeed ){
                    self.$parent.selectedFeed = cffStorage.selectedFeed;
                    self.$parent.viewsActive.pageScreen = 'selectFeed';
                    self.$parent.viewsActive.selectedFeedSection = 'selectSource';
                }
                if( cffStorage.screenType == 'customizer' && cffStorage.feed_id){
                    var urlParams = new URLSearchParams(window.location.search);
                    urlParams.set('feed_id', cffStorage.feed_id);
                    window.location.search = urlParams;
                }
            }
            cffStorage.removeItem("FBConnect");
            cffStorage.removeItem("screenType");
            cffStorage.removeItem("selectedFeed");
            cffStorage.removeItem("feed_id");
        },

        groupNext : function() {
             console.log('next');
        }
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" style="border-collapse:collapse;border-spacing:0px;vertical-align:top;min-width:100%;box-sizing:border-box;background-color:rgb(233,234,236);color:rgb(68,68,68);font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;padding:0px;margin:0px;text-align:left;font-size:14px;line-height:140%;height:100%;width:100%"><tbody><tr style="padding:0px;vertical-align:top;text-align:left">
        <td align="center" valign="top" style="vertical-align:top;color:rgb(68,68,68);font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;padding:0px;margin:0px;font-size:14px;line-height:140%;text-align:center;border-collapse:collapse">
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;padding:0px;vertical-align:top;width:600px;margin:0px auto;text-align:inherit">
                <tbody><tr style="padding:0px;vertical-align:top;text-align:left">
                    <td align="center" valign="middle" style="vertical-align:top;color:rgb(68,68,68);font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;margin:0px;font-size:14px;line-height:140%;text-align:center;padding:30px 30px 22px;border-collapse:collapse">
						                    </td>
                </tr>
                <tr style="padding:0px;vertical-align:top;text-align:left">
                    <td align="left" valign="top" style="vertical-align:top;color:rgb(68,68,68);font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;margin:0px;text-align:left;font-size:14px;line-height:140%;background-color:rgb(255,255,255);padding:60px 75px 45px;border-width:3px 1px 1px;border-style:solid;border-color:rgb(227, 71, 22) rgb(221,221,221) rgb(221,221,221);border-collapse:collapse">

                        <table style="border-collapse:collapse;border-spacing:0px;padding:0px;vertical-align:top;text-align:left;width:100%"><tbody><tr style="padding:0px;vertical-align:top;text-align:left">
                                <td style="vertical-align:top;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;padding:0px;margin:0px;text-align:left;font-size:14px;line-height:140%;color:rgb(119,119,119);border-collapse:collapse">
									
                                    <table class="summary-info-table" style="border-collapse: collapse; border-spacing: 0; padding: 0; vertical-align: top; text-align: left; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 38px 0 0 0; Margin: 38px 0 0 0; font-size: 15px; border: 1px solid #dddddd; border-radius: 6px; display: block;">
                                        <tbody><tr style="padding: 0; vertical-align: top; text-align: left;">
                                            <td class="summary-info-content" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; margin: 0; Margin: 0; text-align: left; font-size: 14px; mso-line-height-rule: exactly; line-height: 140%; color: #777777; padding: 25px 30px 30px 30px;">
                                                <table style="border-collapse: collapse; border-spacing: 0; padding: 0; vertical-align: top; text-align: left; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                                    <tbody><tr style="padding: 0; vertical-align: top; text-align: left;">
                                                        <td class="text-center" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; font-size: 14px; mso-line-height-rule: exactly; line-height: 140%; text-align: center; color: #777777;">
                                                            <h6 style="padding: 0; word-wrap: normal; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; mso-line-height-rule: exactly; line-height: 130%; font-size: 16px; color: #444444; text-align: inherit; margin: 0 0 20px 0;"></h6>
                                                        </td>
                                                    </tr>
                                                    <tr style="padding: 0; vertical-align: top; text-align: left;">
                                                        <td class="text-center" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; font-size: 14px; mso-line-height-rule: exactly; line-height: 140%; text-align: center; color: #777777;">
															                                                        </td>
                                                    </tr>
                                                    </tbody></table>
                                            </td>
                                        </tr>
                                        <tr style="padding: 0; vertical-align: top; text-align: left;">
                                            <td class="summary-info-content button-container" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; margin: 0; Margin: 0; text-align: left; font-size: 14px; mso-line-height-rule: exactly; line-height: 140%; color: #777777; padding: 0 30px 30px 30px;">
                                                <center style="width: 100%;">
                                                    <table class="button rounded-button" style="border-collapse: collapse; border-spacing: 0; padding: 0; vertical-align: top; text-align: left; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: auto; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; overflow: hidden;margin: auto;Margin: auto;"><tbody><tr style="padding: 0; vertical-align: top; text-align: left;">
                                                            <td style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; text-align: left; font-size: 14px; mso-line-height-rule: exactly; line-height: 100%; color: #777777;">
                                                                <table style="border-collapse: collapse; border-spacing: 0; padding: 0; vertical-align: top; text-align: left; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><tbody><tr style="padding: 0; vertical-align: top; text-align: left;">
                                                                        <td style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; font-size: 14px; text-align: center; color: #ffffff; background: rgb(227, 71, 22); border: 1px solid #c45e1b; border-bottom: 3px solid #c45e1b; mso-line-height-rule: exactly; line-height: 100%;">
                                                                            <a href="" rel="noopener" target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; Margin: 0; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; text-align: center; display: inline-block; border: 0 solid #c45e1b; mso-line-height-rule: exactly; line-height: 100%; padding: 17px 30px 15px 30px;">
																				Learn More                                                                            </a>
                                                                        </td>
                                                                    </tr></tbody></table>
                                                            </td>
                                                        </tr></tbody></table>
                                                </center>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr></tbody></table>
                    </td>
                </tr>
                <tr style="padding:0px;vertical-align:top;text-align:left">
                    <td align="center" valign="top" style="vertical-align:top;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;margin:0px;line-height:140%;padding:30px;color:rgb(114,119,124);font-size:12px;text-align:center;border-collapse:collapse">
						This is a courtesy email sent from the Smash Balloon Instagram Feed plugin on your website to alert you when there is an issue with one of your Instagram feeds.                    </td>
                </tr>
                <tr style="padding:0px;vertical-align:top;text-align:left">
                    <td align="center" valign="top" style="vertical-align:top;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:normal;margin:0px;line-height:140%;padding:30px;color:rgb(114,119,124);font-size:12px;text-align:center;border-collapse:collapse">
						Sent from <a href="https://metapolkozmetik.com">Metapol Kozmetik</a>                        <span>&#8226;</span>
						<a href="">Log in and disable these emails</a>                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr></tbody></table>
</body>
</html>