class BlogItem {
    constructor() {
        this.object = {
            head: document.getElementsByTagName('head')[0],
            body: document.getElementsByTagName('body')[0],
            section: document.getElementById('main'),
            content: document.getElementsByClassName('fullscreenImg')[0],
            images: document.querySelectorAll('img:not([class])'),
            buttons: `<div class='closeFullscreenImage'>&#10005;</div><div class='navleft'>&#171;</div><div class='navright'>&#187;</div>`
        }
    }

    Init(x) {
        this.#Prism(x)
        new Menu().Init()
        new Footer().Init()
    }

    #EventListener(index) {
        const buttons = {
            close: document.getElementsByClassName('closeFullscreenImage')[0],
            left: document.getElementsByClassName('navleft')[0],
            right: document.getElementsByClassName('navright')[0]
        }

        buttons.close.addEventListener('click', () => {
            this.object.content.style.opacity = 0
            setTimeout(() => {
                this.object.content.innerHTML = ''
                this.object.content.style.zIndex = -9999
            }, '1000')
        })
        buttons.left.addEventListener('click', () => {
            if (index > 0) {
                this.#DrawImage(this.object.images[index - 1].src)
                this.#EventListener(index - 1)
            } else {
                this.#DrawImage(this.object.images[this.object.images.length - 1].src)
                this.#EventListener(this.object.images.length - 1)
            }
        })
        buttons.right.addEventListener('click', () => {
            if (index < this.object.images.length - 1) {
                this.#DrawImage(this.object.images[index + 1].src)
                this.#EventListener(index + 1)
            } else {
                this.#DrawImage(this.object.images[0].src)
                this.#EventListener(0)
            }
        })
    }
    #DrawImage(src) {
        try {
            this.object.content.innerHTML = `${this.object.buttons}<img src='${src}'/>`
        } catch (err) {
            console.error(err)
        }
    }
    #BlogItem() {
        this.object['content'] = document.getElementsByClassName('fullscreenImg')[0]
        this.object['images'] = document.querySelectorAll('img:not([class])')
        this.object['buttons'] = `
            <div class='closeFullscreenImage'>&#10005;</div>
            <div class='navleft'>&#171;</div>
            <div class='navright'>&#187;</div>
        `

        this.object.content.style.opacity = 0
        this.object.images.forEach((img, index) => {
            img.addEventListener('click', () => {
                this.#DrawImage(img.src)
                this.object.content.style.opacity = 1
                this.object.content.style.zIndex = 9999
                this.#EventListener(index)
            })
        })
    }
    #Prism(x) {
        this.#LoadBlogItem().then(output => {
            this.object.section.innerHTML = DOMPurify.sanitize(x, {
                ADD_TAGS: ['iframe'], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling']
            })
            new Loading().Stop()
            new Menu().ShowIcon()
            new Menu().Init()
            new Footer().Init()
            this.#BlogItem()
            this.#RemoveTag()
            window.scrollTo(0, 0)
        })
    }
    #RemoveTag() {
        this.object['images'] = document.querySelectorAll('img:not([class])')
        this.object.images.forEach((img, index) => {
            const p = img.parentElement
            if (p.tagName === 'P') p.replaceWith(img)
        })
    }
    async #LoadBlogItem() {
        const promises = ['prism.css', 'prism.js'].map(file => {
            return new Promise(res => {
                if (file.replace('prism.', '') === 'css') {
                    const link = document.createElement('link')
                    link.rel = 'stylesheet'
                    link.type = 'text/css'
                    link.href = `${window.location.origin}/css/${file}`
                    this.object.head.appendChild(link)
                    link.onload = res
                } else {
                    const script = document.createElement('script')
                    script.src = `${window.location.origin}/js/${file}`
                    this.object.body.appendChild(script)
                    script.onload = res
                }
            })
        })
        return Promise.all(promises)
    }
}