// Hooks added here have a bridge allowing communication between the BEX Content Script and the Quasar Application.

const
iFrame = document.createElement('iframe'),
defaultFrameHeight = '0px'

/**
* Set the height of our iFrame housing our BEX
* @param height
*/
const setIFrameHeight = height => {
iFrame.height = height
}

/**
* Reset the iFrame to it's default height e.g The height of the top bar.
*/
const resetIFrameHeight = () => {
setIFrameHeight(defaultFrameHeight)
}

let Bridge = null
export default function attachActivatedContentHooks (window, chrome, bridge) {
/**
* When the drawer is toggled set the iFrame height to take the whole page.
* Reset when the drawer is closed.
*/
bridge.on('bex.toggle.iframe', event => {
const payload = event.data
if (payload.open) {
setIFrameHeight('100%')
} else {
resetIFrameHeight()
}
bridge.send(event.eventResponseKey)
})

Bridge = bridge
}

function addElWithClass (tag, className, container) {
const item = document.createElement(tag)
item.className = className
container.append(item)
return item
}

/**
* The code below will get everything going. Initialise the iFrame with defaults and add it to the page.
* @type {string}
*/
iFrame.id = 'bex-app-iframe'
iFrame.width = '100%'
resetIFrameHeight()

// Assign some styling so it looks seamless
Object.assign(iFrame.style, {
position: 'fixed',
top: '0',
right: '0',
bottom: '0',
left: '0',
border: '0',
zIndex: '2147483001', // Yes this is daft. Need to this to get over the Booksprout Messenger button
overflow: 'visible'
})

;(function () {
// When the page loads, insert our browser extension code.
iFrame.src = chrome.runtime.getURL(`www/index.html`)
document.body.prepend(iFrame)

const elements = document.querySelectorAll('.rc')
for (let element of elements) {
const container = addElWithClass('div', 'bex-add-todo__container', element)
const addTodo = addElWithClass('button', 'bex-btn', container)
addTodo.innerHTML = '+ Todo'

const clickFn = () => {
Bridge.send('bex.add.todo', {
text: element.querySelector('.r a h3').innerText,
link: element.querySelector('.r a').href
})
}

addTodo.addEventListener('click', clickFn)
}
})()