var Wick = Wick || {};
Wick.onlineExclusive = (function () {
    let rangesToggler = $('.ranges-toggle'),
        rangesList = $('.ranges'),
        otherRanges = $('.other-ranges'),
        otherRangesList = $('.other-ranges__item-wrapper'),
        viewBtn = $('#view-btn'),
        rangesEl = $('.ranges-el'),
        rangesComponent = $('.ranges-card'),
        otherRangesComponent = $('.other-ranges__item'),
        gardensComponent = $('.ranges-card_gardens'),
        kitchensComponent = $('.ranges-card_kitchens'),
        interiorDecorComponent = $('.ranges-card_interior-decor'),
        tileFlooringComponent = $('.ranges-card_tile-flooring'),
        doorsWindowsComponent = $('.ranges-card_doors-windows'),
        buildMaterialsComponent = $('.ranges-card_build-materials'),
        toolsWorkwearComponent = $('.ranges-card_tools-workwear'),
        heatingComponent = $('.ranges-card_heating'),
        otherRangesGardens = $('.other-ranges__item_gardens'),
        otherRangesKitchens = $('.other-ranges__item_kitchens'),
        otherRangesInterior = $('.other-ranges__item_int-decor'),
        otherRangesTiles = $('.other-ranges__item_tiles-flooring'),
        otherRangesDoors = $('.other-ranges__item_doors'),
        otherRangesBuild = $('.other-ranges__item_build-materials'),
        otherRangesTools = $('.other-ranges__item_tools-workwear'),
        otherRangesHeating = $('.other-ranges__item_heating');

    rangesToggler.on('click', function () {
        rangesToggler
            .toggleClass('border-bottom-rounded_false')
            .find('.icon')
            .toggleClass('icon-rotated');
        if (window.innerWidth > 768) {
            rangesList.toggleClass('d-block border-bottom-rounded');
        } else if (window.innerWidth < 768) {
            rangesList.toggleClass('border-bottom-rounded');
            rangesList.toggle();
        }
    });

    if (window.innerWidth < 768) {
        rangesList.on('click', 'a', function (e) {
            e.preventDefault();
            otherRanges.show();

            $(document).mouseup(function (e) {
                if (!rangesList.is(e.target) && rangesList.has(e.target).length === 0) {
                    rangesList.hide();
                }
            });

            switch ($(this).parent().attr('data-value')) {
                case 'gardens-btn':
                    rangesComponent.hide();
                    gardensComponent.show();
                    rangesList.hide();
                    break;
                case 'kitchens-btn':
                    rangesComponent.hide();
                    kitchensComponent.show();
                    rangesList.hide();
                    break;
                case 'interior-btn':
                    rangesComponent.hide();
                    interiorDecorComponent.show();
                    rangesList.hide();
                    break;
                case 'tile-btn':
                    rangesComponent.hide();
                    tileFlooringComponent.show();
                    rangesList.hide();
                    break;
                case 'doors-btn':
                    rangesComponent.hide();
                    doorsWindowsComponent.show();
                    rangesList.hide();
                    break;
                case 'build-btn':
                    rangesComponent.hide();
                    buildMaterialsComponent.show();
                    rangesList.hide();
                    break;
                case 'tools-btn':
                    rangesComponent.hide();
                    toolsWorkwearComponent.show();
                    rangesList.hide();
                    break;
                case 'heating-btn':
                    rangesComponent.hide();
                    heatingComponent.show();
                    rangesList.hide();
                    break;
                case 'view-btn':
                    rangesComponent.show();
                    rangesList.hide();
                    otherRanges.hide();
                    break;
            }
        });
    } else if (window.innerWidth >= 768) {
        rangesList.on('click', 'a', function (e) {
            e.preventDefault();
            otherRanges.show();

            switch ($(this).parent().attr('data-value')) {
                case 'gardens-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    gardensComponent.show();
                    otherRangesComponent.show();
                    otherRangesGardens.hide();
                    break;
                case 'kitchens-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    kitchensComponent.show();
                    otherRangesComponent.show();
                    otherRangesKitchens.hide();
                    break;
                case 'interior-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    interiorDecorComponent.show();
                    otherRangesComponent.show();
                    otherRangesInterior.hide();
                    break;
                case 'tile-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    tileFlooringComponent.show();
                    otherRangesComponent.show();
                    otherRangesTiles.hide();
                    break;
                case 'doors-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    doorsWindowsComponent.show();
                    otherRangesComponent.show();
                    otherRangesDoors.hide();
                    break;
                case 'build-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    buildMaterialsComponent.show();
                    otherRangesComponent.show();
                    otherRangesBuild.hide();
                    break;
                case 'tools-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    toolsWorkwearComponent.show();
                    otherRangesComponent.show();
                    otherRangesTools.hide();
                    break;
                case 'heating-btn':
                    rangesEl.removeClass('range-btn');
                    $(this).addClass('range-btn');
                    rangesComponent.hide();
                    heatingComponent.show();
                    otherRangesComponent.show();
                    otherRangesHeating.hide();
                    break;
            }
        });
        otherRangesList.on('click', 'a', function (e) {
            e.preventDefault();

            switch ($(this).parent().parent().attr('data-value')) {
                case 'gardens-btn':
                    rangesEl.removeClass('range-btn');
                    $('#gardens-btn').addClass('range-btn');
                    rangesComponent.hide();
                    gardensComponent.show();
                    otherRangesComponent.show();
                    otherRangesGardens.hide();
                    break;
                case 'kitchens-btn':
                    rangesEl.removeClass('range-btn');
                    $('#kitchens-btn').addClass('range-btn');
                    rangesComponent.hide();
                    kitchensComponent.show();
                    otherRangesComponent.show();
                    otherRangesKitchens.hide();
                    break;
                case 'interior-btn':
                    rangesEl.removeClass('range-btn');
                    $('#interior-btn').addClass('range-btn');
                    rangesComponent.hide();
                    interiorDecorComponent.show();
                    otherRangesComponent.show();
                    otherRangesInterior.hide();
                    break;
                case 'tile-btn':
                    rangesEl.removeClass('range-btn');
                    $('#tile-btn').addClass('range-btn');
                    rangesComponent.hide();
                    tileFlooringComponent.show();
                    otherRangesComponent.show();
                    otherRangesTiles.hide();
                    break;
                case 'doors-btn':
                    rangesEl.removeClass('range-btn');
                    $('#doors-btn').addClass('range-btn');
                    rangesComponent.hide();
                    doorsWindowsComponent.show();
                    otherRangesComponent.show();
                    otherRangesDoors.hide();
                    break;
                case 'build-btn':
                    rangesEl.removeClass('range-btn');
                    $('#build-btn').addClass('range-btn');
                    rangesComponent.hide();
                    buildMaterialsComponent.show();
                    otherRangesComponent.show();
                    otherRangesBuild.hide();
                    break;
                case 'tools-btn':
                    rangesEl.removeClass('range-btn');
                    $('#tools-btn').addClass('range-btn');
                    rangesComponent.hide();
                    toolsWorkwearComponent.show();
                    otherRangesComponent.show();
                    otherRangesTools.hide();
                    break;
                case 'heating-btn':
                    rangesEl.removeClass('range-btn');
                    $('#heating-btn').addClass('range-btn');
                    rangesComponent.hide();
                    heatingComponent.show();
                    otherRangesComponent.show();
                    otherRangesHeating.hide();
                    break;
            }
        });
    }

    viewBtn.on('click', function (e) {
        e.preventDefault();
        rangesComponent.show();
        otherRanges.hide();
        rangesEl.removeClass('range-btn');
    });

    $(function () {
        $('a.online-exclusive__banner').on('click', function (event) {
            event.preventDefault();
            let sc = $(this).attr('href'),
                dn = $(sc).offset().top - 10;
            $('html, body').animate({ scrollTop: dn }, 1000);
        });
    });

    $(function () {
        $('a.view-link').on('click', function (event) {
            event.preventDefault();
            let sc = $(this).attr('href'),
                dn = $(sc).offset().top - 10;
            $('html, body').animate({ scrollTop: dn }, 1000);
        });
    });

    $(function () {
        $('a.ranges-el').on('click', function (event) {
            event.preventDefault();
            let dn;

            if (window.innerWidth >= 1200) {
                dn = 1086;
            } else if (window.innerWidth >= 768 && window.innerWidth <= 991.99) {
                dn = 930;
            } else if (window.innerWidth >= 992) {
                dn = 990;
            }

            $('html, body').animate({ scrollTop: dn }, 1000);
        });
    });

    $(function () {
        $('.other-ranges__item').on('click', function (event) {
            event.preventDefault();
            let dn;

            if (window.innerWidth >= 1200) {
                dn = 910;
            } else if (window.innerWidth >= 768 && window.innerWidth <= 991.99) {
                dn = 700;
            } else if (window.innerWidth >= 992) {
                dn = 810;
            }

            $('html, body').animate({ scrollTop: dn }, 1000);
        });
    });
})();
