export default {
    data() {
        return {
            prizes: [],
            spinning: false,
            offset: 0,
            wheelStyle: {},
        };
    },
    methods: {
        fetchPrizes() {
            axios.get('/RewardList').then((response) => {
                const originalPrizes = response.data;
                const repetitions = 10;
                const duplicatedPrizes = [];

                for (let i = 0; i < repetitions; i++) {
                    duplicatedPrizes.push(...originalPrizes);
                }
                this.prizes = duplicatedPrizes;
            });
        },
        async fetchDailySpinPrize() {
            try {
                const response = await axios.get('/Daily-spin');
                const { Pavadinimas } = response.data.prize;

                console.log('Pavadinimas:', Pavadinimas);
                const selectedPrize = this.prizes.find((prize) => prize.Pavadinimas === Pavadinimas);

                if (selectedPrize) {
                    const selectedIndex = this.prizes.indexOf(selectedPrize);

                    const numPrizes = this.prizes.length;
                    const angle = (selectedIndex * 360) / numPrizes;
                    const cardWidth = 100;
                    const wheelWidth = cardWidth * numPrizes;
                    const landingPosition = (cardWidth / 2) - (angle * (wheelWidth / 360));

                    this.spinToPosition(landingPosition);
                }
            } catch (error) {
                console.error('Error fetching daily spin prize:', error);
            }
        },
        spinToPosition(landingPosition) {
            this.spinning = true;

            const object = {
                x: Math.random() * 0.5,
                y: Math.random() * 0.2,
            };

            this.wheelStyle = {
                'transition-timing-function': `cubic-bezier(0, ${object.x}, ${object.y}, 1)`,
                'transition-duration': '6s',
                'transform': `translate3d(-${landingPosition}px, 0px, 0px)`,
            };

            console.log('Landing Position:', landingPosition);

            setTimeout(() => {
                this.spinning = false;

                this.wheelStyle = {
                    'transition-timing-function': '',
                    'transition-duration': '',
                    'transform': `translate3d(0px, 0px, 0px)`,
                };
            }, 6000);
        }
    },
    mounted() {
        this.fetchPrizes();
    },
}