import { ELEMENT_KEY } from 'webdriver'
import type { ElementReference } from '@wdio/protocols'
import { getBrowserObject } from '@wdio/utils'
import type { ChainablePromiseElement, DragAndDropCoordinate, DragAndDropOptions } from '../../types.js'

/**
 *
 * Drag an item to a destination element or position.
 *
 * :::info
 *
 * The functionality of this command highly depends on the way drag and drop is
 * implemented in your app. If you experience issues please post your example
 * in [#4134](https://github.com/webdriverio/webdriverio/issues/4134).
 *
 * :::
 *
 * <example>
    :example.test.js
    it('should demonstrate the dragAndDrop command', async () => {
        const elem = $('#someElem')
        const target = $('#someTarget')

        // drag and drop to other element
        await elem.dragAndDrop(target)

        // drag and drop relative from current position
        await elem.dragAndDrop({ x: 100, y: 200 })
    })
 * </example>
 *
 * @alias element.dragAndDrop
 * @param {Element|DragAndDropCoordinate}   target            destination element or object with x and y properties
 * @param {DragAndDropOptions=}             options           dragAndDrop command options
 * @param {Number=}                         options.duration  how long the drag should take place
 */
export async function dragAndDrop (
    this: WebdriverIO.Element,
    target: WebdriverIO.Element | ChainablePromiseElement | Partial<DragAndDropCoordinate>,
    options: DragAndDropOptions = {}
) {
    const moveToCoordinates = target as DragAndDropCoordinate
    const moveToElement = await target as WebdriverIO.Element

    /**
     * fail if
     */
    if (
        /**
         * no target was specified
         */
        !moveToElement ||
        (
            /**
             * target is not from type element
             */
            moveToElement.constructor.name !== 'Element' &&
            /**
             * and is also not an object with x and y number parameters
             */
            (
                typeof moveToCoordinates.x !== 'number' ||
                typeof moveToCoordinates.y !== 'number'
            )
        )
    ) {
        throw new Error('command dragAndDrop requires an WebdriverIO Element or and object with "x" and "y" variables as first parameter')
    }

    const ACTION_BUTTON = 0 as const
    const browser = getBrowserObject(this)
    const defaultOptions = { duration: browser.isMobile ? 250 : 10 }
    const { duration } = { ...defaultOptions, ...options }

    /**
     * allow to specify an element or an x/y vector
     */
    const isMovingToElement = moveToElement.constructor.name === 'Element'

    const sourceRef: ElementReference = { [ELEMENT_KEY]: this[ELEMENT_KEY] }
    const targetRef: ElementReference = { [ELEMENT_KEY]: moveToElement[ELEMENT_KEY] }

    const origin = sourceRef
    const targetOrigin = isMovingToElement ? targetRef : 'pointer'

    const targetX = isMovingToElement ? 0 : moveToCoordinates.x
    const targetY = isMovingToElement ? 0 : moveToCoordinates.y

    /**
     * W3C way of handle the drag and drop action
     */
    return browser
        .action('pointer', {
            parameters: { pointerType: browser.isMobile ? 'touch' : 'mouse' }
        })
        .move({ duration: 0, origin, x: 0, y: 0 })
        .down({ button: ACTION_BUTTON })
        .pause(10)
        .move({ duration, origin: targetOrigin, x: targetX, y: targetY })
        .up({ button: ACTION_BUTTON })
        .perform()
}