import store from '@/Store'
import Message from '@/Message';

export default function () {

    let initializedPath = false

    let componentIdsThatAreWritingToHistoryState = new Set

    LivewireStateManager.clearState()

    store.registerHook('component.initialized', component => {
        if (! component.effects.path) return

        // We are using setTimeout() to make sure all the components on the page have
        // loaded before we store anything in the history state (because the position
        // of a component on a page matters for generating its state signature).
        setTimeout(() => {
            let url = onlyChangeThePathAndQueryString(initializedPath ? undefined : component.effects.path)

            // Generate faux response.
            let response = {
                serverMemo: component.serverMemo,
                effects: component.effects,
            }

            normalizeResponse(response, component)

            LivewireStateManager.replaceState(url, response, component)

            componentIdsThatAreWritingToHistoryState.add(component.id)

            initializedPath = true
        })
    })

    store.registerHook('message.processed', (message, component) => {
        // Preventing a circular dependancy.
        if (message.replaying) return

        let { response } = message

        let effects = response.effects || {}

        normalizeResponse(response, component)

        if ('path' in effects && effects.path !== window.location.href) {
            let url = onlyChangeThePathAndQueryString(effects.path)

            LivewireStateManager.pushState(url, response, component)

            componentIdsThatAreWritingToHistoryState.add(component.id)
        } else {
            // If the current component has changed it's state, but hasn't written
            // anything new to the URL, we still need to update it's data in the
            // history state so that when a back button is hit, it is caught
            // up to the most recent known data state.
            if (componentIdsThatAreWritingToHistoryState.has(component.id)) {
                LivewireStateManager.replaceState(window.location.href, response, component)
            }
        }
    })

    window.addEventListener('popstate', event => {
        if (LivewireStateManager.missingState(event)) return

        LivewireStateManager.replayResponses(event, (response, component) => {
            let message = new Message(component, [])

            message.storeResponse(response)

            message.replaying = true

            component.handleResponse(message)
        })
    })

    function normalizeResponse(response, component) {
        // Add ALL properties as "dirty" so that when the back button is pressed,
        // they ALL are forced to refresh on the page (even if the HTML didn't change).
        response.effects.dirty = Object.keys(response.serverMemo.data)

        // Sometimes Livewire doesn't return html from the server to save on bandwidth.
        // So we need to set the HTML no matter what.
        response.effects.html = component.lastFreshHtml
    }

    function onlyChangeThePathAndQueryString(url) {
        if (! url) return

        let destination = new URL(url)

        let afterOrigin = destination.href.replace(destination.origin, '').replace(/\?$/, '')

        return window.location.origin + afterOrigin + window.location.hash
    }

    store.registerHook('element.updating', (from, to, component) => {
        // It looks like the element we are about to update is the root
        // element of the component. Let's store this knowledge to
        // reference after update in the "element.updated" hook.
        if (from.getAttribute('wire:id') === component.id) {
            component.lastKnownDomId = component.id
        }
    })

    store.registerHook('element.updated', (node, component) => {
        // If the element that was just updated was the root DOM element.
        if (component.lastKnownDomId) {
            // Let's check and see if the wire:id was the thing that changed.
            if (node.getAttribute('wire:id') !== component.lastKnownDomId) {
                // If so, we need to change this ID globally everwhere it's referenced.
                store.changeComponentId(component, node.getAttribute('wire:id'))
            }

            // Either way, we'll unset this for the next update.
            delete component.lastKnownDomId
        }

        // We have to update the component ID because we are replaying responses
        // from similar components but with completely different IDs. If didn't
        // update the component ID, the checksums would fail.
    })
}

let LivewireStateManager = {
    replaceState(url, response, component) {
        this.updateState('replaceState', url, response, component)
    },

    pushState(url, response, component) {
        this.updateState('pushState', url, response, component)
    },

    updateState(method, url, response, component) {
        let state = this.currentState()

        state.storeResponse(response, component)

        let stateArray = state.toStateArray()

        // Copy over existing history state if it's an object, so we don't overwrite it.
        let fullstateObject = Object.assign(history.state || {}, { livewire: stateArray })

        let capitalize = subject => subject.charAt(0).toUpperCase() + subject.slice(1)

        store.callHook('before'+capitalize(method), fullstateObject, url, component)

        try {
            if (decodeURI(url) != 'undefined') {
                url = decodeURI(url).replaceAll(' ', '+').replaceAll('\\', '%5C')
            }

            history[method](fullstateObject, '', url)
        } catch (error) {
            // Firefox has a 160kb limit to history state entries.
            // If that limit is reached, we'll instead put it in
            // sessionStorage and store a reference to it.
            if (error.name === 'NS_ERROR_ILLEGAL_VALUE') {
                let key = this.storeInSession(stateArray)

                fullstateObject.livewire = key

                history[method](fullstateObject, '', url)
            }
        }
    },

    replayResponses(event, callback) {
        if (! event.state.livewire) return

        let state = typeof event.state.livewire === 'string'
            ? new LivewireState(this.getFromSession(event.state.livewire))
            : new LivewireState(event.state.livewire)

        state.replayResponses(callback)
    },

    currentState() {
        if (! history.state) return new LivewireState
        if (! history.state.livewire) return new LivewireState

        let state = typeof history.state.livewire === 'string'
            ? new LivewireState(this.getFromSession(history.state.livewire))
            : new LivewireState(history.state.livewire)

        return state
    },

    missingState(event) {
        return ! (event.state && event.state.livewire)
    },

    clearState() {
        // This is to prevent exponentially increasing the size of our state on page refresh.
        if (window.history.state) window.history.state.livewire = (new LivewireState).toStateArray();
    },

    storeInSession(value) {
        let key = 'livewire:'+(new Date).getTime()

        let stringifiedValue = JSON.stringify(value)

        this.tryToStoreInSession(key, stringifiedValue)

        return key
    },

    tryToStoreInSession(key, value) {
        // sessionStorage has a max storage limit (usally 5MB).
        // If we meet that limit, we'll start removing entries
        // (oldest first), until there's enough space to store
        // the new one.
        try {
            sessionStorage.setItem(key, value)
        } catch (error) {
            // 22 is Chrome, 1-14 is other browsers.
            if (! [22, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].includes(error.code)) return

            let oldestTimestamp = Object.keys(sessionStorage)
                .map(key => Number(key.replace('livewire:', '')))
                .sort()
                .shift()

            if (! oldestTimestamp) return

            sessionStorage.removeItem('livewire:'+oldestTimestamp)

            this.tryToStoreInSession(key, value)
        }
    },

    getFromSession(key) {
        let item = sessionStorage.getItem(key)

        if (! item) return

        return JSON.parse(item)
    },
}

class LivewireState
{
    constructor(stateArray = []) { this.items = stateArray }

    toStateArray() { return this.items }

    pushItemInProperOrder(signature, response, component) {
        let targetItem = { signature, response }

        // First, we'll check if this signature already has an entry, if so, replace it.
        let existingIndex = this.items.findIndex(item => item.signature === signature)

        if (existingIndex !== -1) return this.items[existingIndex] = targetItem

        // If it doesn't already exist, we'll add it, but we MUST first see if any of its
        // parents components have entries, and insert it immediately before them.
        // This way, when we replay responses, we will always start with the most
        // inward components and go outwards.

        let closestParentId = store.getClosestParentId(component.id, this.componentIdsWithStoredResponses())

        if (! closestParentId) return this.items.unshift(targetItem)

        let closestParentIndex = this.items.findIndex(item => {
            let { originalComponentId } = this.parseSignature(item.signature)

            if (originalComponentId === closestParentId) return true
        })

        this.items.splice(closestParentIndex, 0, targetItem);
    }

    storeResponse(response, component) {
        let signature = this.getComponentNameBasedSignature(component)

        this.pushItemInProperOrder(signature, response, component)
    }

    replayResponses(callback) {
        this.items.forEach(({ signature, response }) => {
            let component = this.findComponentBySignature(signature)

            if (! component) return

            callback(response, component)
        })
    }

    // We can't just store component reponses by their id because
    // ids change on every refresh, so history state won't have
    // a component to apply it's changes to. Instead we must
    // generate a unique id based on the components name
    // and it's relative position amongst others with
    // the same name that are loaded on the page.
    getComponentNameBasedSignature(component) {
        let componentName = component.fingerprint.name
        let sameNamedComponents = store.getComponentsByName(componentName)
        let componentIndex = sameNamedComponents.indexOf(component)

        return `${component.id}:${componentName}:${componentIndex}`
    }

    findComponentBySignature(signature) {
        let { componentName, componentIndex } = this.parseSignature(signature)

        let sameNamedComponents = store.getComponentsByName(componentName)

        // If we found the component in the proper place, return it,
        // otherwise return the first one.
        return sameNamedComponents[componentIndex] || sameNamedComponents[0] || console.warn(`Livewire: couldn't find component on page: ${componentName}`)
    }

    parseSignature(signature) {
        let [originalComponentId, componentName, componentIndex] = signature.split(':')

        return { originalComponentId, componentName, componentIndex }
    }

    componentIdsWithStoredResponses() {
        return this.items.map(({ signature }) => {
            let { originalComponentId } = this.parseSignature(signature)

            return originalComponentId
        })
    }
}