import Vue from 'vue';

const $ = require("jquery");
const jQuery = $;
window.jQuery = window.$ = jQuery;
// require('@fancyapps/fancybox');
// require('owl.carousel');
// import 'owl.carousel';
// const Vue = require("vue");



$(document).ready(function () {
    checkBodyClass();
});

function checkBodyClass() {
    if (!$('body').hasClass('online-test-body')) $('body').addClass('online-test-body');
}

const myTestOnline = new Vue({
    el: '#myTestOnline',
    data: {
        window: 1,
        // step: 4,
        // active_question: 25,
        step: 1,
        active_question: 1,
        questions_step_count: 4,
        questions: [],

        user_answers: {},
        results: [
            // { title: 'as', icon: '', percent: 74, bal: 5, text: 'asqwe', show: false, },
        ],
        starts: [5, 4, 3, 2, 1],
        form_data: {
            star: null,
            comment: '',
        },
        form_data_send: false,
        form_comment_plac: 'Оставьте комментарий',
        result_loading: false,
        // img_path: 'http://online-test-5/icons/',
        // url_questions: 'http://online-test-5/?action=questions',
        // url_result: 'http://online-test-5/',
        img_path: 'img/',
        url_questions: 'app.php/?action=questions',
        url_result: 'app.php',
    },
    mounted() {
        this.getQuestions();
        // console.log(this.resultList);

        // console.log(w);
    },
    methods: {
        getQuestions() {
            fetch(this.url_questions)
                .then(response => response.json())
                .then(questions => {
                    // console.log(questions);
                    for (let i in questions) this.user_answers[+i + 1] = 0;
                    for (let i = 0; i < this.questions_step_count; i++) {
                        this.questions.push(questions.splice(0, 6));
                    }
                    // this.questions = questions;

                    console.log(this.questions);
                    // console.log(this.user_answers);
                });
        },
        prevWindow() {
            this.window--;
            $('html, body').animate({
                scrollTop: 0,
            }, 500);
        },
        nextWindow() {
            if (this.window === 2) {
                this.getResult();
                return;
            }
            else {
                this.window++;
            }
            // console.log(this.window);
            $('html, body').animate({
                scrollTop: 0,
            }, 500);
        },
        selectAnswer(question, disabled) {
            if (!disabled && this.active_question === question) this.active_question = ++question;
            let doc_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            let doc_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            let scroll = doc_w < 991;
            let scroll_center = !scroll;
            setTimeout(() => {
                if (this.active_question === 7 || this.active_question === 13 || this.active_question === 19 || this.active_question === 25) {
                    scroll_center = false;
                    scroll = false;
                }
                if (scroll) {
                    let top = $("#questionItem" + (this.active_question)).offset().top;
                    $('html, body').animate({
                        scrollTop: top - 30,
                    }, 500);
                }
                else if (scroll_center) {
                    let box = $("#questionItem" + (this.active_question));
                    let box_h = $(box).height();
                    let box_t = $(box).offset().top;
                    // let top = box_t - (doc_h / 2) - (box_h / 2) || 0;
                    let top = box_t - (doc_h / 2) + (box_h / 2) + 25;
                    $('html, body').animate({
                        scrollTop: top,
                    }, 500);
                }
            }, 100);
        },
        nextStep() {
            // console.log(this.step, this.active_question)
            // this.active_question - 4 === this.step ? this.step++ : this.step === this.questions_step_count ? this.nextWindow() : '';
            if (this.step === 1 && (this.active_question >= 6)) {
                this.step++;
            } else if (this.step === 2 && (this.active_question >= 12)) {
                this.step++;
            } else if (this.step === 3 && (this.active_question >= 18)) {
                this.step++;
            }
            // else if (this.step === 4 && (this.active_question >= 25)) {
            //     this.step++;
            // }
            // else if (this.step === 5 && (this.active_question >= 21)) {
            //     this.step++;
            // }
            else if (this.step === this.questions_step_count) {
                this.nextWindow();
                return;
            }
            // console.log(this.step);
            let top = this.step < this.questions_step_count ? $("#questionItem" + this.active_question).offset().top : 30;
            $('html, body').animate({
                scrollTop: top - 30,
            }, 500);
        },
        prevStep() {
            this.step--;
        },
        prevItem() {
            this.step === 1 ? this.prevWindow() : this.prevStep();
        },
        getResult() {
            let data = {
                action: 'results',
                data: this.user_answers,
            };
            this.result_loading = true;
            $.post(this.url_result, data, (response) => {
                console.log(response);
                this.results = response;
                setTimeout(() => {
                    this.result_loading = false;
                    this.window++;
                    $('html, body').animate({ scrollTop: 0, }, 500);
                }, 300);
            }, 'json');
        },
        toggleResult(result) {
            for (let res of this.results) if (res != result) res.show = false;
            result.show = !result.show;
        },
        resultInfoBoxHeight(elemId) {
            setTimeout(() => {
                let box = document.getElementById(elemId);
                // console.log(box);
                box.style.height = box.scrollHeight + 'px';
            }, 100);
            return {};
        },
        sendReview() {
            let data = {
                action: 'review',
                data: this.form_data,
            };
            $.post(this.url_result, data, (response) => {
                console.log(response);
                this.form_data.comment = "";
                this.form_data.star = null;
                this.form_data_send = true;
                this.form_comment_plac = 'Ваш отзыв отправлен, спасибо!';
            }, 'json');
        },
    },
    computed: {
        questionsStepPercent() {
            return Math.round(100 / this.questions_step_count * (this.step - 1));
        },
        questionsStepProgressStyle() {
            return {
                width: `${this.questionsStepPercent}%`,
            };
        },
        resultList() {
            let arr = Array.from(this.results);
            return arr.sort((a, b) => a.bal - b.bal).reverse();
        },

        resultPautinSvg() {
            return [
                ['M229.611 3.05444L101.449 3.05444L165.53 165.034L229.611 3.05444Z', 'M224.805 16.2826L106.255 16.2826L165.53 164.764L224.805 16.2826Z', 'M219.465 29.7809L111.595 29.7809L165.53 164.764L219.465 29.7809Z', 'M213.591 43.2792L117.469 43.2792L165.53 164.764L213.591 43.2792Z', 'M208.251 56.7776L122.809 56.7776L165.53 164.764L208.251 56.7776Z', 'M202.91 70.2756L128.149 70.2756L165.53 164.764L202.91 70.2756Z', 'M197.57 83.774L133.489 83.774L165.53 164.764L197.57 83.774Z', 'M192.23 97.2723L138.83 97.2723L165.53 164.764L192.23 97.2723Z', 'M186.89 110.771L144.17 110.771L165.53 164.764L186.89 110.771Z', 'M181.55 124.269L149.51 124.269L165.53 164.764L181.55 124.269Z', 'M176.21 137.767H154.85L165.53 164.764L176.21 137.767Z', 'M170.87 151.265H160.19L165.53 164.764L170.87 151.265Z'],
                ['M322.912 93.5235L230.72 3.50732L165.53 165.034L322.912 93.5235Z', 'M310.366 99.6637L225.089 16.3987L165.715 164.839L310.366 99.6637Z', 'M297.251 105.623L219.656 29.8591L165.715 164.839L297.251 105.623Z', 'M283.752 111.207L214.608 43.6947L165.715 164.839L283.752 111.207Z', 'M270.637 117.166L209.175 57.1553L165.715 164.839L270.637 117.166Z', 'M257.522 123.125L203.743 70.6157L165.715 164.839L257.522 123.125Z', 'M244.406 129.084L198.31 84.0762L165.715 164.839L244.406 129.084Z', 'M231.291 135.043L192.878 97.5367L165.715 164.839L231.291 135.043Z', 'M218.176 141.003L187.445 110.997L165.715 164.839L218.176 141.003Z', 'M205.061 146.962L182.013 124.458L165.715 164.839L205.061 146.962Z', 'M191.946 152.921L176.58 137.918L165.715 164.839L191.946 152.921Z', 'M178.831 158.88L171.148 151.379L165.715 164.839L178.831 158.88Z'],
                ['M327.871 224.133L323.398 94.6284L165.53 165.034L327.871 224.133Z', 'M314.628 219.738L310.491 99.9465L165.797 165.024L314.628 219.738Z', 'M301.1 214.813L297.335 105.814L165.797 165.024L301.1 214.813Z', 'M287.553 209.349L284.198 112.22L165.797 165.024L287.553 209.349Z', 'M274.024 204.424L271.042 118.088L165.797 165.024L274.024 204.424Z', 'M260.496 199.499L257.887 123.955L165.797 165.024L260.496 199.499Z', 'M246.967 194.574L244.731 129.822L165.797 165.024L246.967 194.574Z', 'M233.439 189.649L231.575 135.689L165.797 165.024L233.439 189.649Z', 'M219.911 184.724L218.42 141.556L165.797 165.024L219.911 184.724Z', 'M206.382 179.799L205.264 147.423L165.797 165.024L206.382 179.799Z', 'M192.854 174.874L192.108 153.29L165.797 165.024L192.854 174.874Z', 'M179.325 169.949L178.953 159.157L165.797 165.024L179.325 169.949Z'],
                ['M229.862 326.899L328.03 224.115L165.661 164.896L229.862 326.899Z', 'M224.292 314.012L315.097 218.937L165.85 165.081L224.292 314.012Z', 'M218.942 300.511L301.566 214.002L165.85 165.08L218.942 300.511Z', 'M214.001 286.583L287.627 209.495L165.85 165.08L214.001 286.583Z', 'M208.65 273.083L274.096 204.56L165.85 165.081L208.65 273.083Z', 'M203.3 259.582L260.565 199.625L165.85 165.081L203.3 259.582Z', 'M197.95 246.082L247.034 194.69L165.85 165.081L197.95 246.082Z', 'M192.6 232.582L233.504 189.755L165.85 165.08L192.6 232.582Z', 'M187.25 219.081L219.973 184.82L165.85 165.08L187.25 219.081Z', 'M181.9 205.581L206.442 179.885L165.85 165.08L181.9 205.581Z', 'M176.55 192.081L192.912 174.95L165.85 165.08L176.55 192.081Z', 'M171.2 178.581L179.381 170.016L165.85 165.081L171.2 178.581Z'],
                ['M101.449 327.013H229.611L165.53 165.034L101.449 327.013Z', 'M106.255 313.785H224.805L165.53 165.304L106.255 313.785Z', 'M111.595 300.286H219.465L165.53 165.304L111.595 300.286Z', 'M117.469 286.788H213.591L165.53 165.304L117.469 286.788Z', 'M122.809 273.29H208.251L165.53 165.304L122.809 273.29Z', 'M128.149 259.792H202.911L165.53 165.304L128.149 259.792Z', 'M133.49 246.293H197.57L165.53 165.304L133.49 246.293Z', 'M138.83 232.795H192.23L165.53 165.304L138.83 232.795Z', 'M144.17 219.297H186.89L165.53 165.304L144.17 219.297Z', 'M149.51 205.798H181.55L165.53 165.304L149.51 205.798Z', 'M154.85 192.3H176.21L165.53 165.304L154.85 192.3Z', 'M160.19 178.802H170.87L165.53 165.304L160.19 178.802Z'],
                ['M8.14818 236.544L100.34 326.56L165.53 165.034L8.14818 236.544Z', 'M20.6938 230.403L105.971 313.668L165.345 165.228L20.6938 230.403Z', 'M33.8089 224.444L111.404 300.208L165.345 165.228L33.8089 224.444Z', 'M47.3082 218.86L116.452 286.372L165.345 165.228L47.3082 218.86Z', 'M60.4233 212.901L121.885 272.912L165.345 165.228L60.4233 212.901Z', 'M73.5385 206.942L127.317 259.451L165.345 165.228L73.5385 206.942Z', 'M86.6536 200.983L132.75 245.991L165.345 165.228L86.6536 200.983Z', 'M99.7688 195.024L138.182 232.53L165.345 165.228L99.7688 195.024Z', 'M112.884 189.064L143.615 219.07L165.345 165.228L112.884 189.064Z', 'M125.999 183.105L149.047 205.609L165.345 165.228L125.999 183.105Z', 'M139.114 177.146L154.48 192.149L165.345 165.228L139.114 177.146Z', 'M152.229 171.187L159.912 178.688L165.345 165.228L152.229 171.187Z'],
                ['M3.18888 105.934L7.66166 235.439L165.53 165.034L3.18888 105.934Z', 'M16.4318 110.329L20.5691 230.121L165.263 165.043L16.4318 110.329Z', 'M29.9602 115.254L33.7248 224.254L165.263 165.043L29.9602 115.254Z', 'M43.5073 120.719L46.8619 217.847L165.263 165.043L43.5073 120.719Z', 'M57.0357 125.644L60.0176 211.98L165.263 165.043L57.0357 125.644Z', 'M70.5641 130.569L73.1733 206.113L165.263 165.043L70.5641 130.569Z', 'M84.0926 135.494L86.329 200.246L165.263 165.043L84.0926 135.494Z', 'M97.621 140.418L99.4846 194.379L165.263 165.043L97.621 140.418Z', 'M111.149 145.343L112.64 188.512L165.263 165.043L111.149 145.343Z', 'M124.678 150.268L125.796 182.644L165.263 165.043L124.678 150.268Z', 'M138.206 155.193L138.952 176.777L165.263 165.043L138.206 155.193Z', 'M151.735 160.118L152.107 170.91L165.263 165.043L151.735 160.118Z'],
                ['M101.517 3.05637L2.99997 106.205L165.433 165.135L101.517 3.05637Z', 'M107.065 15.9489L15.937 111.361L165.245 164.951L107.065 15.9489Z', 'M112.391 29.4556L29.4731 116.272L165.245 164.951L112.391 29.4556Z', 'M117.307 43.3921L43.4197 120.753L165.245 164.951L117.307 43.3921Z', 'M122.633 56.8985L56.9558 125.664L165.245 164.951L122.633 56.8985Z', 'M127.96 70.4048L70.4919 130.575L165.245 164.95L127.96 70.4048Z', 'M133.286 83.9114L84.028 135.486L165.245 164.951L133.286 83.9114Z', 'M138.613 97.418L97.5641 140.396L165.245 164.951L138.613 97.418Z', 'M143.939 110.925L111.1 145.307L165.245 164.951L143.939 110.925Z', 'M149.265 124.431L124.636 150.218L165.245 164.951L149.265 124.431Z', 'M154.592 137.937L138.172 155.129L165.245 164.951L154.592 137.937Z', 'M159.918 151.444L151.709 160.04L165.245 164.951L159.918 151.444Z'],
            ];
        },
    },
})