import type {Selector} from 'webdriverio';
import {CustomExpect} from "../../common-helpers/custom-expect";
import {PageConfigTypes} from "../../../custom-types/pageConfig-types";
import {browser, $, $$, expect} from '@wdio/globals'

/**
 * Check the given property of the given element
 * @param  {String}   isCSS         Whether to check for a CSS property or an
 *                                  attribute
 * @param  {String}   attrName      The name of the attribute to check
 * @param  {String}   elem          Element selector
 * @param  {String}   falseCase     Whether to check if the value of the
 *                                  attribute matches or not
 * @param  {String}   expectedValue The value to match against
 */
export default async function (isCSS: boolean, attrName: string, pageConfig: PageConfigTypes, falseCase: boolean, expectedValue: number | string) {

    const command = isCSS ? 'getCSSProperty' : 'getAttribute';
    //
    // /**
    //  * The actual attribute value
    //  * @type {Mixed}
    //  */
    let attributeValue = await $(pageConfig.selector)[command](attrName);
    //
    // /**
    //  * when getting something with a color or font-weight WebdriverIO returns a
    //  * object but we want to assert against a string
    //  */
    if (attrName.match(/(font-size|line-height|display|font-weight)/)) {
        // @ts-expect-error
        attributeValue = attributeValue.value;
    }

    if (falseCase) {
        CustomExpect.expectNotToBe(attributeValue, expectedValue, `The expected "${attrName}" of element "${pageConfig.pageId}.${pageConfig.elementKey} is matching with actual value"`)

    } else {
        CustomExpect.expectToBe(attributeValue, expectedValue, `The expected "${attrName}" of element "${pageConfig.pageId}.${pageConfig.elementKey} is not matching with actual value"`)
    }
};