import $ from "jquery";

$(function () {
    $(".mobile-only select.orderby").each(function() {
        var classes = $(this).attr("class"),
            name    = $(this).attr("name");
        var template =  '<div class="' + classes + '">';
            template += '<span class="custom-select-trigger">' + $(this).attr("aria-label") + '</span>';
            template += '<div class="custom-options">';
            $(this).find("option").each(function() {
                let selectedClass = '';
                if($(this).is(':selected')){
                    selectedClass = 'selection';
                }
                template += '<span class="custom-option ' + selectedClass + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
            });
        template += '</div></div>';
        
        $(this).wrap('<div class="custom-select-wrapper"></div>');
        $(this).hide();
        $(this).after(template);
        $(".custom-select-trigger").text($(this).find('option:selected').text());
    });
    $(".custom-option:first-of-type").hover(function() {
        $(this).parents(".custom-options").addClass("option-hover");
    }, function() {
        $(this).parents(".custom-options").removeClass("option-hover");
    });
    $(".custom-select-trigger").on("click", function() {
        $('html').one('click',function() {
            $(".custom-select").removeClass("opened");
        });
        $(this).parents(".custom-select").toggleClass("opened");
        event.stopPropagation();
    });
    $(".custom-option").on("click", function() {
        $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
        $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
        $(this).addClass("selection");
        $(this).parents(".custom-select").removeClass("opened");
        $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());

            $("#rc_orderby_filter").val($(this).data('value'));
            $(document.body).trigger("rc.refresh_products");
    });

});
