$(document).ready(function (){
    if (document.querySelector(".header").dataset['page'] === 'True' && getInfoAboutUser()[0] !== 'mobile' && getInfoAboutUser()[0] !== 'laptop'){
        renderContent()
    } else {
        let el = document.querySelector(".container_sections_buttons")
        if (el){
            replaceHrefOnOnclick()
            replace_select_language()
        }
    }
})

function getInfoAboutUser (){
    let user_type = ''
    if (screen.width <= 800){
        user_type = 'mobile'
    } else if (screen.width > 1024) {
        user_type = 'desktop'
    } else if (screen.width >= 800 && screen.width <= 1024) {
        user_type = 'laptop'
    }
    return [user_type,screen.width]
}

function sendWidthAjax () {
    let width = getInfoAboutUser()[1]
    let data = {
        'screen_width': width
    }
    return data
}

function renderContent (el=null) {
    let data = sendWidthAjax()
    if (!el) {
        let section_button = document.querySelector(".section_btn")
        data['section_url'] = section_button.dataset['url']
    } else {
        data['section_url'] = el.dataset['url']
    }
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/get_content_for_section/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        // contentType: false,
        enctype: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function(data){
            document.querySelector(".content").innerHTML = data.html
            replaceHrefOnOnclick()
            replace_select_language()
            if (el){
                history.pushState({
                        'section':data['section_url']
                    },
                    '',
                    `/section/${el.dataset['url']}/`
                )
            }
        },
        error: function (data){
            alert(data.errors)
        }
    });
}

function replace_select_language () {
    let select = document.querySelector(".name_language")
    if (getInfoAboutUser()[0] === 'mobile' || getInfoAboutUser()[0] === 'laptop'){
        select = document.querySelector(".name_language.curtain")
    }

    let lang_f_replace = ''
    if (window.location.href.includes('ru')){
        lang_f_replace = 'ru'
    } else {
        lang_f_replace = 'en'
    }
    select.innerHTML = lang_f_replace
}

function replaceHrefOnOnclick () {
    let elements = document.querySelectorAll('.section_btn')
    let i = 0
    elements.forEach(function (){
        let cur_el = elements[i]
        if (cur_el.attributes.hasOwnProperty("href")){
            cur_el.setAttribute("onclick",`renderContent(this)`)
            let str = cur_el.outerHTML
            let str_f_replace = cur_el.href
            str_f_replace = str_f_replace.replace(`${window.location.origin}`,'')
            str_f_replace = `href="${str_f_replace}"`
            str = str.replace(str_f_replace,'')
            cur_el.outerHTML = str
        }
        i++
    })
}

function faq_open_close () {
    let faq = document.querySelector(".faq_container")
    faq.classList.toggle("open")
    faq.classList.toggle("close")
}

function open_select_language () {
    let el = document.querySelector(".language_select")
    if (getInfoAboutUser()[0] === 'mobile' || getInfoAboutUser()[0] === 'laptop'){
        el = document.querySelector(".language_select.curtain")
    }
    el.classList.toggle("open")
    el.classList.toggle("close")
}

function select_language (el) {
    let txt = el.innerHTML
    let select = document.querySelector(".name_language")
    if (getInfoAboutUser()[0] === 'mobile' || getInfoAboutUser()[0] === 'laptop'){
        select = document.querySelector(".name_language.curtain")
    }
    select.innerHTML = txt
    let lang_f_replace = ''
    if (window.location.href.includes('ru')){
        lang_f_replace = 'ru'
    } else {
        lang_f_replace = 'en'
    }
    window.location.href = window.location.href.replace(`${lang_f_replace}`,txt.toLowerCase())
    open_select_language()
}


// curtain
function openCurtain (el) {
    let curtain = document.querySelector(".curtain")
    curtain.classList.toggle("open")
    curtain.classList.toggle("close")
    openOverlay()
}

function openOverlay () {
    let overlay = document.querySelector(".block_overlay")
    overlay.classList.toggle("show")
    overlay.classList.toggle("hide")
}