let site_url = extractHostname('https://magazin-otzyvov.ru/');

function extractHostname(url) {
    let hostname;

    if (url.indexOf("//") > -1) {
        hostname = url.split('/')[2];
    } else {
        hostname = url.split('/')[0];
    }

    hostname = hostname.split(':')[0];
    hostname = hostname.split('?')[0];

    return hostname;
}



if (site_url === window.location.hostname) {

    
    let shown = false;
    let was_shown = false;

    // Create stylesheet
    let stylesheet = document.createElement('link');
    stylesheet.type = "text/css";
    stylesheet.rel = "stylesheet";
    stylesheet.href = "https://app.reviewidget.ru/public/widget/style.css?v=" + '4c2793fb02a73ba2db0a25d4a2b7bead';
    document.head.appendChild(stylesheet);

    //Create new button style
    let stylesheet_new = document.createElement('link');
    stylesheet_new.type = "text/css";
    stylesheet_new.rel = "stylesheet";
    stylesheet_new.href = "https://app.reviewidget.ru/public/widget/css/new_button.css";
    document.head.appendChild(stylesheet_new);

    //Create internal style
    let internal_style = document.createElement('style');
    internal_style.innerHTML = `#nas_widget_button {
    padding-left: 20px;
    left: 0;
    font-family: sans-serif;
}

#nas_widget_button input[type="text"] {
    font-family: sans-serif;
}

#nas_widget {
    left: 30px;
}
`;
    document.head.appendChild(internal_style);
    ``
    // Create widget
    let widget_window = document.createElement('div');
    widget_window.id = "nas_widget";
    widget_window.innerHTML = `<iframe
        src="https://app.reviewidget.ru/widget_template/135"
        frameborder="0"
        id="nas_widget_frame">
</iframe>
`;
    document.body.appendChild(widget_window);


    // Create button
    let widget_button = document.createElement('div');
    widget_button.id = "nas_widget_button";
    widget_button.innerHTML = `<div class="button_main white_theme">
    <div class="close_quotes button_closes">Закрыть</div>
    <div class="quote_top flex_row end">
        <div class="face">
            <img src="https://app.reviewidget.ru/public/uploads/button_pictures/0a48f297ed1370e575bfbc8734fb41f6.jpg"/>
        </div>
        <div class="quote">
            <div class="button_row">
                <div >
                    <span>Magazin-Otzyvov.ru</span><br>
                </div>

                                    <div >
                        <div class="rating_selector inline">
                                                            <label for="rating_current_1" class="checkbox_stars"></label>
                                <input id="rating_current_1" type="radio" name="rating_current"
                                       value="1" >
                                                            <label for="rating_current_2" class="checkbox_stars"></label>
                                <input id="rating_current_2" type="radio" name="rating_current"
                                       value="2" >
                                                            <label for="rating_current_3" class="checkbox_stars"></label>
                                <input id="rating_current_3" type="radio" name="rating_current"
                                       value="3" >
                                                            <label for="rating_current_4" class="checkbox_stars"></label>
                                <input id="rating_current_4" type="radio" name="rating_current"
                                       value="4" >
                                                            <label for="rating_current_5" class="checkbox_stars"></label>
                                <input id="rating_current_5" type="radio" name="rating_current"
                                       value="5" checked>
                                                    </div>
                        <span class='rating_s'>4.9</span>
                        <span class='rating_delenie'>/</span>
                        <span class='rating_s_count'>65 отзывов</span>
                    </div>
                
            </div>

            <div class="hello">Оставьте свой отзыв о нашем сайте ;)</div>
        </div>
    </div>

    <div class="form flex_row">
        <input type="text" placeholder="Написать отзыв">
        <div class="send_image">
            <img src="https://app.reviewidget.ru/public/images/next.png" class="widget_btns">
        </div>
    </div>
</div>`;
    document.body.appendChild(widget_button);

    // Show the message on hover
    let message = document.querySelector('#nas_widget_button .quote_top');
    document.querySelector('#nas_widget_button').addEventListener('mouseenter', function () {
        let close_button = document.querySelector('#nas_widget_button .close_quotes');
        message.style.display = 'flex';
        setTimeout(function () {
            message.style.opacity = '1';
        }, 200);
        close_button.style.display = 'inline-block';
        setTimeout(function () {
            close_button.style.opacity = '1';
        }, 600);
    });
    document.querySelector('#nas_widget_button').addEventListener('mouseleave', function () {
        let close_button = document.querySelector('#nas_widget_button .close_quotes');
        close_button.style.transition = 'all 0.5s ease-out';
        setTimeout(function () {
            close_button.style.opacity = '0';
        }, 300);
    });

    
    // Show widget event
    document.querySelectorAll('#nas_widget_button .quote_top, #nas_widget_button .send_image, #nas_widget_button .second_quote')
        .forEach(function (elem) {
            elem.addEventListener('click', function (elem) {
                if (!shown) {

                    if (elem.target.classList.contains('send_image') ||
                        elem.target.parentNode.classList.contains('send_image') ||
                        elem.target.parentNode.parentNode.classList.contains('send_image')
                    ) {
                        let review_text = document.querySelector('#nas_widget_button .form input[type="text"]').value;
                        document.querySelector('#nas_widget iframe').contentWindow.postMessage({message: review_text}, '*');
                    }

                    showWidget();

                }
                elem.stopPropagation();
            });
        });
    // End show widget event

        setTimeout(function () {
        showWidget();
    }, 10000);
    
    // Show widget function
    function showWidget() {
        was_shown = true;
        widget_window.style.display = 'block';

        widget_button.style.opacity = '0';

        setTimeout(function () {
            widget_window.style.marginTop = '-315px';
            widget_window.style.opacity = '1';
        }, 200);

        setTimeout(function () {
            widget_button.style.display = 'none';
            shown = true;
            hideQuotes();
        }, 1500);
    }

    // END Show widget function

    // Hide widget
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelector('body').onclick = function () {
            if (shown) {
                widget_window.style.opacity = '0';
                widget_window.style.marginTop = '-330px';

                widget_button.style.display = 'block';

                setTimeout(function () {
                    widget_window.style.display = 'none';
                    widget_button.style.opacity = '1';
                    shown = false;
                }, 1000);
            }
        }
    });
    // End hide widget

    // Hide message by click in frame
    var eventMethod = window.addEventListener
        ? "addEventListener"
        : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod === "attachEvent"
        ? "onmessage"
        : "message";

    eventer(messageEvent, function (e) {

        if (e.data === "myevent" || e.message === "myevent") {
            if (shown) {
                widget_window.style.opacity = '0';
                widget_window.style.marginTop = '-330px';

                widget_button.style.display = 'block';

                setTimeout(function () {
                    widget_window.style.display = 'none';
                    widget_button.style.opacity = '1';
                    shown = false;
                }, 1000);
            }
        }

    });

    // END hide message by click in frame
    function hideQuotes() {
        let message = document.querySelector('#nas_widget_button .quote_top');
        let close_button = document.querySelector('#nas_widget_button .close_quotes');
        message.style.opacity = '0';
        close_button.style.opacity = '0';
        setTimeout(function () {
            message.style.opacity = '0';
            close_button.style.opacity = '0';
        }, 2500);
    }

    
    }
   

document.addEventListener('DOMContentLoaded', function () {

    document.querySelector('#nas_widget_button .close_quotes').addEventListener('click', function (event) {
        hideQuotes();
        event.stopPropagation();
    });

    function hideQuotes() {
        let message = document.querySelector('#nas_widget_button .quote_top');
        let close_button = document.querySelector('#nas_widget_button .close_quotes');
        message.style.opacity = '0';
        close_button.style.opacity = '0';
        setTimeout(function () {
            message.style.opacity = '0';
            close_button.style.opacity = '0';
        }, 2500);
    }
});