'use strict';

// option settings var
var g_duration = Number('150');
var g_log = Boolean(Number(''));
// option style var
var g_content_id = '#' + 'content';
var g_price_id = '#' + 'live-price';
var g_special_id = '#' + 'live-special';
var g_tax_id = '#' + 'live-tax';
var g_points_id = '#' + 'live-points';
var g_reward_id = '#' + 'live-reward';
var g_option_id = '#' + 'live-option';

function htmlDecode(value) {
    return $("<textarea/>")
        .html(value)
        .text();
}

function showEl(el, content) {
    if (content && $(el).length) {
        if (content != $(el).html()) {
            $(el).fadeOut(0, function () {
                $(this)
                    .html(content)
                    .fadeIn(g_duration);
            });
        }
    } else {
        $(el).fadeOut(g_duration, function () {
            $(this).empty();
        });
    }
};

var is_special_shown = false;

// Update summary info on product page
function showSummary(json) {
    if (json.success) {
        if (json.product.special) {
            if (!is_special_shown) {
                $(g_price_id).replaceWith('<span id="' + g_price_id.substring(1) + '"></span>');
                $(g_price_id).css('text-decoration', 'line-through');
                $(g_special_id).replaceWith('<h2 id="' + g_special_id.substring(1) + '"></h2>');
                $(g_special_id).css('display', 'inline-block');

                is_special_shown = true;
            }

            showEl(g_special_id, json.product.special);

        } else {
            if (is_special_shown) {
                $(g_special_id).replaceWith('<span id="' + g_special_id.substring(1) + '"></span>');
                $(g_price_id).replaceWith('<h2 id="' + g_price_id.substring(1) + '"></h2>');
                $(g_price_id).css('display', 'inline-block');

                is_special_shown = false;
            }
        }

        showEl(g_price_id, json.product.price);
        showEl(g_reward_id, json.product.reward);
        showEl(g_tax_id, json.product.tax);
        showEl(g_points_id, json.product.points);
    } else {
        console.log(json);
    }
}


// Show available options on product page
function showOptions(json) {
    if (json.success) {
        json.options.forEach(option => {
            let option_id = option.product_option_id;
            let option_type = option.type;

            option.product_option_value.forEach(option_value => {
                let id = g_option_id + '_' + option_id + '_' + option_value.product_option_value_id;
                let text = '';

                if (option_value.price) {
                    text = option_value.price_prefix;
                    text += (option_value.special) ? option_value.special : option_value.price;
                    text = '(' + text + ')';
                }

                text = ('select' == option_type) ? [option_value.name, text].join(' ') : text;

                showEl(id, text);
            });
        });
    }
};

function getOptions() {
    var r = [
        g_content_id + ' input[type="checkbox"]:checked',
        g_content_id + ' input[type="hidden"]',
        g_content_id + ' input[type="number"]',
        g_content_id + ' input[type="radio"]:checked',
        g_content_id + ' input[type="text"]',
        g_content_id + ' select'
    ];

    return $(r.join(','));
};

function update() {
    var url = 'index.php?route=extension/module/live_options&product_id=104128';
    var data = getOptions();

    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        dataType: 'json',
        beforeSend: function () {},
        complete: function () {},
        success: function (json) {
            showSummary(json);
            showOptions(json);

            if (g_log) {
                console.log('-- ajax response:');
                console.dir(json);
            }
        },
        error: function (error) {
            console.log('-- ajax error:');
            console.dir(error);
        }
    });
};

if (0 < $(g_content_id + ' input[name="quantity"]').val()) {
    update();
}

var tags_on_change = [
    g_content_id + ' input[type="radio"]',
    g_content_id + ' input[type="checkbox"]',
    g_content_id + ' select'
];

$(document).on('change', tags_on_change.join(','), function (el) {
    update();
});

var tags_on_input = [
    g_content_id + ' input[type="text"]',
    g_content_id + ' input[type="number"]',
    g_content_id + ' input[name="quantity"]'
];

$(document).on('input', tags_on_input.join(','), function () {
    update();
});