/**
 * get HTML of all shadow roots
 *
 * @param  {string}  element               element to get HTML from
 * @param  {Boolean} includeSelectorTag    if true, selector tag gets included (uses outerHTML)
 * @param  {Object}  shadowElementIdsFound list of shadow root ids we want to look up in the next iteration
 * @return {Object}                        html source and list of shadow root ids found
 */
export default function getHTMLShadow (
    element: HTMLElement | ShadowRoot,
    includeSelectorTag: boolean,
    shadowElementIds: [string, HTMLElement, HTMLElement | undefined][] = []
) {
    shadowElementIds.map(([id, elem]) => {
        /**
         * if we don't have a shadow root (e.g. most likely to be the root document node)
         */
        if (typeof elem.setAttribute !== 'function') {
            return
        }

        elem.setAttribute('data-wdio-shadow-id', id)
    })

    const shadowElementHTML = shadowElementIds.map(([id, elem, shadow]) => {
        /**
         * if we don't have a shadow root (e.g. most likely to be the root document node)
         * we just get the html of the element
         */
        if (!shadow) {
            const html = elem[includeSelectorTag ? 'outerHTML' : 'innerHTML']
            return { id, html }
        }

        /**
         * otherwise, we look up the registered shadow styles and html
         */
        const styles = Array.from((shadow as unknown as ShadowRoot).adoptedStyleSheets || [])
            .map(({ cssRules }) => Array.from(cssRules))
            .flat()
            .map(({ cssText }) => cssText)

        const html = shadow.innerHTML
        return { id, html, styles }
    })

    return {
        html: (element as HTMLElement)[includeSelectorTag ? 'outerHTML' : 'innerHTML'],
        shadowElementHTML
    }
}