$.fn.carousel = function () {
    const configDefault = {
        mobileFirst: true,
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        dotsClass: 'carousel__dots',
        speed: 300,
        arrows: true,
        prevArrow: "<div class=\"carousel__prev slick-prev carousel__arrow\"></div>",
        nextArrow: "<div class='carousel__next slick-next carousel__arrow'></div>",
        // variableWidth: true,
        // centerMode: true,
        adaptiveHeight: true,
        variableWidth: false,
        checkArrow: true,
        onCheckPrevArrow: onCheckPrevArrow,
        onCheckNextArrow: onCheckNextArrow,
        onInit: function (event, slick) {

        },
    };

    var options = arguments[0] != undefined ? arguments[0] : {};
    options = $.extend(configDefault, options);

    $(this)
        .on('init',
            function (event, slick) {
                $(this).css('opacity', '1');
                options.onInit(event, slick);
            }
        );

    $(this)
        .slick(
            options
        );


    if (options.checkArrow) {
        if (configDefault.onCheckPrevArrow) {
            configDefault.onCheckPrevArrow($(this), $(this).find('.slick-slide'));
        } else {
            onCheckPrevArrow($(this), $(this).find('.slick-slide'));
        }

        if (configDefault.onCheckNextArrow) {
            configDefault.onCheckNextArrow($(this), $(this).find('.slick-slide'));
        } else {
            onCheckNextArrow($(this), $(this).find('.slick-slide'));
        }

        $(this).on('afterChange',
            function (event, slick, direction) {
                console.log(event, slick, direction)
                onCheckPrevArrow($(this), $(this).find('.slick-slide'));
                onCheckNextArrow($(this), $(this).find('.slick-slide'));
            }
        );
    }

    function onCheckPrevArrow(element, items) {
        let first = items
            .first();
        let prevArrow = element.find('.slick-prev.slick-arrow');

        if (first.hasClass('slick-active') || first.hasClass('slick-current')) {
            prevArrow.css(
                {
                    opacity: 0,
                    pointerEvents: 'none'
                }
            );
        } else {
            prevArrow.css(
                {
                    opacity: 1,
                    pointerEvents: 'initial'
                }
            );
        }
    }

    function onCheckNextArrow(element, items) {
        let last = items
            .last();
        let nextArrow = element.find('.slick-next.slick-arrow');

        if (last.hasClass('slick-active') || last.hasClass('slick-current')) {
            nextArrow.css(
                {
                    opacity: 0,
                    pointerEvents: 'none'
                }
            );
        } else {
            nextArrow.css(
                {
                    opacity: 1,
                    pointerEvents: 'initial'
                }
            );
        }
    }
};