<!--https://surveyjs.io/Survey/Builder/-->
<!--https://surveyjs.io/Survey/Builder/-->
<template>
    <div>
        <div id="surveyElement" class="app-content" style="text-align: left;">
            <survey :survey='survey'/>
        </div>
        <div v-if="showResults" id="surveyResult" style="text-align: left;margin-top:3rem;">
		<h4>Wynik badania: {{form_result}}</h4>
		<h4>Komentarz:  </h4>
		<p>{{form_result_description}}</p>
		<form style="display:none" id="simpleForm" action="/results.php" method="POST">
		<input type="hidden" :value="email" name="email"/>
		<input type="hidden" :value="form_result" name="form_result"/>
		<input type="hidden" :value="form_result_description" name="form_result_description"/>
		<input type="hidden" :value="showForm" name="showForm"/> 
		
		  <button   v-if="showForm" class="g-recaptcha" data-sitekey="6LdQ03IUAAAAADlDxIgX1irVcTfh0IaVjnTVJamT"  data-callback="onSubmit">Wyślij email z wynikiem</button>
		</form>

		</div>
 

 
    </div>
</template>
<script>
//https://product.hubspot.com/blog/quick-guide-invisible-recaptcha
//    import * as SurveyVue from  'survey-vue'
    import * as SurveyVue from 'survey-vue'
        import FormService from '../dao/FormService.js'
        import Localization from '../dao/Localization.js'
        import R from '../static/R.js'
        import FirebaseAPI from '../dao/FirebaseAPI.js'
   
        var Survey = SurveyVue.Survey
    Survey.cssType = "bootstrap";
    export default {
        name: 'FormView',
        components: {
            Survey
        }, watch: {
            $route(to, from) {
			
				var  model = this.reset();

                this.survey = model
                this.form_result = ''
                this.form_result_description = ''
                this.showResults = ''
				document.getElementById("simpleForm").style.display = 'none';
                this.showForm = false;
                this.email = '';
				

            }


        } ,
        methods: {
            setResult: function (sum,email,formId) {  
                var response = FormService.getResult(sum,formId);
				
                //this.form_result = Localization.translate(R.stringId.form_result) + response['label']
                this.form_result =   response['label']
                this.form_result_description =   response['description']
				this.showResults = true
                //this.formstyle = {display:'block'}
				this.email=email  
				if(email ===undefined || email==''){
				document.getElementById("simpleForm").style.display = 'none';
				this.showForm = false;
				}
				else{
				this.showForm = true;
				document.getElementById("simpleForm").style.display = 'block'; 
				
				}
//                this.$nextTick(function () {
//                    
//                })
            },
				reset:function(){
			var formId = this.$route.params.form_name;
 
            var _this = this
            var fun = function (sum,email,formId) {
                _this.setResult(sum,email,formId)
            }
            var json = FormService.getForm(formId);
            var model = new SurveyVue.Model(json); 
			 
            model.onComplete
                .add(function (result) {     
                    var sum = 0;
                    for (var key in result.data) {
                        if (key.startsWith('q')) {
                            var value = result.data[key];
                            sum += parseInt(value);
                        }
                    }					
					_this.email = result.data['Email'];  
					var date = new Date();
					result.timestamp = date.getTime(); 
					var key = FirebaseAPI.uid+"_"+date.getFullYear() + "_"+date.getMonth()+"_"+date.getDate();
					if(result.data['RegisterData'] == '1'){
						result.data['Email'] = 'sent';
						 FirebaseAPI.write(result.data,key);		
					}
                   			 
                    fun(sum,_this.email,formId); 
                });
				return model;
				}
        },
	
		 
        data() {
		
           var model = this.reset();
            return {
				formId:  this.$route.params.form_name,
                survey: model,
                form_result: '',
                showResults: false,
                form_result_description: '',
                showForm: false, 
				email:''
				
            }
        }

    }
</script> 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#surveyResult{ margin:auto;max-width:900px;font-size:1.2rem}
</style>
