import { webdriverMonad, wrapCommand } from '@wdio/utils'
import clone from 'lodash.clonedeep'
import { ELEMENT_KEY } from 'webdriver'
import { getBrowserObject } from '@wdio/utils'
import type { ElementReference } from '@wdio/protocols'

import { getPrototype as getWDIOPrototype, getElementFromResponse } from './index.js'
import { elementErrorHandler } from '../middlewares.js'
import * as browserCommands from '../commands/browser.js'
import type { Selector, AddCommandFn, ExtendedElementReference } from '../types.js'

interface GetElementProps {
    isReactElement?: boolean
    isShadowElement?: boolean
}

interface WebDriverErrorResponse {
    error: string,
    message: string
    stacktrace: string,
}

class WebDriverError extends Error {
    constructor(obj: Error | WebDriverErrorResponse) {

        const { name, stack } = obj as Error
        const { error, stacktrace } = obj as WebDriverErrorResponse

        super(error || name || '')
        Object.assign(this, {
            message: obj.message,
            stack: stacktrace || stack,
        })
    }
}

/**
 * transforms a findElement response into a WDIO element
 * @param  {string} selector  selector that was used to query the element
 * @param  {Object} res       findElement response
 * @return {Object}           WDIO element object
 */
export function getElement(
    this: WebdriverIO.Browser | WebdriverIO.Element,
    selector?: Selector,
    res?: ElementReference | ExtendedElementReference | Error,
    props: GetElementProps = { isReactElement: false, isShadowElement: false }
): WebdriverIO.Element {
    const browser = getBrowserObject(this)
    const browserCommandKeys = Object.keys(browserCommands)
    const propertiesObject: PropertyDescriptorMap = {
        /**
         * filter out browser commands from object
         */
        ...(Object.entries(clone(browser.__propertiesObject__)).reduce((commands, [name, descriptor]) => {
            if (!browserCommandKeys.includes(name)) {
                commands[name] = descriptor
            }
            return commands
        }, {} as Record<string, PropertyDescriptor>)),
        ...getWDIOPrototype('element'),
        scope: { value: 'element' }
    }

    propertiesObject.emit = { value: this.emit.bind(this) }
    const element = webdriverMonad(this.options, (client: WebdriverIO.Element) => {
        const elementId = getElementFromResponse(res as ElementReference)

        if (elementId) {
            /**
             * set elementId for easy access
             */
            client.elementId = elementId

            /**
             * set element id with proper key so element can be passed into execute commands
             */
            client[ELEMENT_KEY] = elementId

            /**
             * Attach locator if element was fetched with WebDriver Bidi.
             * This allows to later re-fetch the element within the same conditions.
             */
            if (res && this.isBidi && 'locator' in res) {
                client.locator = res.locator
            }
        } else {
            client.error = res as Error
        }

        if (selector) {
            client.selector = selector
        }
        client.parent = this
        client.isReactElement = props.isReactElement
        client.isShadowElement = props.isShadowElement

        return client
    }, propertiesObject)

    const elementInstance = element(this.sessionId as string, elementErrorHandler(wrapCommand))

    const origAddCommand = elementInstance.addCommand.bind(elementInstance)
    elementInstance.addCommand = (name: string, fn: Function) => {
        browser.__propertiesObject__[name] = { value: fn }
        origAddCommand(name, fn)
    }

    return elementInstance
}

/**
 * transforms a findElements response into an array of WDIO elements
 * @param  {string} selector  selector that was used to query the element
 * @param  {Object} res       findElements response
 * @return {Array}            array of WDIO elements
 */
export const getElements = function getElements(
    this: WebdriverIO.Browser | WebdriverIO.Element,
    selector: Selector | ElementReference[] | WebdriverIO.Element[],
    elemResponse: (ElementReference | ExtendedElementReference | Error | WebDriverError)[],
    props: GetElementProps = { isReactElement: false, isShadowElement: false }
): WebdriverIO.Element[] {
    const browser = getBrowserObject(this as WebdriverIO.Element)
    const browserCommandKeys = Object.keys(browserCommands)
    const propertiesObject: PropertyDescriptorMap = {
        /**
         * filter out browser commands from object
         */
        ...(Object.entries(clone(browser.__propertiesObject__)).reduce((commands, [name, descriptor]) => {
            if (!browserCommandKeys.includes(name)) {
                commands[name] = descriptor
            }
            return commands
        }, {} as Record<string, PropertyDescriptor>)),
        ...getWDIOPrototype('element')
    }

    if (elemResponse.length === 0) {
        return []
    }

    const elements = [elemResponse].flat(1).map((res: ElementReference | ExtendedElementReference | Element | Error | WebDriverError, i) => {
        /**
         * if we already deal with an element, just return it
         */
        if ((res as WebdriverIO.Element).selector && '$$' in res) {
            return res as WebdriverIO.Element
        }

        propertiesObject.scope = { value: 'element' }
        propertiesObject.emit = { value: this.emit.bind(this) }
        const element = webdriverMonad(this.options, (client: WebdriverIO.Element) => {
            const elementId = getElementFromResponse(res as ElementReference)

            if (elementId) {
                /**
                 * set elementId for easy access
                 */
                client.elementId = elementId

                /**
                 * set element id with proper key so element can be passed into execute commands
                 */
                client[ELEMENT_KEY] = elementId

                /**
                 * Attach locator if element was fetched with WebDriver Bidi.
                 * This allows to later re-fetch the element within the same conditions.
                 */
                if (res && this.isBidi && 'locator' in res) {
                    client.locator = res.locator
                }
            } else {
                res = res as WebDriverError | Error
                client.error = res instanceof Error ? res : new WebDriverError(res)
            }

            client.selector = Array.isArray(selector)
                ? (selector[i] as WebdriverIO.Element).selector
                : selector
            client.parent = this
            client.index = i
            client.isReactElement = props.isReactElement
            client.isShadowElement = props.isShadowElement

            return client
        }, propertiesObject)

        const elementInstance: WebdriverIO.Element = element((this as WebdriverIO.Browser).sessionId, elementErrorHandler(wrapCommand))

        const origAddCommand = elementInstance.addCommand.bind(elementInstance)
        elementInstance.addCommand = (name: string, fn: AddCommandFn) => {
            browser.__propertiesObject__[name] = { value: fn }
            origAddCommand(name, fn)
        }
        return elementInstance
    })

    return elements
}