const main = {
    body: document.getElementById('main'),
    url: window.location.href
}

const getPage = async () => {
    const object = {
        session: document.cookie,
        url: window.location.href
    }
    await fetch('/', {
        method: 'post',
        body: JSON.stringify(object),
        headers: new Headers({
            'Content-Type': 'application/json'
        })
    })
    .then(response => response.text())
    .then(text => main.body.innerHTML = DOMPurify.sanitize(text))
}

// ! Loading screen
const loading = () => {}

// ! Add event listener and loading screen
const init = () => {
    loading()
    getPage().then(output => {
        eventListener()
    })
}
init()

// ! Menu
const openMenu = (menuList, menuIcon, closeButton, list) => {
    menuIcon.style.opacity = 0
    setTimeout(() => {
        menuList.style.display = 'flex'
        menuList.style.zindex = 999
        setTimeout(() => {
            menuList.style.opacity = 0.9
        }, '250')
    }, '250')
}
const closeMenu = (menuList, menuIcon, closeButton, list) => {
    //closeButton.style.fontSize = '15rem'
    menuList.style.opacity = 0
    setTimeout(() => {
        menuList.style.display = 'none'
        menuList.style.zIndex = -9999
        setTimeout(() => {
            menuIcon.style.opacity = 1
        }, '250')
    }, '500')
}

// Blog
const blogButtonList = document.getElementsByClassName('bloglistbutton')

const getUrl = () => {
    if (window.location.href.endsWith('/')) {
        return `${window.location.href}item`
    } else {
        return `${window.location.href}/item`
    }
}

const getBlog = async (x) => {
    const object = {
        session: document.cookie,
        url: getUrl(),
        value: x
    }
    await fetch('/blog/item', {
        method: 'post',
        body: JSON.stringify(object),
        headers: new Headers({
            'Content-Type': 'application/json'
        })
    })
    .then(response => response.text())
    .then(text => {
        const prism = new Promise((res, rej) => {
            const script = document.createElement('script')
            script.src = `${window.location.origin}/js/prism.js`
            document.head.appendChild(script)
            res('success')
        })
        prism.then(output => {
            main.body.innerHTML = DOMPurify.sanitize(text)
            eventListener()
            window.scrollTo(0, 0)
        })
    })
}

const eventListener = () => {
    const menuList = document.getElementById('menu-list')
    const menuIcon = document.getElementById('menu-icon')
    const closeButton = document.getElementsByClassName('close')
    const list = document.getElementsByClassName('list')
    const readblogs = document.getElementsByClassName('index-readblogs')
    const about = document.getElementById('index-about')
    const websites = {
        helpinghands: document.getElementById('helpinghands'),
        goodhandhauling: document.getElementById('goodhandhauling')
    }

    menuIcon.addEventListener('click', () => openMenu(menuList, menuIcon, closeButton, list))
    closeButton[0].addEventListener('click', () => closeMenu(menuList, menuIcon, closeButton, list))
    try{
        for (let i = 0; i < readblogs.length; i++) readblogs[i].addEventListener('click', () => window.location.href = '/blog')
        about.addEventListener('click', () => window.location.href = '/about')
        websites.helpinghands.addEventListener('click', () => window.location.href = 'https://helpinghandsadultcare.org/')
        websites.goodhandhauling.addEventListener('click', () => window.location.href = 'https://goodhandhauling.com/')

    } catch (err) {}
    for (let i = 0; i < list.length; i++) list[i].addEventListener('click', () => closeMenu(menuList, menuIcon, closeButton, list))
    for (let i = 0; i < blogButtonList.length; i++) blogButtonList[i].addEventListener('click', () => getBlog(blogButtonList[i].value))
}