window.addEventListener('DOMContentLoaded', () => {
    const $url = document.querySelector('#url')
    const $type = document.querySelector('#type')
    const $label = document.querySelector('#label')
    const $secret = document.querySelector('#secret')
    const $issuer = document.querySelector('#issuer')
    const $dynamic = document.querySelector('#dynamic')

    $url.oninput = () => {
        const url = new URL($url.value)

        $type.value = decodeURIComponent(url.hostname || 'totp')
        $type.oninput = () => {
            url.hostname = encodeURIComponent($type.value)
            $url.value = url.href
        }

        $label.value = decodeURIComponent(url.pathname.replace(/^\//, '') || '')
        $label.oninput = () => {
            url.pathname = encodeURIComponent($label.value)
            $url.value = url.href
        }

        const onInput = ($input, key) => {
            $input.value = url.searchParams.get(key) || ''
            $input.oninput = () => {
                if ($input.value)
                    url.searchParams.set(key, $input.value || '')
                else
                    url.searchParams.delete(key)
                $url.value = url.href
            }
        }

        onInput($secret, 'secret')
        onInput($issuer, 'issuer')

        let dynamicCount = 0

        $dynamic.innerHTML = ''

        url.searchParams.keys().forEach(key => {
            switch (key) {
                case 'secret':
                case 'issuer':
                    break;

                default:
                    dynamicCount += 1
                    const id = `dynamic-${dynamicCount}`
                    const $label = document.createElement('label')
                    $label.for = id
                    $label.textContent = key
                    const $input = document.createElement('input')
                    $input.id = id
                    onInput($input, key)
                    const $div = document.createElement('div')
                    $div.appendChild($label)
                    $div.appendChild($input)
                    $dynamic.appendChild($div)
                    break;
            }
        })
    }
})