(function ($) {
    'use strict';
    // Input toggle
    // ------------------------------------------------
    $('.js-hrytmr-input-toggle').each(function () {
        const $el = $(this);
        $el.hide();
        const toggle = $('<span class="hrytmr-input-toggle"></span>');
        $el.before(toggle);
        if ($el.is(':checked')) {
            toggle.addClass('is-on');
        }
        toggle.on('click', function () {
            $(this).toggleClass('is-on');
            $el.prop('checked', !$el.is(':checked'));
        });
    });

    // Preview evergreen countdown timer duration.
    // ------------------------------------------------------------
    $('.js-htmr-duration').on('keyup', function () {
        var $help = $('.js-htmr-end-after-help');
        var durationArray = [];
        $('.js-htmr-duration').each(function () {
            durationArray.push(parseInt($(this).val()) || 0)
        });
        $help.find('span').each(function (i, e) {
            $(this).text(durationArray[i])
        });
    });

    // Preview normal countdown timer end datetime.
    // ------------------------------------------------------------
    $('.js-htmr-datetime').on('change', function () {
        var $help = $('.js-htmr-end-datetime-help');
        var $el = $(this);
        $help.find('span').text(parseInt($el.val()) || 0)
    });

    // Handle tabs
    $('.hrytmr-tabs__nav a').on('click', function (e) {
        const $el = $(this);
        $el.parent().addClass('active').siblings().removeClass('active');
        $el.closest('.hrytmr-tabs').find($el.attr('href')).addClass("active").siblings().removeClass('active');
        e.preventDefault();
    });

    // Datetime picker
    // ------------------------------------------------------------
    $(".hrytmr-datetime").datetimepicker({
        controlType: "select",
        dateFormat: "yy-mm-dd",
        timeFormat: "hh:mm TT",
    });

    // Handle mode toggle
    $('.hrytmr-form__mode input[name="mode"]').on('change', function () {
        var $el = $(this);
        if (!$el.is(':checked')) {
            return;
        }
        var evergreenContainerClass = 'hrytmr-form__schedule--evergreen';
        var normalContainerClass = 'hrytmr-form__schedule--normal';
        var value = +$el.val();
        var $container = $el.closest('.hrytmr-form__mode');
        if (value === 2) {
            $container.siblings('.' + evergreenContainerClass).removeClass('is-hidden');
            $container.siblings('.' + normalContainerClass).addClass('is-hidden');
        }
        else {
            $container.siblings('.' + evergreenContainerClass).addClass('is-hidden');
            $container.siblings('.' + normalContainerClass).removeClass('is-hidden');
        }
    }).trigger('change');

    // Handle products type dropdown
    // ------------------------------------------------------------
    var isLoaded = false;
    $('#js-hrytmr-products-type').on('change', function () {
        const $autocompleteLabel = $('.js-hrytmr-products-type-label');
        if ($(this).find('option:selected').data('show-autocomplete')) {
            $autocompleteLabel.text($(this).find('option:selected').text());
            $autocompleteLabel.closest('.form-field').removeClass("is-hidden");
        }
        else {
            $autocompleteLabel.closest('.form-field').addClass("is-hidden");
        }
        if (isLoaded) {
            $('#hrytmr-products-autocomplete-input').val(null).trigger('change');
        }
        isLoaded = true;

    }).trigger('change');


    // Search for products/Categories
    // ------------------------------------------------------------
    $('#hrytmr-products-autocomplete-input').select2({
        placeholder: 'Search...',
        width: '500',
        ajax: {
            url: ajax_object.ajax_url,
            dataType: 'json',
            data: function (params) {
                return {
                    action: 'search_products',
                    search: params.term,
                    exclude: $(this).val(),
                    productsSelection: $('#js-hrytmr-products-type').val(),
                    type: "public"
                }
            }
        }
    });

    // Color picker
    // ------------------------------------------------------------
    $('.js-hrytmr-color-input').wpColorPicker();

    //  Toggle `redirect` action
    // ------------------------------------------------------------
    $("#js-hrytmr-end-action").on("change", function () {
        var $redirectUrlField = $("#js-hrytmr-end-action-redirect-url-field");
        if (parseInt($(this).val()) === 3) {
            $redirectUrlField.removeClass('is-hidden');
        }
        else {
            $redirectUrlField.addClass('is-hidden');
        }
    }).trigger('change');

})
    (jQuery);