import type { RectReturn } from '@wdio/protocols'

import { getElementRect } from '../../utils/index.js'

export type Size = Pick<RectReturn, 'width' | 'height'>

export function getSize (this: WebdriverIO.Element): Promise<Size>
export function getSize (this: WebdriverIO.Element, prop: keyof RectReturn): Promise<number>
export function getSize (this: WebdriverIO.Element, prop?: keyof RectReturn): Promise<Size & number>

/**
 *
 * Get the width and height for an DOM-element.
 *
 * <example>
    :getSize.js
    it('should demonstrate the getSize command', async () => {
        await browser.url('http://github.com')
        const logo = await $('.octicon-mark-github')

        const size = await logo.getSize()
        console.log(size) // outputs: { width: 32, height: 32 }

        const width = await logo.getSize('width')
        console.log(width) // outputs: 32

        const height = await logo.getSize('height')
        console.log(height) // outputs: 32
    })
 * </example>
 *
 * @alias element.getElementSize
 * @param {String=} prop     size to receive [optional] ("width" or "height")
 * @return {Object|Number}    requested element size (`{ width: <Number>, height: <Number> }`) or actual width/height as number if prop param is given
 * @type property
 *
 */
export async function getSize (
    this: WebdriverIO.Element,
    prop?: keyof RectReturn
): Promise<Size | number> {
    const rect = await getElementRect(this)

    if (prop && typeof rect[prop] === 'number') {
        return rect[prop] as number
    }

    return {
        width: rect.width,
        height: rect.height
    } as Size
}