import type { PlayAttributes } from '@/test/types'
import { within } from 'storybook/test'
import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
import { expect } from '@/test/expect'
import { sleep } from '@/test/sleep'

export async function defaultTest({ canvasElement, args }: PlayAttributes) {
    // native
    if (args.native) {
        await selectDefaultTest({ canvasElement, args })
        return
    }

    const { getOptionValue } = useOptions(args)

    const element = await within(canvasElement).findByTestId('element')
    const value = await within(canvasElement).findByTestId('value')
    const dropdown = element.getElementsByClassName(
        'vv-dropdown',
    )[0] as HTMLElement
    const dropdownFirstItem = dropdown.querySelectorAll(
        'div[role="option"]',
    )[0] as HTMLElement
    const dropdownSecondItem = dropdown.querySelectorAll(
        'div[role="option"]',
    )[1] as HTMLElement
    const hint = element.getElementsByClassName('vv-select__hint')[0]

    // disabled
    if (args.disabled) {
        await expect(element).toHaveClass('vv-select--disabled')
    }

    // readonly
    if (args.readonly) {
        await expect(element).toHaveClass('vv-select--readonly')
    }

    if (
        !args.invalid
        && !args.disabled
        && !args.readonly
        && args.options
        && args.options.length > 0
    ) {
        // select first value
        if (!args.autoselectFirst) {
            await expect(dropdownFirstItem).toBeClicked()
            await sleep()
        }

        const firstValue = getOptionValue(
            args.options[0].options?.[0] ?? args.options[0],
        )
        // in grouped options the first element is not selectable
        if (args.multiple) {
            await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
        } else {
            await expect(value.innerHTML).toEqual(firstValue)
        }

        // select second value
        if (args.options && args.options.length > 1) {
            await expect(dropdownSecondItem).toBeClicked()
            await sleep()
            const secondValue = getOptionValue(
                args.options[0].options?.[1] ?? args.options[1],
            )
            if (args.multiple) {
                await expect(JSON.parse(value.innerHTML)).toEqual([
                    firstValue,
                    secondValue,
                ])
            } else {
                await expect(value.innerHTML).toEqual(secondValue)
            }
        }
    }

    // invalid
    if (args.invalid) {
        await expect(element).toHaveClass('vv-select--invalid')
        if (args.invalidLabel) {
            await expect(hint.innerHTML).toEqual(args.invalidLabel)
        }
    }

    // valid
    if (args.valid) {
        await expect(element).toHaveClass('vv-select--valid')
        if (args.validLabel) {
            await expect(hint.innerHTML).toEqual(args.validLabel)
        }
    }

    // loading
    if (args.loading) {
        await expect(element).toHaveClass('vv-select--loading')
    }

    // hint
    if (args.hintLabel) {
        await expect(hint.innerHTML).toEqual(args.hintLabel)
    }

    // check accessibility
    // await expect(element).toHaveNoViolations()
}