import type { WaitForOptions } from '../../types.js'

interface WaitForDisplayedParams extends WaitForOptions {
    /**
     * `true` to check if the element is within the viewport. false by default.
     */
    withinViewport?: boolean
    /**
     * `true` to check if the element content-visibility property has (or inherits) the value auto,
     * and it is currently skipping its rendering. `true` by default.
     * @default true
     */
    contentVisibilityAuto?: boolean
    /**
     * `true` to check if the element opacity property has (or inherits) a value of 0. `true` by default.
     * @default true
     */
    opacityProperty?: boolean
    /**
     * `true` to check if the element is invisible due to the value of its visibility property. `true` by default.
     * @default true
     */
    visibilityProperty?: boolean
}

/**
 *
 * Wait for an element for the provided amount of milliseconds to be displayed or not displayed.
 *
 * :::info
 *
 * As opposed to other element commands WebdriverIO will not wait for the element to exist to execute
 * this command.
 *
 * :::
 *
 * @alias element.waitForDisplayed
 * @param {WaitForOptions=}  options                waitForDisplayed options (optional)
 * @param {Number=}          options.timeout        time in ms (default set based on [`waitforTimeout`](/docs/configuration#waitfortimeout) config value)
 * @param {Boolean=}         options.reverse        if true it waits for the opposite (default: false)
 * @param {String=}          options.timeoutMsg     if exists it overrides the default error message
 * @param {Number=}          options.interval       interval between checks (default: `waitforInterval`)
 * @param {Boolean=}         options.withinViewport set to `true` to wait until element is displayed within viewport (default: `false`)
 * @param {Boolean=}         options.contentVisibilityAuto set to `true` to check if the element content-visibility property has (or inherits) the value auto, and it is currently skipping its rendering. `true` by default.
 * @param {Boolean=}         options.opacityProperty set to `true` to check if the element opacity property has (or inherits) a value of 0. `true` by default.
 * @param {Boolean=}         options.visibilityProperty set to `true` to check if the element is invisible due to the value of its visibility property. `true` by default.
 * @return {Boolean} true    if element is displayed (or doesn't if flag is set)
 * @uses utility/waitUntil, state/isDisplayed
 * @example https://github.com/webdriverio/example-recipes/blob/0bfb2b8d212b627a2659b10f4449184b657e1d59/waitForDisplayed/index.html#L3-L8
 * @example https://github.com/webdriverio/example-recipes/blob/9ac16b4d4cf4bc8ec87f6369439a2d0bcaae4483/waitForDisplayed/waitForDisplayedExample.js#L6-L14
 * @type utility
 */
export function waitForDisplayed (
    this: WebdriverIO.Element,
    {
        timeout = this.options.waitforTimeout,
        interval = this.options.waitforInterval,
        reverse = false,
        withinViewport = false,
        contentVisibilityAuto = true,
        opacityProperty = true,
        visibilityProperty = true,
        timeoutMsg = `element ("${this.selector}") still ${reverse ? '' : 'not '}displayed${withinViewport ? ' within viewport' : ''} after ${timeout}ms`,
    }: WaitForDisplayedParams = {}
) {

    return this.waitUntil(
        async () => reverse !== await this.isDisplayed({ withinViewport, contentVisibilityAuto, opacityProperty, visibilityProperty }),
        { timeout, interval, timeoutMsg }
    )
}