<template>
    <div>
        <button class="spinBtn">Faites Tourner!</button>
        <div class="wheelContainer">
            <svg class="wheelSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" text-rendering="optimizeSpeed">
                <defs>
                    <filter id="shadow" x="-100%" y="-100%" width="550%" height="550%">
                        <feOffset in="SourceAlpha" dx="0" dy="0" result="offsetOut"></feOffset>
                        <feGaussianBlur stdDeviation="9" in="offsetOut" result="drop" />
                        <feColorMatrix in="drop" result="color-out" type="matrix" values="0 0 0 0   0
                  0 0 0 0   0 
                  0 0 0 0   0 
                  0 0 0 .3 0" />
                        <feBlend in="SourceGraphic" in2="color-out" mode="normal" />
                    </filter>
                </defs>
                <g class="mainContainer">
                    <g class="wheel">
                        <!-- <image  xlink:href="http://example.com/images/wheel_graphic.png" x="0%" y="0%" height="100%" width="100%"></image> -->
                    </g>
                </g>
                <g class="centerCircle" />
                <g class="wheelOutline" />
                <g class="pegContainer" opacity="1">
                    <path class="peg" fill="#EEEEEE" d="M22.139,0C5.623,0-1.523,15.572,0.269,27.037c3.392,21.707,21.87,42.232,21.87,42.232 s18.478-20.525,21.87-42.232C45.801,15.572,38.623,0,22.139,0z" />
                </g>
                <g class="valueContainer" />
            </svg>
           <div class="toast">
                <p class="spinBtn" />
            </div> 
        </div>
    </div>
</template>

<script>

    import TweenMax from "gsap/TweenMax";
    import Draggable from "gsap/Draggable";
    import TextPlugin from "gsap/TextPlugin";
    var vm = null
    export default {
        data(){
            return {
                images:[],
                intitules:[],
            }
        },
        mounted: function(){
            this.init()
            vm = this
            $('body').addClass('sucess-bg');
        },
        methods:{

            myResult:function(e) {
                //e is the result object
                var vm = this
                console.log('Spin Count: ' + e.spinCount + ' - ' + 'Win: ' + e.win + ' - ' + 'Message: ' +  e.msg);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                
                $.get('api/Spin2Win/?api_token='+vm.$parent.api_token, {
                        'spinCount':e.spinCount,
                        'win':e.win,
                        'reward':e.userData,
                    }, function(data, textStatus, xhr) {
                    vm.$parent.gamePlayed("success", data,vm.images[e.userData], vm.intitules[e.userData]);
                })
                // $.ajax({
                //     url:'api/Spin2Win/?api_token='+vm.$parent.api_token,
                //     type:'post',
                //     data:{
                //         'spinCount':e.spinCount,
                //         'win':e.win,
                //         'reward':e.userData,
                //     },
                // })
                // .done(function(data) {
                //     console.log("success");
                //     console.log(data);
                //     vm.$parent.gamePlayed("success", data,vm.images[e.userData], vm.intitules[e.userData]);
                // })
                .fail(function(data) {
                    console.log("error");
                    console.log(data);
                    vm.$parent.gamePlayed("error", data,null);
                })
                .always(function() {
                    console.log("complete");
                });
                
                //if(e.spinCount == 3){
                //show the game progress when the spinCount is 3
                //console.log(e.target.getGameProgress());
                //restart it if you like
                //e.target.restart();
                //}  

            },

            //your own function to capture any errors
            myError:function(e) {
                //e is error object
                console.log('Spin Count: ' + e.spinCount + ' - ' + 'Message: ' +  e.msg);

            },
            myGameEnd:function(e) {
                //e is gameResultsArray
                console.log(e);
                TweenMax.delayedCall(5, function(){
                    /*location.reload();*/
                })


            },
            init:function() {
                var vm = this
                // $.get('./wheel_data.json', function(response){
                $.get('api/wheelData/?api_token='+vm.$parent.api_token, function(response){
                // Parse JSON string to an object
                var jsonData = response;

                $.each(response.segmentValuesArray, function(index, reward) {
                    
                    vm.images[reward.userData] = reward.image
                    vm.intitules[reward.userData] = reward.resultText

                });
                //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
                var mySpinBtn = document.querySelector('.spinBtn');
                //create a new instance of Spin2Win Wheel and pass in the vars object
                var myWheel = new Spin2WinWheel();

                //WITH your own button
                myWheel.init({data:jsonData,
                             onResult:vm.myResult,
                             onGameEnd:vm.myGameEnd,
                             onError:vm.myError,
                             spinTrigger:mySpinBtn
                         });

                //WITHOUT your own button
                //myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError);
                });
            }

        },

        
    }
</script>

<style>
    .peg, .wheelSVG {
     visibility: hidden;
    }
    .wheelContainer, body, html {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
    }
    .centerCircle, .valueContainer, .wheelOutline, .wheelText {
     pointer-events: none;
    }
    .toast, .wheelContainer, body, html {
     text-align: center;
    }
    .wheelContainer, button {
        transform: translate(-50%, 0);
    }
    .toast, button {
     position: absolute;
     background-color: #E81D62;
    }
   /* body {
     background-color: #2d2d2d;
     overflow: hidden;
    }
    body, html {
     margin: 0;
     padding: 0;
    }*/
    .wheelContainer {
     position: absolute;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     left: 50%;
     top: 100px;
    }
    .wheelSVG {
     position: absolute;
     overflow: visible;
     width: 100%;
     height: auto; 
    }
    .wheelText {
     text-anchor: middle;
     font-family: 'Fjalla One', Arial, sans-serif;
     -webkit-user-select: none;
     user-select: none;
    }
    .toast {
     border-radius: 12px;
     opacity: 0;
    }
    .toast p {
        clear: both;
        font-family: 'Fjalla One', Arial, sand-serif;
        margin: 23px;
        font-size: 30px;
        color: #ededed;
        letter-spacing: 0;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        line-height: 32px;
        -webkit-transition: line-height .2s ease;
        transition: line-height .2s ease;
    }
    button {
        left:50%;
        width: 80%;
        top: 20px;
        max-width: 400px;
        padding: 20px;
        font-weight: 700;
        font-size: 24px;
        color: #ededed;
        border-radius: 6px;
        border: none;
        box-shadow: 0 2px 0 #D71559;
        cursor: pointer;
        font-family: "Fjalla One", Helvetica, Arial, sans-serif;
    }

    @media only screen and (max-width: 360px) {
        button {
            top: 45px !important;
            font-size:20px;
        }
    }
    @media only screen and (max-width: 480px) {
        .toast p, .toast span {
            font-size: 18px;
            line-height: 18px;
        }
        button {
            top: 40px;
            padding: 10px;
            /*width: 63%;*/
        }
    }
    @media only screen and (min-width: 481px) and (max-width: 800px) {
        .toast p, .toast span {
            font-size: 38px;
            line-height: 38px;
        }
    }
    @media only screen and (min-width: 801px) {
     .toast p, .toast span {
      font-size: 24px;
      line-height: 45px;
     }
    }
    @media only screen and (max-height: 480px) {
     .toast p, .toast span {
      font-size: 33px;
      line-height: 35px;
     }
     button {
      font-size: 22px;
      padding: 10px;
      width: 40%;
     }
     .wheelContainer {
      top: 70px;
     }
    }
    button:focus {
     outline: 0;
    }

</style>
