<template>
    <div class="ballsContainer">
        <Ball v-for="(ball, index) in balls" @click.native="chooseBalls(index + 1)" :key="'ball_'+index" :number="index+1"
            :gameName="gameName" :class="{drawnBallMark: markSequence(drawnBalls, index + 1)
            && !checkInvoker('MyBonus'),
            ballMyBonus: checkInvoker('MyBonus'),
            ballHitsPanel: !checkInvoker('MyBonus'),
            chooseMyBonus: markSequence(myBonusFiller, index + 1) && checkInvoker('MyBonus'),
            chooseHitsPanel: markSequence(myBonusBalls, index + 1) && !checkInvoker('MyBonus'),
            }" />
    </div>
</template>
<script>
    import Ball from "CommonElements/Ball";

    import {
        mapState,
        mapActions
    } from "vuex";

    import {
        ACTION_SET_OPEN_PANEL,
        ACTION_SHOW_DIMMED_BACKGROUND,
        ACTION_SET_MY_BONUS
    } from "Store/types";


    export default {
        name: 'BallsContainer',
        components: {
            Ball
        },
        props: {
            place: {
                type: String,
                default: 'MyBonus'
            }
        },
        data() {
            return {
                balls: Array(90).fill(0),
                gameName: "bingo",
                myBonusFiller: []
            }
        },
        methods: {
            ...mapActions({
                setOpenPanel: ACTION_SET_OPEN_PANEL,
                showDimmedBackground: ACTION_SHOW_DIMMED_BACKGROUND,
                setMyBonus: ACTION_SET_MY_BONUS
            }),

            checkInvoker(place) {
                return this.place == place;
            },

            markSequence(ballsArray, ball) {
                return typeof ballsArray.filter(e => e === ball)[0] === 'number';
            },

            markChoosen(index) {
                return this.myBonusFiller.map(e => e === index);
            },

            chooseBalls(ball) {
                if (this.myBonusFiller.length <= 3) {
                    if (this.myBonusFiller[this.myBonusFiller.length - 1] === ball) return this.myBonusFiller.pop();

                    this.myBonusFiller.push(ball);
                    this.markChoosen(ball - 1);
                }

                if (this.myBonusFiller.length === 3) {
                    this.setMyBonus(this.myBonusFiller);
                    this.sendMyBonusBalls();
                    this.showDimmedBackground(false);
                    return this.setOpenPanel("tickets");
                }
            },

            sendMyBonusBalls() {
                const requestObject = {
                    to: this.gameType,
                    mybonus_set: this.myBonusBalls,
                    gn: this.gameNumber
                };

                this.socket.send(JSON.stringify(requestObject));
            }
        },
        computed: {
            ...mapState({
                socket: state => state.staticData.socket,
                gameType: state => state.staticData.gameNumber,
                gameNumber: state => state.dynamicCommonData.gameNumber,
                showDimmed: state => state.dynamicCommonData.showDimmed,
                drawnBalls: state => state.dynamicCommonData.balls,
                myBonusBalls: state => state.dynamicCustomData.myBonus
            }),
        },
        watch: {
            showDimmed() {
                if (this.showDimmed) this.myBonusFiller = []; //if closed reset
            }
        },
    }
</script>


<style lang="scss">
    .drawnBallMark {
        opacity: 1 !important;
    }

    .chooseMyBonus,
    .chooseHitsPanel {
        background: skyblue;
    }

    .ballsContainer {
        @include setImprovedFlex($wrap: wrap);
        @include dimensions(93%, 98%);

        .ballMyBonus {
            @include dimensions(8%, 9%);
            font-size: 0.7em;
            cursor: pointer;
        }

        .ballHitsPanel {
            @include dimensions(8%, 9%);
            font-size: 0.7em;
            cursor: pointer;
            opacity: 0.5;
            pointer-events: none;
        }

        .ballText {
            transform: translate(45%, 50%) rotate(10deg);
        }
    }
</style>