(function ($) {
    'use strict';
    if (typeof wlwl_shortcode_params === "undefined"){
        return;
    }
    let window_size,is_mobile;
    $(window).on('resize.wc-lucky-wheel-shortcode-container', function () {
        let new_size = $('body').width();
        if (!window_size){
            window_size = new_size;
        }
        if (window_size == new_size) {
            return;
        }
        window_size = new_size;
        $(document).trigger('wlwl-render-shortcode');
    });
    $(window).on('load',function () {
        wlwlShortcodeReCaptchaOnload();
    });
    $(document).on('keyup','.wc-lucky-wheel-shortcode-wheel-field', function (e){
        if (e.keyCode === 13) {
            $(this).closest('.wc-lucky-wheel-shortcode-container').find('.wc-lucky-wheel-shortcode-wheel-button').trigger('click');
        }
    });
    $(document).on('click','.wc-lucky-wheel-shortcode-wheel-button-wrap:not(.wc-lucky-wheel-shortcode-loading)', function (){
        let $button = $(this);
        let $container = $(this).closest('.wc-lucky-wheel-shortcode-container');
        if (!$container.length){
            return;
        }
        let shortcode_args = $container.data('shortcode_args'),
            $email_container = $container.find('.wc-lucky-wheel-shortcode-wheel-field-email-wrap');
        $container.find('.wc-lucky-wheel-shortcode-error-field').removeClass('wc-lucky-wheel-shortcode-error-field');
        $container.find('.wc-lucky-wheel-shortcode-required-field').removeClass('wc-lucky-wheel-shortcode-required-field');
        if ($container.find('.wlwl-gdpr-checkbox-input').length && !$container.find('.wlwl-gdpr-checkbox-input').prop('checked')){
            $email_container.addClass('wc-lucky-wheel-shortcode-error-field');
            $email_container.find('.wc-lucky-wheel-shortcode-wheel-field-error').html(wlwl_shortcode_params.gdpr_warning);
            return;
        }
        let focus_field, $email = $container.find('.wc-lucky-wheel-shortcode-wheel-field-email'),
            $name = $container.find('.wc-lucky-wheel-shortcode-wheel-field-name'),
            $mobile = $container.find('.wc-lucky-wheel-shortcode-wheel-field-mobile');
        let wlwl_email = $email.val();
        let wlwl_name = $name.val();
        let wlwl_mobile = formatPhoneNumber( $mobile.val() || '' );
        let g_validate_response = $container.find('.wlwl-shortcode-g-validate-response').val() || '';
        let qualified = true;
        if (wlwl_shortcode_params?.wlwl_recaptcha && wlwl_shortcode_params?.wlwl_recaptcha_site_key && !g_validate_response) {
            $container.find('.wlwl-shortcode-recaptcha > div').addClass('wc-lucky-wheel-shortcode-required-field').focus();
            $container.find('#wlwl_warring_shortcode_recaptcha').html(wlwl_shortcode_params.wlwl_warring_recaptcha);
            qualified = false;
        } else if (wlwl_shortcode_params.wlwl_recaptcha && wlwl_shortcode_params.wlwl_recaptcha_site_key) {
            $container.find('.wlwl-shortcode-recaptcha > div').removeClass('wc-lucky-wheel-shortcode-required-field');
            qualified = true;
        }

        if (!wlwl_name && shortcode_args.custom_field_name_enable && shortcode_args.custom_field_name_enable !== 'off' &&
            (!is_mobile || (shortcode_args.custom_field_name_enable_mobile && shortcode_args.custom_field_name_enable_mobile !== 'off')) &&
            (shortcode_args.custom_field_name_required && shortcode_args.custom_field_name_required !== 'off')) {
            $name.parent().addClass('wc-lucky-wheel-shortcode-error-field');
            $name.parent().find('.wc-lucky-wheel-shortcode-wheel-field-error').html(wlwl_shortcode_params.custom_field_name_message);
            qualified = false;
            focus_field = $name;
        }
        if (shortcode_args.custom_field_mobile_enable && shortcode_args.custom_field_mobile_enable !== 'off' &&
            (!is_mobile ||(shortcode_args.custom_field_mobile_enable_mobile && shortcode_args.custom_field_mobile_enable_mobile !== 'off'))) {
            if ( shortcode_args.custom_field_mobile_required && shortcode_args.custom_field_mobile_required !== 'off' && !wlwl_mobile ) {
                $mobile.parent().addClass('wc-lucky-wheel-shortcode-error-field');
                $mobile.parent().find('.wc-lucky-wheel-shortcode-wheel-field-error').html(wlwl_shortcode_params.custom_field_mobile_message);
                qualified = false;
            }

            if ( wlwl_mobile && ! isValidPhone( wlwl_mobile ) ) {
                $mobile.parent().addClass('wc-lucky-wheel-shortcode-error-field');
                $mobile.parent().find('.wc-lucky-wheel-shortcode-wheel-field-error').html(wlwl_shortcode_params.custom_field_mobile_warning);
                qualified = false;
                focus_field = $mobile;
            }
        }
        let email_error = '';
        if (!wlwl_email) {
            email_error = wlwl_shortcode_params.empty_email_warning;
        }else if (! isValidEmailAddress(wlwl_email) ){
            email_error = wlwl_shortcode_params.invalid_email_warning;
        }
        if (email_error){
            $email.parent().addClass('wc-lucky-wheel-shortcode-error-field');
            $email.parent().find('.wc-lucky-wheel-shortcode-wheel-field-error').html(email_error);
            $email.prop('disabled', false);
            focus_field = $email;
            qualified = false;
        }
        if (qualified === false) {
            focus_field.focus();
            return false;
        }
        $email.prop('disabled', true);
        $button.addClass('wc-lucky-wheel-shortcode-loading');
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: wlwl_shortcode_params.ajaxurl,
            data: {
                user_email: wlwl_email,
                user_name: wlwl_name,
                user_mobile: wlwl_mobile,
                is_desktop: !is_mobile ? 1: '',
                current_currency: wlwl_shortcode_params?.current_currency,
                shortcode_args: {
                    custom_field_name_enable: shortcode_args.custom_field_name_enable,
                    custom_field_name_enable_mobile: shortcode_args.custom_field_name_enable_mobile,
                    custom_field_name_required: shortcode_args.custom_field_name_required,
                    custom_field_mobile_enable: shortcode_args.custom_field_mobile_enable,
                    custom_field_mobile_enable_mobile: shortcode_args.custom_field_mobile_enable_mobile,
                    custom_field_mobile_required: shortcode_args.custom_field_mobile_required,
                },
                language: wlwl_shortcode_params.language,
                g_validate_response: g_validate_response,
                _woocommerce_lucky_wheel_nonce: wlwl_shortcode_params.nonce,
            },
            success: function (response) {
                if (response.allow_spin === 'yes') {
                    spins_wheel($container,response.stop_position, response.result_notification, response.result);
                } else {
                    $button.removeClass('wc-lucky-wheel-shortcode-loading');
                    let email_error = response.allow_spin;
                    if (response.g_validate_response) {
                        email_error = response.warning;
                    }
                    $email.prop('disabled', false);
                    $email.parent().addClass('wc-lucky-wheel-shortcode-error-field');
                    $email.parent().find('.wc-lucky-wheel-shortcode-wheel-field-error').html(email_error);
                }
                if (response.hasOwnProperty('metrilo_response')) {
                    let metrilo_response = response.metrilo_response;
                    if (metrilo_response.status === 'success' && window.hasOwnProperty('metrilo')) {
                        if (window.metrilo.hasOwnProperty('customEvent') && typeof window.metrilo.customEvent === 'function') {
                            window.metrilo.customEvent('wordpress_lucky_wheel');
                        }
                    }
                }
            }
        });
    });
    $(window).on('elementor/frontend/init',function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/woocommerce-lucky-wheel.default', function ($scope) {
            if (!window.elementor) {
                return;
            }
            $(document).trigger('wlwl-render-shortcode');
        })
    });
    $(document).ready(function ($) {
        setTimeout(function () {
            $(document).trigger('wlwl-render-shortcode');
        }, 100);
    });
    $(document).on('wlwl-render-shortcode', function () {
        $('.wc-lucky-wheel-shortcode-container').map(function () {
            wlwl_shortcode_drawWheel( $(this)).then();
        });
    });
    window.wlwl_shortcode_drawWheel =  async function($container){
        if (!$container.find('.wc-lucky-wheel-shortcode-wheel-canvas-1').length){
            return;
        }
        is_mobile = window_size < 760;
        let shortcode_id = $container.attr('id'),
            shortcode_args = $container.data('shortcode_args');
        let canvas_width,wd_width = $container.parent().outerWidth(), wd_height = window.innerHeight,width;
        canvas_width = wd_width > wd_height ? wd_height : wd_width;
        if (canvas_width > 480) {
            width = parseInt( parseFloat(shortcode_args?.wheel_size || 100) * (canvas_width * 0.55 + 16) / 100);
        }else {
            width = parseInt(canvas_width * 0.75 + 16);
        }
        let center = (width) / 2;
        let slices = shortcode_args.coupon_type.length;
        let sliceDeg = 360 / slices;
        let deg = -(sliceDeg / 2);
        let wheel_args ={width,center,deg,slices,sliceDeg};
        $container.data({'wheel_args':wheel_args});
        await drawCanvas(shortcode_id,wheel_args, shortcode_args,'wheel-canvas-1');
        await drawCanvas(shortcode_id,wheel_args, shortcode_args,'wheel-canvas-2');
        await drawCanvas(shortcode_id,wheel_args, shortcode_args,'wheel-canvas-3');
        design_wheel(shortcode_id, shortcode_args,center,width,wd_width);
    }
    async function drawCanvas(shortcode_id,wheel_args, shortcode_args,canvas_id){
        if (!canvas_id || !$('#'+shortcode_id).find('.wc-lucky-wheel-shortcode-'+canvas_id).length){
            return;
        }
        let cv = $('#'+shortcode_id).find('.wc-lucky-wheel-shortcode-'+canvas_id).get(0);
        if (!cv){
            return;
        }
        let ctx = cv.getContext('2d');
        cv.width = wheel_args.width;
        cv.height = wheel_args.width;
        if (window.devicePixelRatio) {
            $(cv).attr({
                'width': wheel_args.width * window.devicePixelRatio,
                'height': wheel_args.width * window.devicePixelRatio
            });
            $(cv).css({'width': wheel_args.width , 'height': wheel_args.width});
            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        }
        switch (canvas_id){
            case 'wheel-canvas-1':
                for (let i = 0; i < wheel_args.slices; i++) {
                    drawSlice(ctx,wheel_args, shortcode_args.color[i]);
                    drawText(ctx, shortcode_args,wheel_args.width, wheel_args.center,wheel_args.deg + wheel_args.sliceDeg / 2, shortcode_args.label[i], shortcode_args.slices_text_color[i]);
                    wheel_args.deg += wheel_args.sliceDeg;
                }
                break;
            case 'wheel-canvas-2':
                drawPoint(ctx,wheel_args, shortcode_args.wheel_center_color);
                if (shortcode_args?.center_image) {
                    let wl_image = new Image;
                    wl_image.onload = function () {
                        let image_size = 2 * (wheel_args.width / 8 - 7);
                        ctx.arc(wheel_args.center, wheel_args.center, image_size / 2, 0, 2 * Math.PI);
                        ctx.clip();
                        ctx.drawImage(wl_image, wheel_args.center - image_size / 2, wheel_args.center - image_size / 2, image_size, image_size);

                    };
                    wl_image.src = shortcode_args.center_image;
                }
                if (wheel_args.width <= 480) {
                    drawBorder(ctx,shortcode_args,wheel_args,shortcode_args.wheel_border_color, 'rgba(0,0,0,0)', 8, 3, 4,  'rgba(0,0,0,0.2)');
                } else {
                    drawBorder(ctx,shortcode_args,wheel_args,shortcode_args.wheel_border_color, 'rgba(0,0,0,0)',16, 6, 7, 'rgba(0,0,0,0.2)');
                }
                break;
            case 'wheel-canvas-3':
                if (wheel_args.width <= 480) {
                    drawBorder(ctx,shortcode_args,wheel_args,'rgba(0,0,0,0)', shortcode_args.wheel_dot_color,8, 3, 4, 'rgba(0,0,0,0)');
                } else {
                    drawBorder(ctx,shortcode_args,wheel_args,'rgba(0,0,0,0)', shortcode_args.wheel_dot_color, 16, 6, 7,  'rgba(0,0,0,0)');
                }
                break;
        }
    }
    function drawBorder(ctx,shortcode_args,wheel_args,borderC, dotC, lineW, dotR, des, shadColor='') {
        let {center,sliceDeg} = wheel_args;
        ctx.beginPath();
        ctx.strokeStyle = borderC;
        ctx.lineWidth = lineW;
        if (shadColor) {
            ctx.shadowBlur = 1;
            ctx.shadowOffsetX = 6;
            ctx.shadowOffsetY = 6;
            ctx.shadowColor = shadColor;
        }
        let center1 = center - 2 * des;
        ctx.arc(center, center, center1, 0, 2 * Math.PI);
        ctx.stroke();
        let x_val, y_val, deg;
        deg = sliceDeg / 2;
        for (let i = 0; i < wheel_args.slices; i++) {
            ctx.beginPath();
            ctx.fillStyle = dotC;
            x_val = center + center1 * Math.cos(deg * Math.PI / 180);
            y_val = center - center1 * Math.sin(deg * Math.PI / 180);
            ctx.arc(x_val, y_val, dotR, 0, 2 * Math.PI);
            ctx.fill();
            deg += sliceDeg;
        }
    }
    function drawPoint(ctx,wheel_args, color) {
        let {width,center} = wheel_args;
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.shadowBlur = 1;
        ctx.shadowOffsetX = 8;
        ctx.shadowOffsetY = 8;
        ctx.shadowColor = 'rgba(0,0,0,0.2)';
        ctx.arc(center, center, width / 8, 0, 2 * Math.PI);
        ctx.fill();
        ctx.clip();
        ctx.restore();
    }
    function drawText(ctx, shortcode_args,width,center,deg, text, color) {
        let font_text_wheel = 'Helvetica',
            wheel_text_size = parseInt(width / 28) * parseInt(shortcode_args.font_size) / 100;
        ctx.save();
        ctx.translate(center, center);
        ctx.rotate(deg2rad(deg));
        ctx.textAlign = "right";
        ctx.fillStyle = color;
        ctx.font = '200 ' + wheel_text_size + 'px ' + font_text_wheel;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        text = text.replace(/&#(\d{1,4});/g, function (fullStr, code) {
            return String.fromCharCode(code);
        });
        text = text.replace(/&nbsp;/g, ' ');
        let reText = text.split('\/n'), text1 = '', text2 = '';
        if (reText.length > 1) {
            text1 = reText[0];
            text2 = reText.splice(1, reText.length - 1);
            text2 = text2.join('');
        } else {
            reText = text.split('\\n');
            if (reText.length > 1) {
                text1 = reText[0];
                text2 = reText.splice(1, reText.length - 1);
                text2 = text2.join('');
            }
        }
        if (text1.trim() !== "" && text2.trim() !== "") {
            ctx.fillText(text1.trim(), 7 * center / 8, -(wheel_text_size * 1 / 4));
            ctx.fillText(text2.trim(), 7 * center / 8, wheel_text_size * 3 / 4);
        } else {
            text = text.replace(/\\n/g, '').replace(/\/n/g, '');
            let wrappedText = wrapText(ctx, text, 7 * center / 8, wheel_text_size, width <= 480 ? (width / 3 - 10):(width /3 - 14), wheel_text_size);
            for (let wrappedTextItem of wrappedText) {
                ctx.fillText(wrappedTextItem.text, wrappedTextItem.x, wrappedTextItem.y);
            }
        }
        ctx.restore();
    }
    function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
        let words = text.split(' ');
        let countWords = words.length ;
        let line = ''; // This will store the text of the current line
        let testLine = ''; // This will store the text when we add a word, to test if it's too long
        let lineArray = [], result = []; // This is an array of lines, which the function will return
        for (let i in words) {
            testLine += `${words[i]} `;
            let metrics = ctx.measureText(testLine);
            let testWidth = metrics.width;
            if (testWidth > maxWidth && i > 0) {
                // Then the line is finished, push the current line into "lineArray"
                lineArray.push({text:line,x:x,y:y});
                line = `${words[i]} `;
                testLine = `${words[i]} `;
            } else {
                // If the test line is still less than the max width, then add the word to the current line
                line += `${words[i]} `;
            }
            if( i == countWords - 1) {
                lineArray.push({text:line,x:x,y:y});
            }
        }
        let start_y = y / 2 - 2, countLine = lineArray.length;
        if (countLine > 4){
            start_y = -y ;
        }else if (countLine > 2){
            start_y = -(y * 1 / 2);
        } else if (countLine > 1){
            start_y = -(y * 1 / 4);
        }
        for (let i in lineArray) {
            let tmp = lineArray[i];
            if (i > 0){
                start_y += lineHeight ;
            }
            tmp['y'] = start_y;
            result.push(tmp);
        }
        return result;
    }
    function drawSlice(ctx,wheel_args, color) {
        let {width,center,deg,sliceDeg} = wheel_args;
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.moveTo(center, center);
        let r = center;
        if (center !== 32) {
            if (width <= 480) {
                r = width / 2 - 10;
            } else {
                r = width / 2 - 14;
            }
        }
        ctx.arc(center, center, r, deg2rad(deg), deg2rad(deg + sliceDeg));
        ctx.lineTo(center, center);
        ctx.fill();
    }
    function deg2rad(deg) {
        return deg * Math.PI / 180;
    }
    function design_wheel(id, args,center,width,wrap_width){
        $('#'+id).find('.wc-lucky-wheel-shortcode-wheel-canvas').css({'width': width + 'px', 'height': width + 'px'});
        if (!$('#'+id+'_custom_inline_css').length){
            $('head').append(`<style id="${id}_custom_inline_css"></style>`);
        }
        let css='',shortcode_id_css = `#${id}`;
        if (width && wrap_width){
            if (width > (wrap_width/2)){
                $('#'+id).addClass('lucky-wheel-shortcode-mobile');
            }else {
                $('#'+id).removeClass('lucky-wheel-shortcode-mobile');
            }
            if (args.pointer_position === 'center') {
                css += shortcode_id_css + ' .wc-lucky-wheel-shortcode-wheel-pointer:before{font-size:' + parseInt(width / 4) + 'px !important; }';
            } else {
                css += shortcode_id_css + ' .wc-lucky-wheel-shortcode-wheel-pointer:before{font-size:' + parseInt(width / 10) + 'px !important; }';
                if (wrap_width < 640) {
                    css += shortcode_id_css + '.wc-lucky-wheel-shortcode-margin-position .wc-lucky-wheel-shortcode-wheel-container .wc-lucky-wheel-shortcode-wheel-pointer-container .wc-lucky-wheel-shortcode-wheel-pointer:after{width:' + parseInt(width / 25) + 'px !important;height:' + parseInt(width / 25) + 'px !important;bottom:' + parseInt(width / 50) + 'px !important; left:' + parseInt(width / 50) + 'px;}';
                } else {
                    css += shortcode_id_css + '.wc-lucky-wheel-shortcode-margin-position .wc-lucky-wheel-shortcode-wheel-container .wc-lucky-wheel-shortcode-wheel-pointer-container .wc-lucky-wheel-shortcode-wheel-pointer:after{width:' + parseInt(width / 25) + 'px !important;height:' + parseInt(width / 25) + 'px !important;bottom:' + parseInt(width / 25) + 'px !important; }';
                }
            }
        }

        if (args?.is_elementor !=='yes' || args?.random_color==='on'){
            if (args?.bg_color){
                css += shortcode_id_css + '{background-color:' + args.bg_color + '; }';
            }
            if (args?.pointer_color){
                css += shortcode_id_css + ' .wc-lucky-wheel-shortcode-wheel-pointer:before{color:' + args.pointer_color + '; }';
                css += '@media(max-width:640px){'+shortcode_id_css+'.wc-lucky-wheel-shortcode-wheel-pointer:before{color: ' + args.pointer_color + ';background-color: ' + args.pointer_color + ';}}';
            }
        }
        if (args?.is_elementor !=='yes'){
            if (args?.bg_image){
                css += shortcode_id_css + '{background-image:url(' + args.bg_image + '); }';
            }
            if (args?.text_color){
                css += shortcode_id_css + '{color:' + args.text_color + '; }';
            }
            if (args?.spin_button_bg_color){
                css += shortcode_id_css + '  .wc-lucky-wheel-shortcode-wheel-button-wrap{background-color:' + args.spin_button_bg_color + '; }';
            }
            if (args?.spin_button_color){
                css += shortcode_id_css + ' .wc-lucky-wheel-shortcode-wheel-button-wrap{color:' + args.spin_button_color + '; }';
            }
        }
        $('#'+id+'_custom_inline_css').html(css);
        if (is_mobile && (!args?.custom_field_name_enable_mobile || args?.custom_field_name_enable_mobile === 'off') ){
            $('#'+id).find('.wc-lucky-wheel-shortcode-wheel-field-name-wrap').hide();
        }else {
            $('#'+id).find('.wc-lucky-wheel-shortcode-wheel-field-name-wrap').show();
        }
        if (is_mobile && (!args?.custom_field_mobile_enable_mobile || args?.custom_field_mobile_enable_mobile === 'off')){
            $('#'+id).find('.wc-lucky-wheel-shortcode-wheel-field-mobile-wrap').hide();
        }else {
            $('#'+id).find('.wc-lucky-wheel-shortcode-wheel-field-mobile-wrap').show();
        }
    }
    function wlwlShortcodeReCaptchaOnload(){
        if (wlwl_shortcode_params.wlwl_recaptcha == 'on' && wlwl_shortcode_params.wlwl_recaptcha_site_key) {
            if (wlwl_shortcode_params.wlwl_recaptcha_version == 2) {
                wlwlShortcodeReCaptchaV2Onload();
            } else {
                wlwlShortcodeReCaptchaV3Onload();
                $('.wlwl-shortcode-recaptcha-field').hide();
            }
        } else {
            $('.wlwl-shortcode-recaptcha-field').hide();
        }
    }
    function wlwlShortcodeReCaptchaV2Onload() {
        if ($.find('.wlwl-shortcode-recaptcha').length == 0 || $.find('.wlwl-shortcode-recaptcha iframe').length) {
            return true;
        }
        grecaptcha.render('wlwl-shortcode-recaptcha', {
            'sitekey': shortcode_args.wlwl_recaptcha_site_key,
            'callback': validateShortcodeRecaptcha,
            'expired-callback': expireRecaptcha,
            'theme': shortcode_args.wlwl_recaptcha_secret_theme,
            'isolated': false
        });
    }
    function wlwlShortcodeReCaptchaV3Onload() {
        grecaptcha.ready(function () {
            grecaptcha.execute(wlwl_shortcode_params.wlwl_recaptcha_site_key, {action: 'homepage'}).then(function (token) {
                validateShortcodeRecaptcha(token);
            })
        });
    }
    function validateShortcodeRecaptcha(response) {
        if (response) {
            $('.wlwl-shortcode-recaptcha-field .wlwl-shortcode-g-validate-response').val(response);
        }
    }
    function expireRecaptcha() {
        $('.wlwl-shortcode-recaptcha-field .plwl-shortcode-g-validate-response').val(null);
    }
    function spins_wheel($container,stop_position, result_notification, result) {
        let shortcode_args = $container.data('shortcode_args'),
            {width,sliceDeg} = $container.data('wheel_args');
        let canvas_1 = $container.find('.wc-lucky-wheel-shortcode-wheel-canvas-1'),
            canvas_3 = $container.find('.wc-lucky-wheel-shortcode-wheel-canvas-3');
        let default_css = '';
        if (window.devicePixelRatio) {
            default_css = 'width:' + width + 'px;height:' + width + 'px;';
        }
        canvas_1.attr('style', default_css);
        canvas_3.attr('style', default_css);
        let stop_deg = 360 - sliceDeg * stop_position;
        let wlwl_spinning_time = shortcode_args.spinning_time;
        let wheel_stop = shortcode_args.wheel_speed * 360 * wlwl_spinning_time + stop_deg;
        let css = default_css + '-moz-transform: rotate(' + wheel_stop + 'deg);-webkit-transform: rotate(' + wheel_stop + 'deg);-o-transform: rotate(' + wheel_stop + 'deg);-ms-transform: rotate(' + wheel_stop + 'deg);transform: rotate(' + wheel_stop + 'deg);';
        css += '-webkit-transition: transform ' + wlwl_spinning_time + 's ease;-moz-transition: transform ' + wlwl_spinning_time + 's ease;-ms-transition: transform ' + wlwl_spinning_time + 's ease;-o-transition: transform ' + wlwl_spinning_time + 's ease;transition: transform ' + wlwl_spinning_time + 's ease;';
        canvas_1.attr('style', css);
        canvas_3.attr('style', css);

        let pointer_effect = parseInt(wlwl_shortcode_params.pointer_effect),pointer_z_time,
            $pointer = $container.find('.wc-lucky-wheel-shortcode-wheel-pointer');
        console.log('pointer_effect',pointer_effect)
        switch (pointer_effect) {
            case 2:
                pointer_z_time = 1000/parseInt( shortcode_args.wheel_speed);
                $pointer.css({'transition':'transform ' + pointer_z_time + 'ms ease'});
                let pointer_z_time_t =0;
                for (let index = 0; index < 1000*wlwl_spinning_time; index += pointer_z_time) {
                    pointer_z_time_t = index;
                    setTimeout(function () {
                        $pointer.css({'transform':'translateY(0%) rotateZ(10deg)'});
                    }, pointer_z_time_t);
                    setTimeout(function () {
                        $pointer.css({'transform':'translateY(0%)'});
                    },pointer_z_time_t + pointer_z_time/3);
                    setTimeout(function () {
                        $pointer.css({'transform':'translateY(0%)  rotateZ(-5deg)'});
                    },pointer_z_time_t + 2*(pointer_z_time/3));
                }
                break;
            case 1:
                pointer_z_time = 1000/parseInt( shortcode_args.wheel_speed);
                let wheel_bg_color = shortcode_args.color,
                    shortcode_id = $container.attr('id'),
                    color_i = 0;
                let pointer_z_time_t1 = pointer_z_time/(wheel_bg_color.length);
                let pointer_last_time = 1000*wlwl_spinning_time - pointer_z_time_t1;
                if (!$('#'+shortcode_id+'_pointer_custom_inline_css').length){
                    $('head').append('<style id="'+shortcode_id+'_pointer_custom_inline_css"></style>');
                }
                for (let index = 0; index < pointer_last_time; index += pointer_z_time_t1) {
                    setTimeout(function () {
                        if (!wheel_bg_color[color_i]) {
                            color_i = 0;
                        }
                        $('#'+shortcode_id+'_pointer_custom_inline_css').html('#'+shortcode_id+' .wc-lucky-wheel-shortcode-wheel-container .wc-lucky-wheel-shortcode-wheel-pointer:before {color: '+wheel_bg_color[color_i]+' !important;}');
                        if (is_mobile){
                            $('#'+shortcode_id+'_pointer_custom_inline_css').append('#'+shortcode_id+' .wc-lucky-wheel-shortcode-wheel-container .wc-lucky-wheel-shortcode-wheel-pointer:before {background: '+wheel_bg_color[color_i]+' !important;}');
                        }
                        color_i +=1;
                    }, index);
                }
                setTimeout(function () {
                    $('#'+shortcode_id+'_pointer_custom_inline_css').html('#'+shortcode_id+' .wc-lucky-wheel-shortcode-wheel-container .wc-lucky-wheel-shortcode-wheel-pointer:before {color: '+wheel_bg_color[stop_position]+' !important;}');
                    if (is_mobile){
                        $('#'+shortcode_id+'_pointer_custom_inline_css').append('#'+shortcode_id+' .wc-lucky-wheel-shortcode-wheel-container .wc-lucky-wheel-shortcode-wheel-pointer:before {background: '+wheel_bg_color[stop_position]+' !important;}');
                    }
                }, pointer_last_time);
                break;
        }
        setTimeout(function () {
            switch (pointer_effect) {
                case 2:
                    $pointer.css({'transform':'translateY(0%)'});
                    break;
            }
            css = default_css + 'transform: rotate(' + stop_deg + 'deg);';
            canvas_1.attr('style', css);
            canvas_3.attr('style', css);
            if (result === 'win' && shortcode_args?.congratulations_effect === 'firework') {
                $container.find('.wlwl-congratulations-effect').addClass('wlwl-congratulations-effect-firework');
            }
            $container.find('.wc-lucky-wheel-shortcode-wheel-fields-container').html('<div class="wc-lucky-wheel-shortcode--frontend-result">' + result_notification + '</div>');
            $container.find('.wc-lucky-wheel-shortcode-loading').removeClass('wc-lucky-wheel-shortcode-loading');
            $container.addClass('lucky-wheel-shortcode-result');
        }, parseInt(wlwl_spinning_time * 1000))
    }
    function isValidEmailAddress(emailAddress) {
        let pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$/i;
        return pattern.test(emailAddress);
    }
    function isValidPhone( phone ){
        return /^\d{8,15}$/.test(phone);
    }
    function formatPhoneNumber(phone) {
        if (phone) {
            phone = phone.replace(/\(|\)|-|\.|\s|\+/gi, '');
            let firstChar = phone.slice(0, 1);
            phone = parseInt(firstChar) === 0 ? phone.slice(1) : phone;
        }

        return phone;
    }
}(jQuery));