import $ from 'jquery';

$(document).ready(function () {
    let select = $('.js-select');
    if (select.length) {
        select.each(function(){
            let _this = $(this),
                head = _this.find('.js-select-head'),
                option = _this.find('.js-select-option'),
                input = _this.find('.js-select-input');

            head.on('click', function(e){
                e.preventDefault();
                e.stopPropagation();

                if (_this.hasClass('active')) {
                    _this.removeClass('active');
                } else {
                    select.removeClass('active');
                    _this.addClass('active');
                }
            });

            option.on('click', function(e){
                e.preventDefault();
                _this.addClass('selected');

                let _thisOption = $(this),
                    value = _thisOption.text();

                head.text(value);

                option.removeClass('active');
                _thisOption.addClass('active');

                input.val(value);
            });
        });

        $(document).on('click', function(){
            select.removeClass('active');
        });
    }
});