function createHintSequences(n) {
    let hints = 'asdfghjklzxcvbnmqwertyuiop'.split('')
    while (hints.length < n)
        hints = hints.slice(1).concat(hints.map(h => hints[0] + h))
    return hints
}

function createHintElement(rect, innerHTML) {
    const hintElement = document.createElement('span')
    Object.assign(hintElement.style, {
        position: 'absolute',
        left: `${window.scrollX + rect.left}px`,
        top: `${window.scrollY + rect.top}px`,
        zIndex: 10000,
        color: '#302505',
        backgroundColor: '#ffd76e',
        boxShadow: '2px 2px 1px rgba(0,0,0,0.25)',
        padding: '2px',
        fontSize: '8pt',
        fontWeight: '500',
        textTransform: 'uppercase',
        border: '1px solid #ad810c',
        borderRadius: '2px',
        textAlign: 'center',
    })
    hintElement.innerHTML = innerHTML
    document.body.appendChild(hintElement)
    return hintElement
}

function getTargetElements() {
    return Array.from(document.body.querySelectorAll([
        'a',
        'button',
        'textarea',
        'select',
        'input:not([type=hidden])',
        '[contenteditable=true]',
        '[role=link]',
        '[role=button]',
        '[role=checkbox]',
        '[role=textbox]',
    ].join(','))).filter(element => {
        const rect = element.getBoundingClientRect()
        return rect.height && rect.width &&
            window.scrollY + rect.bottom >= window.scrollY &&
            window.scrollY + rect.top <= window.scrollY + window.innerHeight
    })
}

function startHintMode(isNewTab) {
    const targetElements = getTargetElements()
    const hintSequences = createHintSequences(targetElements.length)
    const hintElements = targetElements.map((targetElement, i) =>
        createHintElement(targetElement.getBoundingClientRect(), hintSequences[i]))
    const input = document.createElement('input')
    input.placeholder = 'Type a sequence'
    Object.assign(input.style, {position: 'fixed', left: 0, bottom: 0})
    input.addEventListener('blur', () => {
        document.body.removeChild(input)
        for (const hintElement of hintElements)
            document.body.removeChild(hintElement)
    })
    input.addEventListener('input', () => {
        for (let i = 0; i < hintElements.length; i++) {
            if (hintSequences[i] === input.value) {
                input.blur()
                if (isNewTab && targetElements[i].href) {
                    window.open(targetElements[i].href)
                } else {
                    targetElements[i].focus()
                    targetElements[i].click()
                }
            } else if (hintSequences[i].startsWith(input.value)) {
                hintElements[i].style.display = 'block'
                hintElements[i].innerHTML = hintSequences[i].slice(input.value.length)
            } else {
                hintElements[i].style.display = 'none'
            }
        }
    })
    document.body.appendChild(input)
    input.focus()
}

window.addEventListener('keydown', e => {
    if (window.getSelection().type === 'None') {
        if (!e.ctrlKey && e.key.toLowerCase() === 'f') {
            e.preventDefault()
            startHintMode(e.shiftKey)
        }
    } else if (e.key === 'Escape') {
        e.target.blur()
    }
})