class Init {
    constructor() {
        this.object = {}
        this.settings = {
            scroll: 0
        }
        this.html = {}
    }

    GetSettings() {return this.settings}
    async Start() {
        this.fetch = `${window.location.pathname}?page=index`

        await fetch(this.fetch, {
            method: 'GET',
            headers: new Headers({
                'Content-Type': 'application/json'
            })
        })
            .then(res => res.json())
            .then(output => {
                this.output = output
                this.object.head = document.getElementsByTagName('head')[0]
                this.object.body = document.getElementsByTagName('body')[0]
                this.object.header = document.getElementsByTagName('header')[0]
                this.object.main = document.getElementsByTagName('main')[0]
                this.object.footer = document.getElementsByTagName('footer')[0]
                
                this.object.header.innerHTML += output.html.header
                this.object.main.innerHTML = output.html.main
                this.object.footer.innerHTML += output.html.footer
                this.object.nav = document.getElementById('header')
                this.object.nav.style.opacity = 0

                this.#LoadCSS(output.css).then(() => {
                    this.output.js.map(file => {
                        const script = document.createElement('script')
                        script.src = `${window.location.origin}/js/${file}`
                        this.object.body.appendChild(script)
                    })
                })
                this.#Scroll()
            })
    }

    #LoadElements() {
        setTimeout(() => {
            this.object.nav.style.opacity = 1
        }, 750)
    }

    async Startup(data) {
        const promise = new Promise((res, rej) => {
            const map = new Map()

            try {
                data.Stop()
                map.set('status', 'success')
                map.set('msg', 'success')
                this.#LoadElements()
                res(map)
            } catch (err) {
                map.set('status', 'error')
                map.set('msg', err)
                // ! Dev mode
                rej(map)
            }
        })
        return await promise
    }



    #Scroll() {window.addEventListener('scroll', () => this.settings.scroll = window.scrollY)}
    async #Error() {
        this.fetch = `${window.location.pathname}?page=index`;
        await fetch(this.fetch, {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            })
        })
            .then(res => console.log(res))
    }
    async #LoadCSS(files) {
        const promises = files.map(file => {
            return new Promise(res => {
                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
            })
        })
        return Promise.all(promises)
    }
}

const app = new Init()
app.Start()