/*
You can use this file with your scripts.
It will not be overwritten when you upgrade solution.
*/

/* wbs24 - add sale stickers */
function wbs24SaleSticker() {
    const debug = true;

    function getItems(css) {
        const items = document.querySelectorAll(css);
        if (!items) items = [];

        return items;
    }

    function getDiscount(item) {
        let discount = 0;
        const priceElement = item.querySelector('.price');
        const priceDiscountElement = item.querySelector('.price.discount');

        if (priceElement && priceDiscountElement) {
            const price = priceElement.dataset.value;
            const priceDiscount = priceDiscountElement.dataset.value;
            const deltaPrice = priceDiscount - price;
            discount = Math.round(deltaPrice / (priceDiscount / 100));
        }

        return discount;
    }

    function setSticker(item, stickerClass, discount) {
        if (!discount) return;

        const stickersElement = item.querySelector('.stickers');
        
        if (isAllowAddSticker(stickersElement, stickerClass)) {
            let div = document.createElement('div');
            div.className = 'wrap_mark_sale';
            div.innerHTML = `<div class="${stickerClass}">-${discount}%</div>`;
            stickersElement.append(div);
        }
    }

    function isAllowAddSticker(stickersElement, stickerClass) {
        if (!stickersElement) return false;
        const stickerElement = stickersElement.querySelector('.' + stickerClass);

        return stickerElement ? false : true;
    }

    function run(css) {
        let items = getItems(css);
        items.forEach(item => {
            let discount = getDiscount(item);
            setSticker(item, 'mark_sale', discount);
        });
    }

    function action() {
        run('.catalog .item, .tabs_content .item');
        run('.item_main_info, .fast_view_frame');
    }

    function observer(css) {
        let catalogElement = document.querySelector(css);
        if (catalogElement) {
            let catalogElementObserver = new MutationObserver(mutationRecords => {
                if (debug) console.log('catalogElementObserver found mutation');
        
                action();
            });
            catalogElementObserver.observe(catalogElement, {
                childList: true,
                subtree: true,
            });
        }
    }

    action();
    observer('.catalog');
    observer('#popup_iframe_wrapper');
}

if (typeof window !== 'undefined') {
    document.addEventListener('DOMContentLoaded', wbs24SaleSticker);
}

/* wbs24 - buy services */
function wbs24BuyServices() {
    const debug = true;

    const protocol = location.protocol+'//';
    const domain = location.host;

    let basketContainerCss;
    let basketItemsCss;
    let basketItemFormPlaceSubCss;

    let mode = 'basket';
    let previousBasketSum;

    const formClass = 'form-services';
    const formSubCss = '.' + formClass;

    const ajaxUrl = '/local/services/ajax.php';

    function init() {
        // basket mode
        basketContainerCss = '.basket-items-list';
        basketItemsCss = basketContainerCss + ' .basket-items-list-item-container';
        basketItemFormPlaceSubCss = '.basket-item-block-info';

        // detail mode
        if (!document.querySelector(basketContainerCss)) {
            basketContainerCss = '.catalog_detail';
            basketItemsCss = basketContainerCss + ' .item_main_info';
            basketItemFormPlaceSubCss = '.middle_info';

            mode = 'detail';
        }
    }

    function action() {
        let items = getItems(basketItemsCss);
        let sum = getBasketSum();
        
        addFormToItems(items);
        if (mode == 'basket' && sum != previousBasketSum) {
            previousBasketSum = sum;
            delUnbound();
        }
    }

    function observer(css) {
        let basketContainer = document.querySelector(css);
        if (basketContainer) {
            let basketContainerObserver = new MutationObserver(mutationRecords => {
                if (debug) console.log('basketContainerObserver found mutation');
        
                action();
            });
            basketContainerObserver.observe(basketContainer, {
                childList: true,
                subtree: true,
            });
        }
    }

    function getItems(css) {
        let items = document.querySelectorAll(css);

        return items ? items : [];
    }

    function addFormToItems(items) {
        items.forEach(item => {
            addForm(item);
        });
    }

    async function addForm(item) {
        let productId = getItemProductId(item);
        if (!productId) return;

        let itemIsSevice = getItemParentProductId(item);
        if (itemIsSevice) return;

        const basketItemFormPlace = item.querySelector(basketItemFormPlaceSubCss);
        if (needAddForm(basketItemFormPlace)) {
            if (debug) console.log('attend add service form');

            let formHtml = await getFormAsHtml(productId);
            if (formHtml && needAddForm(basketItemFormPlace)) {
                if (debug) console.log('add service form');

                let div = document.createElement('div');
                div.innerHTML = formHtml;
                basketItemFormPlace.append(div);

                activateForm(basketItemFormPlace)
            }
        }
    }

    function getItemProductId(item) {
        // basket mode
        let productId = item.dataset.productId; // need data-product-id in item
        // detail mode
        if (!productId && mode == 'detail') {
            let itemId = item.id;
            let array = itemId.split('_');
            productId = array[array.length - 1];
        }

        return productId
    }

    function getItemParentProductId(item) {
        const parentProductId = item.dataset.serviceofproductid;

        return parentProductId !== undefined ? parentProductId : false;
    }

    function needAddForm(place) {
        if (!place) return false;
        const form = place.querySelector(formSubCss);

        return !form ? true : false;
    }

    async function getFormAsHtml(productId) {
        let servicesHtml = await getServicesAsHtml(productId);
        let formHtml = `<div class='${formClass}'>${servicesHtml}</div>`;

        return formHtml;
    }

    async function getServicesAsHtml(productId) {
        let html = '';
        let services = await getServices(productId);

        services.forEach(function(service) {
            let formattedPrice = formatPrice(service.price);

            html += `<div class='service-item'>
                <div class='service-item__button'>
                    <div class='btn-onoff js-buy-service' 
                        data-product-id='${productId}' 
                        data-service-id='${service.id}'
                        data-service-price='${service.price}'>
                    </div>
                </div>
                <div class='service-item__name'>${service.name}</div>
                <div class='service-item__price'>${formattedPrice}</div>
            </div>`;
        });

        return html;
    }

    async function getServices(productId) {
        let services = await request({
            action: 'getServices',
            productId: productId,
        });

        return services;
    }

    function activateForm(formPlace) {
        let buyButtons = formPlace.querySelectorAll('.js-buy-service');
        for (let button of buyButtons) {
            addBuyButtonHandlers(button);
            activateSelectedServices(button);
        }
    }

    function addBuyButtonHandlers(button) {
        button.addEventListener('click', switchBuyButton);
    }

    async function activateSelectedServices(button) {
        let productId = button.dataset.productId;
        let serviceId = button.dataset.serviceId;
        let exist = await checkInBasket(productId, serviceId);

        if (exist) {
            button.classList.add('active');
        }
    }

    function switchBuyButton(event) {
        let button = event.target;
        let productId = button.dataset.productId;
        let serviceId = button.dataset.serviceId;
        let servicePrice = button.dataset.servicePrice;

        if (button.classList.contains('active')) {
            delFromBasket(productId, serviceId, servicePrice);
        } else {
            addToBasket(productId, serviceId, servicePrice);
        }
        button.classList.toggle('active');
    }

    function formatPrice(price) {
        let formattedPrice = price.toLocaleString('ru-RU');
        formattedPrice += ' ₽';

        return formattedPrice;
    }

    // BASKET
    async function addToBasket(productId, serviceId, price) {
        let response = await request({
            action: 'addToBasket',
            productId: productId,
            serviceId: serviceId,
        });
        if (response.result = 'success') {
            recalcBasket();
            recalcMiniBasket(1, price);
        }
    }

    async function delFromBasket(productId, serviceId, price = 0) {
        let response = await request({
            action: 'delFromBasket',
            productId: productId,
            serviceId: serviceId,
        });
        if (response.result = 'success') {
            recalcBasket();
            if (price) recalcMiniBasket(-1, -price);
        }
    }

    async function checkInBasket(productId, serviceId) {
        let exist = false;
        let response = await request({
            action: 'checkInBasket',
            productId: productId,
            serviceId: serviceId,
        });
        if (response.result == 'exist') {
            exist = true;
        }

        return exist; 
    }

    async function delUnbound() {
        let response = await request({
            action: 'delUnbound',
        });
        if (response.result == 'recalc') {
            recalcBasket();
        }
    }

    async function recalcBasket() {
        if (!BX.Sale || !BX.Sale.BasketComponent) return;

        let param = {
            sessid: BX.bitrix_sessid(),
            site_id: BX.message('SITE_ID'),
            action_var: 'basketAction',
            select_props: 'NAME,DISCOUNT,PROPS,DELETE,DELAY,TYPE,PRICE,QUANTITY,SUM',
            offers_props: 'SIZES,COLOR_REF,SERVICEOFPRODUCTID',
            quantity_float: 'N',
            count_discount_4_all_quantity: 'Y',
            price_vat_show_value: 'Y',
            hide_coupon: 'Y',
            use_prepayment: 'N',
            basketAction: 'recalculate',
        };

        let result = await requestToSaleBasket(param);
        applyBasketResult(result);
    }

    function getBasketSum() {
        if (!BX.Sale || !BX.Sale.BasketComponent) return;

        let bc = BX.Sale.BasketComponent;

        return bc.result.allSum;
    }

    function applyBasketResult(result) {
        let bc = BX.Sale.BasketComponent;

        bc.actionPool.doProcessing(false);
        if (!BX.type.isPlainObject(result))
            return;
        bc.actionPool.setRefreshStatus(result.BASKET_REFRESHED);
        if (result.RESTORED_BASKET_ITEMS) {
            bc.restoreBasketItems(result.RESTORED_BASKET_ITEMS);
        }
        if (result.DELETED_BASKET_ITEMS) {
            bc.deleteBasketItems(result.DELETED_BASKET_ITEMS, bc.params.SHOW_RESTORE === 'Y');
        }
        if (result.MERGED_BASKET_ITEMS) {
            bc.deleteBasketItems(result.MERGED_BASKET_ITEMS, false, true);
        }

        bc.applyBasketResult(result.BASKET_DATA);
        bc.editBasketItems(bc.getItemsToEdit());
        bc.editTotal();
        //bc.applyPriceAnimation();
        bc.editWarnings();
        bc.actionPool.switchTimer();
    }

    // MINI BASKET
    function recalcMiniBasket(deltaQuantity, deltaSum) {
        let quantity = getMiniBasketQuantity();
        if (quantity !== false) {
            quantity += Number(deltaQuantity);
            setMiniBasketQuantity(quantity);
        }

        let sum = getMiniBasketSum();
        if (sum !== false) {
            sum += Number(deltaSum);
            setMiniBasketSum(sum);    
        }
    }

    function getMiniBasketQuantity() {
        let quantity = false;
        let quantityElement = document.querySelector('.basket.basket-count .js-basket-block > .count');
        if (quantityElement) {
            quantity = Number(quantityElement.innerHTML);
        }

        return quantity;
    }

    function getMiniBasketSum() {
        let sum = false;
        let sumElement = document.querySelector('.basket.basket-count .js-basket-block .prices');
        if (sumElement) {
            let value = sumElement.innerHTML;
            value = value.replace(' ', '', value);
            value = value.replace('&nbsp;', '', value);
            value = value.replace('₽', '', value);
            sum = Number(value);
        }

        return sum;
    }

    function setMiniBasketQuantity(quantity) {
        let quantityElements = document.querySelectorAll('.basket.basket-count .js-basket-block > .count');
        for (let quantityElement of quantityElements) {
            quantityElement.innerHTML = quantity;
        }
    }

    function setMiniBasketSum(sum) {
        let sumElements = document.querySelectorAll('.basket.basket-count .js-basket-block .prices');
        for (let sumElement of sumElements) {
            let formattedSum = formatPrice(sum);
            sumElement.innerHTML = formattedSum;
        }
    }

    // REQUESTS
    async function request(param) {
        let result = [];
        let response = await fetch(ajaxUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: JSON.stringify(param)
        });
        if (response.ok) {
            result = await response.json();
        } else {
            if (debug) console.error('request error');
        }

        return result;
    }

    async function requestToSaleBasket(param) {
        let result = false;
        let url = new URL(protocol+domain+'/bitrix/components/bitrix/sale.basket.basket/ajax.php');
        for(let paramElement in param) {
            url.searchParams.append(paramElement, param[paramElement]);
        }

        let response = await fetch("/bitrix/components/bitrix/sale.basket.basket/ajax.php", {
            headers: {
                "accept": "*/*",
                "accept-language": "ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7",
                "bx-ajax": "true",
                "content-type": "application/x-www-form-urlencoded",
            },
            "referrer": protocol+domain+"/basket/",
            "referrerPolicy": "no-referrer-when-downgrade",
            "body": url.search.replace('?', ''),
            "method": "POST",
            "mode": "cors",
            "credentials": "include",
        });
        if (response.ok) {
            result = await response.json();
        } else {
            if (debug) console.error('request error');
        }

        return result;
    }

    // INIT
    init();
    action();
    observer(basketContainerCss);
}

if (typeof window !== 'undefined') {
    document.addEventListener('DOMContentLoaded', wbs24BuyServices);
}

/* wbs24 - basket and order header */
class Wbs24RegionInHeader {
    init() {
        let template = this.getTemplate(document.location.pathname);
        if (template) {
            let region = this.getRegion();
            this.setRegionToHeader(region, template);
        }
    }

    getTemplate(path) {
        let template = '';

        if (path == '/basket/') template = 'Корзина - доставка в ';
        if (path == '/order/') template = 'Оформление заказа в ';

        return template;
    }

    getRegion() {
        let regionElement = this.getRegionElement();
        let region = regionElement ? regionElement.textContent : '';

        return region;
    }

    getRegionElement() {
        return document.querySelector('.region_wrapper .js_city_chooser span');
    }

    setRegionToHeader(region, template) {
        let html = 
            template 
            + ' <a href="#" class="call_region_form js-call-region-form">' + region + '</a>'
        ;
        let element = this.getHeaderElement();

        if (element) {
            element.innerHTML = html;
            this.addHeaderHandler(element);
        }
    }

    getHeaderElement() {
        let h1 = document.querySelector('h1#pagetitle');

        return h1;
    }

    addHeaderHandler(element) {
        let a = element.querySelector('.js-call-region-form');
        if (a) {
            a.addEventListener('click', (e) => {
                e.preventDefault();

                let regionElement = this.getRegionElement();
                if (regionElement) {
                    regionElement.click();
                }
            });
        }
    }   
}

if (typeof window !== 'undefined') {
    document.addEventListener('DOMContentLoaded', function() {
        let region = new Wbs24RegionInHeader();
        region.init();
    });
}

if (typeof window === 'undefined') module.exports = Wbs24RegionInHeader;

/* wbs24 - order helper */
class Wbs24OrderHelper {
    debug = true;

    cssOfcontainer = '#bx-soa-properties';
    cssOfInputs = '#bx-soa-properties input[name=ORDER_PROP_';
    checkboxId = 59;
    customerNameId = 1;
    customerPhoneId = 3;
    recipientNameId = 23;
    recipientPhoneId = 24;

    checkbox = null;
    nameOfСustomer = null;
    phoneOfСustomer = null;
    nameOfRecipient = null;
    phoneOfRecipient = null;

    init() {
        this.observer(this.cssOfcontainer);
    }

    observer(css) {
        let el = document.querySelector(css);
        if (el) {
            let elementObserver = new MutationObserver(mutationRecords => {
                if (this.debug) console.log('found mutation of ' + css);
        
                this.setCheckboxHandler();
            });
            elementObserver.observe(el, {
                childList: true,
                subtree: true,
            });
        }
    }

    setCheckboxHandler() {
        if (
            this.inputsInitialized()
            && this.checkbox.dataset['helper'] != 'Y'
        ) {
            this.checkbox.checked = false;
            this.checkbox.addEventListener('change', (event) => {
                let el = event.target;
                if (el.checked) {
                    this.deactivateInputsOfRecipient();
                } else {
                    this.activateInputsOfRecipient();
                }
            });
            this.checkbox.dataset['helper'] = 'Y';
        }
    }

    activateInputsOfRecipient() {
        if (this.inputsInitialized()) {
            this.setRecipientName('');
            this.setRecipientPhone('');
        }
    }

    deactivateInputsOfRecipient() {
        if (this.inputsInitialized()) {
            let name = this.nameOfСustomer.value;
            let phone = this.phoneOfСustomer.value;

            this.setRecipientName(name);
            this.setRecipientPhone(phone);
        }
        
    }

    setRecipientName(value) {
        this.nameOfRecipient.value = value;
        this.setReadonlyAttribute(this.nameOfRecipient, value);
    }

    setRecipientPhone(value) {
        this.phoneOfRecipient.value = value;
        this.setReadonlyAttribute(this.phoneOfRecipient, value);
    }

    setReadonlyAttribute(el, value) {
        if (value) {
            el.setAttribute('readonly', 'readonly');
            el.style.opacity = '0.8';
        } else {
            el.removeAttribute('readonly');
            el.style.opacity = '1';
        }
    }

    inputsInitialized() {
        let available = false;

        this.checkbox = document.querySelector(this.cssOfInputs + this.checkboxId + ']:last-child');
        this.nameOfСustomer = document.querySelector(this.cssOfInputs + this.customerNameId + ']');
        this.phoneOfСustomer = document.querySelector(this.cssOfInputs + this.customerPhoneId + ']');
        this.nameOfRecipient = document.querySelector(this.cssOfInputs + this.recipientNameId + ']');
        this.phoneOfRecipient = document.querySelector(this.cssOfInputs + this.recipientPhoneId + ']');

        if (
            this.checkbox
            && this.nameOfСustomer
            && this.phoneOfСustomer
            && this.nameOfRecipient
            && this.phoneOfRecipient
        ) {
            available = true;
        }

        return available;
    }
}

if (typeof window !== 'undefined') {
    document.addEventListener('DOMContentLoaded', function() {
        let helper = new Wbs24OrderHelper();
        helper.init();
    });
}

/* wbs24 - gallery slider */
class Wbs24GallerySlider {
    constructor() {
        this.debug = false;
        this.catalogContainerCss = '.catalog_block';
        this.mainPage = '.tab_slider_wrapp';
        this.currentURL = window.location.href;
        this.catalogURL = '/catalog/';
    }

    start() {
        this.createHandlers();
        
        if (this.currentURL.includes(this.catalogURL)) {
            this.observer(this.catalogContainerCss);
        } else {
            this.observer(this.mainPage);
        }
    }

    createHandlers() {
        let allGalleryWrappers = document.querySelectorAll('.section-gallery-wrapper');
        allGalleryWrappers.forEach(function(galleryWrapper, index) {
            if (!galleryWrapper.dataset.wbs24event) {
                let wbs24GallerySlider = new Wbs24GallerySlider();
                wbs24GallerySlider.createHandler(galleryWrapper);
            }
        });
    }

    createHandler(galleryWrapper) {
        if (galleryWrapper != undefined) {
            galleryWrapper.dataset.wbs24event = true;
            galleryWrapper.onmouseleave = function(event) {
                let galleryWrapperItems = galleryWrapper.querySelectorAll('.section-gallery-wrapper__item');
                galleryWrapperItems.forEach((galleryWrapperItem) => {
                    if (galleryWrapperItem.classList.contains('_active')) {
                        galleryWrapperItem.classList.remove('_active');
                    }
                });
                galleryWrapperItems[0].classList.add('_active');
            };
        }
    }

    observer(css) {
        let catalogElement = document.querySelector(css);
        if (catalogElement) {
            let catalogElementObserver = new MutationObserver(mutationRecords => {
                if (this.debug) console.log('catalogElementObserver found mutation');

                this.action();
            });
            catalogElementObserver.observe(catalogElement, {
                childList: true,
                subtree: true,
            });
        }
    }

    action() {
        this.createHandlers();
    }
}

if (typeof window !== 'undefined') {
    document.addEventListener("DOMContentLoaded", function(event) {
        let wbs24GallerySlider = new Wbs24GallerySlider();
        wbs24GallerySlider.start();
    });
}

/* wbs24 - stop bot field */
if (typeof window !== 'undefined') {
    document.addEventListener('DOMContentLoaded', function() {
        let stopBot = document.querySelector('.stop_bot input');

        if(!!stopBot) {
            stopBot.removeAttribute('required');
        }
    });
}

class Wbs24BasketDeliveryType {
    constructor() {
        this.currentURL = window.location.href;
        this.catalogURL = '/order/';
    }

    start() {
        if (this.currentURL.includes(this.catalogURL)) {
            this.createHandlers();
        }
    }

    createHandlers() {
       /*  let allDeliveryTypes = document.querySelectorAll('.delivery_options_checkbox');
        allDeliveryTypes.forEach(function(deliveryType, index) {
            let wbs24BasketDeliveryType = new Wbs24BasketDeliveryType();
            wbs24BasketDeliveryType.createHandler(deliveryType, allDeliveryTypes);
        }); */
    }

    createHandler(deliveryType, allDeliveryTypes) {
        if (deliveryType != undefined) {
            deliveryType.addEventListener('change', function(event) {

                let parent = deliveryType.closest('label');
                parent.classList.toggle('active');

                let dataTimeOptions = document.querySelector('.data_time_options');
                let fastDeliveryOptions = document.querySelector('.fast_delivery_options');

                let type =  deliveryType.dataset.type;

                allDeliveryTypes.forEach(deliveryType1 => {

                    if (deliveryType1 != deliveryType) {
                        deliveryType1.checked = false;

                        if (type == 'regular_delivery' || type == 'delivery_on_time') {
                            fastDeliveryOptions.style.display = 'none';
                        } else if (type == 'fast_delivery') {
                            dataTimeOptions.style.display = 'none';
                        }
                    }
                });

                let deliveryTypeProperty = document.querySelector('.delivery_type');

                if (event.target.checked) {

                    allDeliveryTypes.forEach(deliveryType1 => {
                        deliveryType1.disabled = false;
                    });

                    

                    event.target.disabled = true;

                    if (type == 'regular_delivery' || type == 'delivery_on_time') {
                        dataTimeOptions.style.display = 'block';
                    } else if (type == 'fast_delivery') {
                        fastDeliveryOptions.style.display = 'block';
                    }
                    //deliveryTypeProperty.value = ;
                } else {
                    fastDeliveryOptions.style.display = 'none';
                    dataTimeOptions.style.display = 'none';
                }
            });
        }
    }
}

class Wbs24BasketUkassa {
    constructor() {
        this.currentURL = window.location.href;
        this.catalogURL = '/order/';
    }

    start() {
        if (this.currentURL.includes(this.catalogURL)) {
            let paymentGatewayBtn = document.querySelector('.btn-success');
            if (paymentGatewayBtn) {
                paymentGatewayBtn.click();
            }
        }
    }
}

if (typeof window !== 'undefined') {
    document.addEventListener("DOMContentLoaded", function(event) {
        let BasketUkassa = new Wbs24BasketUkassa();
        BasketUkassa.start();
    });
}

// Анимация для скролла на странице 
document.addEventListener("DOMContentLoaded", function(event) {
    $('.wbs24__bouquet_care').on('click', function() {
        console.log('work');
        let href = $(this).attr('href');

        $('html, body').animate({
            scrollTop: $(href).offset().top - 100
        }, {
            duration: 500,   // по умолчанию «400» 
            easing: "linear" // по умолчанию «swing» 
        });

        return false;
    });
});

// страница корзины
document.addEventListener("DOMContentLoaded", function(event) {
    let currentURL = window.location.href;
    if (currentURL.includes('/basket/')) {
        let catalogElement = document.querySelector('#popup_iframe_wrapper_custom');
        if (catalogElement) {
            let catalogElementObserver = new MutationObserver(mutationRecords => {

                let wrapperCustom = document.querySelector('#popup_iframe_wrapper_custom');
                let stylesOfone = window.getComputedStyle(wrapperCustom);
                console.log('stylesOfone', stylesOfone.display);
                if (stylesOfone.display === 'flex') {
                    let headerWrap = document.querySelector('.wrapper1 .header_wrap');
                    headerWrap.style.zIndex = "3";  
                } else {
                    let content = document.querySelector('#content');
                    content.style.zIndex = "2";  
                }
            });
            catalogElementObserver.observe(catalogElement, {
                attributes: true,
        		attributeFilter: ['style'],
				childList: true,
                subtree: true,
            });
        }
    } 
});

(function () {
    'use strict';
    let loadedVideos = false;
    // Переменная для хранения таймера.
    let timerId;
    
 // Подключаем Метрику, если юзер начал скроллить.
 window.addEventListener('scroll', loadVideosScroll, {passive: true});
 
 // Подключаем Метрику, если юзер коснулся экрана.
 window.addEventListener('touchstart', loadVideos);
 
 // Подключаем Метрику, если юзер дернул мышкой.
 document.addEventListener('mouseenter', loadVideos);
 // Подключаем Метрику, если юзер кликнул мышкой.
 document.addEventListener('click', loadVideos);
    
    function loadVideosScroll( e ) {
        if (window.scrollY > 30) {
            loadVideos();
        }
    }
 
    function loadVideos( e ) {
        // Пишем отладку в консоль браузера.
        if (e && e.type) {
            console.log(e.type);
        } else {
            console.log('DOMContentLoaded');
        }
 
        // Если флаг загрузки Метрики отмечен,
        // то ничего более не делаем.
        if (loadedVideos) {
            return;
        }
 
        // загрузка frame для youtube
        const vkFasad = document.querySelector('.iframe__vkvideo_custom');
        if (vkFasad) {
               const iframeVk = document.createElement("iframe");
            iframeVk.src = vkFasad.getAttribute('data-src');
            iframeVk.width = "100%";
            iframeVk.height = "100%";
            iframeVk.style.setProperty("position", "absolute");
            iframeVk.style.setProperty("top", "0");
            iframeVk.style.setProperty("left", "0");
            iframeVk.frameBorder ="0";
            iframeVk.allow = "encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;";
            iframeVk.setAttribute('allowFullScreen', 'true');
            vkFasad.appendChild(iframeVk);
        }
 
        const youtubeFasad = document.querySelector('.iframe__youtube_custom');
        if (youtubeFasad) {
               const iframeYoutube = document.createElement("iframe");
            iframeYoutube.src = youtubeFasad.getAttribute('data-src');
            iframeYoutube.width = "100%";
            iframeYoutube.height = "100%";
            iframeYoutube.style.setProperty("position", "absolute");
            iframeYoutube.style.setProperty("top", "0");
            iframeYoutube.style.setProperty("left", "0");
            iframeYoutube.frameBorder ="0";
            iframeYoutube.allow = "encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;";
            iframeYoutube.setAttribute('allowFullScreen', 'true');
            youtubeFasad.appendChild(iframeYoutube);
        }
 
        loadedVideos = true;
 
        // Очищаем таймер, чтобы избежать лишних утечек памяти.
        clearTimeout(timerId);
 
        window.removeEventListener('scroll', loadVideosScroll);
        window.removeEventListener('touchstart', loadVideos);
        document.removeEventListener('mouseenter', loadVideos);
        document.removeEventListener('click', loadVideos);
    }
 })();