import logger from '@wdio/logger'
import { getBrowserObject } from '@wdio/utils'
import { SHADOW_ELEMENT_KEY } from 'webdriver'

import { shadowFnFactory } from '../../scripts/shadowFnFactory.js'
import { getElements } from '../../utils/getElementObject.js'
import { enhanceElementsArray } from '../../utils/index.js'
import { findStrategy } from '../../utils/findStrategy.js'
import type { Selector } from '../../types.js'

const log = logger('webdriverio')

/**
 *
 * Access elements inside a given element's shadowRoot. If you are working
 * with lots of nested shadow roots, an alternative approach to `shadow$$`
 * is to use the [deep selector](https://webdriver.io/docs/selectors#deep-selectors).
 *
 * :::info
 *
 * WebdriverIO automatically pierces through shadow roots when using `$` or `$$` commands.
 * This command is only needed if you automate within an environment that doesn't
 * support WebDriver Bidi yet, e.g. mobile web testing with Appium.
 *
 * :::
 *
 * <example>
    :shadow$$.js
    it('should return elements inside a shadowRoot', async () => {
        const innerEl = await $('.input').shadow$$('#innerEl');
        console.log(await innerEl.getValue()); // outputs: 'test123'
    });
 * </example>
 *
 * @alias element.shadow$$
 * @param {String|Function} selector  selector or JS Function to fetch a certain element
 * @return {WebdriverIO.ElementArray}
 * @type utility
 *
 */
export async function shadow$$ (
    this: WebdriverIO.Element,
    selector: string
) {
    const browser = getBrowserObject(this)

    try {
        const shadowRoot = await browser.getElementShadowRoot(this.elementId)
        const { using, value } = findStrategy(selector as string, this.isW3C, this.isMobile)
        const res = await browser.findElementsFromShadowRoot(shadowRoot[SHADOW_ELEMENT_KEY], using, value)
        const elements = await getElements.call(this, selector as Selector, res, { isShadowElement: true })
        return enhanceElementsArray(elements, this, selector as Selector) as WebdriverIO.ElementArray
    } catch (err) {
        log.warn(
            `Failed to fetch element within shadow DOM using WebDriver command: ${(err as Error).message}!\n` +
            'Falling back to JavaScript shim.'
        )
        return await this.$$(shadowFnFactory(selector, true))
    }
}