// footer_note.js
const footNotePopover = document.querySelector('#foot_note_popover')
const footNoteContainer = footNotePopover.querySelector('.reader_footerNote_container')
const footNoteText = footNotePopover.querySelector('.reader_footerNote_text')
document.querySelectorAll('.js_readerFooterNote').forEach(el => {
    el.addEventListener('click', (evt) => {
        openFootNote(evt.target)
    })
})
footNotePopover.querySelector('.reader_footerNote_mask').addEventListener('click', () => {
    closeFootNote()
})
document.addEventListener('scroll', () => {
    closeFootNote()
}, {passive: true})

function openFootNote(target) {
    footNotePopover.style.display = 'block'
    footNoteText.innerText = target.getAttribute('data-wr-footernote')

    // 定位
    const rect = target.getBoundingClientRect()
    const {left, top, width, bottom} = rect
    const {width: containerWidth, height: containerHeight} = footNoteContainer.getBoundingClientRect()

    let popoverLeft = left + (width/2) - (containerWidth/2)
    if (popoverLeft < 0) {
        popoverLeft = 10
    }
    if (popoverLeft + containerWidth > window.innerWidth) {
        popoverLeft = window.innerWidth - containerWidth - 30
    }
    footNoteContainer.style.left = popoverLeft + 'px'

    const afterOffset = left + (width/2) - popoverLeft

    let inlineStyle = document.querySelector('#__fix_after_inline_style__')
    if (!inlineStyle) {
        inlineStyle = document.createElement('style')
        inlineStyle.id = '__fix_after_inline_style__'
        document.head.appendChild(inlineStyle)
    }

    inlineStyle.innerHTML = `.reader_footerNote_container:after{left:${afterOffset}px}`

    if (top > window.innerHeight / 2) {
        // 脚注在页面的下半部分，popover需要显示在上面
        footNoteContainer.style.top = top - 10 - containerHeight + 'px'
        footNoteContainer.classList.remove('reader_footerNote_container_Top')
    } else {
        // 脚注在页面的上半部分，popover需要显示在下面
        footNoteContainer.style.top = bottom + 10 + 'px'
        footNoteContainer.classList.add('reader_footerNote_container_Top')
    }
}
function closeFootNote() {
    footNotePopover.style.display = 'none'
}

document.querySelector('#back_top').addEventListener('click', () => {
    document.querySelector('#top').scrollIntoView({behavior: 'smooth'})
})