/** @odoo-module **/

import { browser } from "@web/core/browser/browser";
import { isMacOS } from "@web/core/browser/feature_detection";
import { download } from "@web/core/network/download";
import { Deferred } from "@web/core/utils/concurrency";
import { patch, unpatch } from "@web/core/utils/patch";
import { isVisible } from "@web/core/utils/ui";
import { registerCleanup } from "./cleanup";
import { templates } from "@web/core/assets";

import { App, onMounted, onPatched, useComponent } from "@odoo/owl";

/**
 * Patch the native Date object
 *
 * Note that it will be automatically unpatched at the end of the test
 *
 * @param {number} [year]
 * @param {number} [month]
 * @param {number} [day]
 * @param {number} [hours]
 * @param {number} [minutes]
 * @param {number} [seconds]
 */
export function patchDate(year, month, day, hours, minutes, seconds) {
    var RealDate = window.Date;
    var actualDate = new RealDate();

    // By default, RealDate uses the browser offset, so we must replace it with the offset fixed in luxon.
    var fakeDate = new RealDate(year, month, day, hours, minutes, seconds);
    if (!(luxon.Settings.defaultZone instanceof luxon.FixedOffsetZone)) {
        throw new Error("luxon.Settings.defaultZone must be a FixedOffsetZone");
    }
    const browserOffset = -fakeDate.getTimezoneOffset();
    const patchedOffset = luxon.Settings.defaultZone.offset();
    const offsetDiff = patchedOffset - browserOffset;
    const correctedMinutes = fakeDate.getMinutes() - offsetDiff;
    fakeDate.setMinutes(correctedMinutes);

    var timeInterval = actualDate.getTime() - fakeDate.getTime();

    // eslint-disable-next-line no-global-assign
    window.Date = (function (NativeDate) {
        function Date(Y, M, D, h, m, s, ms) {
            var length = arguments.length;
            let date;
            if (arguments.length > 0) {
                date =
                    length == 1 && String(Y) === Y // isString(Y)
                        ? // We explicitly pass it through parse:
                          new NativeDate(Date.parse(Y))
                        : // We have to manually make calls depending on argument
                        // length here
                        length >= 7
                        ? new NativeDate(Y, M, D, h, m, s, ms)
                        : length >= 6
                        ? new NativeDate(Y, M, D, h, m, s)
                        : length >= 5
                        ? new NativeDate(Y, M, D, h, m)
                        : length >= 4
                        ? new NativeDate(Y, M, D, h)
                        : length >= 3
                        ? new NativeDate(Y, M, D)
                        : length >= 2
                        ? new NativeDate(Y, M)
                        : length >= 1
                        ? new NativeDate(Y)
                        : new NativeDate();
                // Prevent mixups with unfixed Date object
                date.constructor = Date;
                return date;
            } else {
                date = new NativeDate();
                var time = date.getTime();
                time -= timeInterval;
                date.setTime(time);
                return date;
            }
        }

        // Copy any custom methods a 3rd party library may have added
        for (var key in NativeDate) {
            Date[key] = NativeDate[key];
        }

        // Copy "native" methods explicitly; they may be non-enumerable
        // exception: 'now' uses fake date as reference
        Date.now = function () {
            var date = new NativeDate();
            var time = date.getTime();
            time -= timeInterval;
            return time;
        };
        Date.UTC = NativeDate.UTC;
        Date.prototype = NativeDate.prototype;
        Date.prototype.constructor = Date;

        // Upgrade Date.parse to handle simplified ISO 8601 strings
        Date.parse = NativeDate.parse;
        return Date;
    })(Date);

    registerCleanup(() => {
        window.Date = RealDate;
    });
}

/**
 * Applies a fixed time zone to luxon based on an offset to the UTC time zone.
 *
 * @param {number} offset the number of minutes ahead or behind the UTC time zone
 *                          +120 => UTC+2
 *                          -120 => UTC-2
 */
export function patchTimeZone(offset) {
    const originalZone = luxon.Settings.defaultZone;
    luxon.Settings.defaultZone = new luxon.FixedOffsetZone.instance(offset);
    registerCleanup(() => {
        luxon.Settings.defaultZone = originalZone;
    });
}

let nextId = 1;

/**
 *
 * @param {Object} obj object to patch
 * @param {Object} patchValue the actual patch description
 * @param {{pure?: boolean}} [options]
 */
export function patchWithCleanup(obj, patchValue, options) {
    const patchName = `__test_patch_${nextId++}__`;
    patch(obj, patchName, patchValue, options);
    registerCleanup(() => {
        unpatch(obj, patchName);
    });
}

/**
 * @returns {HTMLElement}
 */
export function getFixture() {
    if (!window.QUnit) {
        return document;
    }
    if (QUnit.config.debug) {
        return document.body;
    } else {
        return document.querySelector("#qunit-fixture");
    }
}

export async function nextTick() {
    await new Promise((resolve) => window.requestAnimationFrame(resolve));
    await new Promise((resolve) => setTimeout(resolve));
}

export function makeDeferred() {
    return new Deferred();
}

export function findElement(el, selector) {
    let target = el;
    if (selector) {
        const els = el.querySelectorAll(selector);
        if (els.length === 0) {
            throw new Error(`No element found (selector: ${selector})`);
        }
        if (els.length > 1) {
            throw new Error(`Found ${els.length} elements, instead of 1 (selector: ${selector})`);
        }
        target = els[0];
    }
    return target;
}

function keyboardEventBubble(args) {
    return Object.assign({}, args, {
        bubbles: true,
        keyCode: args.which,
        cancelable: true,
    });
}

function mouseEventMapping(args) {
    return {
        clientX: args ? args.pageX : undefined,
        clientY: args ? args.pageY : undefined,
        ...args,
        bubbles: true,
        cancelable: true,
        view: window,
    };
}

function mouseEventNoBubble(args) {
    return {
        clientX: args ? args.pageX : undefined,
        clientY: args ? args.pageY : undefined,
        ...args,
        bubbles: false,
        cancelable: false,
        view: window,
    };
}

function touchEventMapping(args) {
    return {
        ...args,
        cancelable: true,
        bubbles: true,
        composed: true,
        view: window,
        rotation: 0.0,
        zoom: 1.0,
        touches: args.touches ? [...args.touches.map((e) => new Touch(e))] : undefined,
    };
}

function touchEventCancelMapping(args) {
    return {
        ...touchEventMapping(args),
        cancelable: false,
    };
}

function noBubble(args) {
    return Object.assign({}, args, { bubbles: false });
}

function onlyBubble(args) {
    return Object.assign({}, args, { bubbles: true });
}

// TriggerEvent constructor/args processor mapping
const EVENT_TYPES = {
    auxclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
    click: { constructor: MouseEvent, processParameters: mouseEventMapping },
    contextmenu: {
        constructor: MouseEvent,
        processParameters: mouseEventMapping,
    },
    dblclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
    mousedown: { constructor: MouseEvent, processParameters: mouseEventMapping },
    mouseup: { constructor: MouseEvent, processParameters: mouseEventMapping },
    mousemove: { constructor: MouseEvent, processParameters: mouseEventMapping },
    mouseenter: {
        constructor: MouseEvent,
        processParameters: mouseEventNoBubble,
    },
    mouseleave: {
        constructor: MouseEvent,
        processParameters: mouseEventNoBubble,
    },
    mouseover: { constructor: MouseEvent, processParameters: mouseEventMapping },
    mouseout: { constructor: MouseEvent, processParameters: mouseEventMapping },
    focus: { constructor: FocusEvent, processParameters: noBubble },
    focusin: { constructor: FocusEvent, processParameters: onlyBubble },
    blur: { constructor: FocusEvent, processParameters: noBubble },
    cut: { constructor: ClipboardEvent, processParameters: onlyBubble },
    copy: { constructor: ClipboardEvent, processParameters: onlyBubble },
    paste: { constructor: ClipboardEvent, processParameters: onlyBubble },
    keydown: {
        constructor: KeyboardEvent,
        processParameters: keyboardEventBubble,
    },
    keypress: {
        constructor: KeyboardEvent,
        processParameters: keyboardEventBubble,
    },
    keyup: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
    drag: { constructor: DragEvent, processParameters: onlyBubble },
    dragend: { constructor: DragEvent, processParameters: onlyBubble },
    dragenter: { constructor: DragEvent, processParameters: onlyBubble },
    dragstart: { constructor: DragEvent, processParameters: onlyBubble },
    dragleave: { constructor: DragEvent, processParameters: onlyBubble },
    dragover: { constructor: DragEvent, processParameters: onlyBubble },
    drop: { constructor: DragEvent, processParameters: onlyBubble },
    input: { constructor: InputEvent, processParameters: onlyBubble },
    compositionstart: {
        constructor: CompositionEvent,
        processParameters: onlyBubble,
    },
    compositionend: {
        constructor: CompositionEvent,
        processParameters: onlyBubble,
    },
};

if (typeof TouchEvent === "function") {
    Object.assign(EVENT_TYPES, {
        touchstart: {
            constructor: TouchEvent,
            processParameters: touchEventMapping,
        },
        touchend: { constructor: TouchEvent, processParameters: touchEventMapping },
        touchmove: {
            constructor: TouchEvent,
            processParameters: touchEventMapping,
        },
        touchcancel: {
            constructor: TouchEvent,
            processParameters: touchEventCancelMapping,
        },
    });
}

function _makeEvent(eventType, eventAttrs) {
    let event;
    if (eventType in EVENT_TYPES) {
        const { constructor, processParameters } = EVENT_TYPES[eventType];
        event = new constructor(eventType, processParameters(eventAttrs));
    } else {
        event = new Event(eventType, Object.assign({}, eventAttrs, { bubbles: true }));
    }
    return event;
}

export function triggerEvent(el, selector, eventType, eventAttrs = {}, options = {}) {
    const event = _makeEvent(eventType, eventAttrs);
    const target = findElement(el, selector);
    if (!target) {
        throw new Error(`Can't find a target to trigger ${eventType} event`);
    }
    if (!options.skipVisibilityCheck) {
        if (!isVisible(target)) {
            throw new Error(`Called triggerEvent ${eventType} on invisible target`);
        }
    }
    target.dispatchEvent(event);
    if (!options.fast) {
        return nextTick().then(() => event);
    }
    return event;
}

export async function triggerEvents(el, querySelector, events, options) {
    for (let e = 0; e < events.length; e++) {
        if (Array.isArray(events[e])) {
            triggerEvent(el, querySelector, events[e][0], events[e][1], options);
        } else {
            triggerEvent(el, querySelector, events[e], {}, options);
        }
    }
    await nextTick();
}

/**
 * Triggers a scroll event on the given target
 *
 * If the target cannot be scrolled or an axis has reached
 * the end of the scrollable area, the event can be transmitted
 * to its nearest parent until it can be triggered
 *
 * @param {HTMLElement} target target of the scroll event
 * @param {Object} coordinates
 * @param {Number} coordinates[left] coordinates to scroll horizontally
 * @param {Number} coordinates[top] coordinates to scroll vertically
 * @param {Boolean} canPropagate states if the scroll can propagate to a scrollable parent
 */
export async function triggerScroll(
    target,
    coordinates = { left: null, top: null },
    canPropagate = true
) {
    const isScrollable =
        (target.scrollHeight > target.clientHeight && target.clientHeight > 0) ||
        (target.scrollWidth > target.clientWidth && target.clientWidth > 0);
    if (!isScrollable && !canPropagate) {
        return;
    }
    if (isScrollable) {
        const canScrollFrom = {
            left:
                coordinates.left > target.scrollLeft
                    ? target.scrollLeft + target.clientWidth < target.scrollWidth
                    : target.scrollLeft > 0,
            top:
                coordinates.top > target.scrollTop
                    ? target.scrollTop + target.clientHeight < target.scrollHeight
                    : target.scrollTop > 0,
        };
        const scrollCoordinates = {};
        Object.entries(coordinates).forEach(([key, value]) => {
            if (value !== null && canScrollFrom[key]) {
                scrollCoordinates[key] = value;
                delete coordinates[key];
            }
        });
        target.scrollTo(scrollCoordinates);
        target.dispatchEvent(new UIEvent("scroll"));
        await nextTick();
        if (!canPropagate || !Object.entries(coordinates).length) {
            return;
        }
    }
    target.parentElement
        ? triggerScroll(target.parentElement, coordinates)
        : window.dispatchEvent(new UIEvent("scroll"));
    await nextTick();
}

export function click(el, selector, skipVisibilityCheck = false) {
    return triggerEvent(
        el,
        selector,
        "click",
        { bubbles: true, cancelable: true },
        { skipVisibilityCheck }
    );
}

export function clickCreate(htmlElement) {
    if (htmlElement.querySelectorAll(".o_form_button_create").length) {
        return click(htmlElement, ".o_form_button_create");
    } else if (htmlElement.querySelectorAll(".o_list_button_create").length) {
        return click(htmlElement, ".o_list_button_create");
    } else {
        throw new Error("No edit button found to be clicked.");
    }
}

export function clickEdit(htmlElement) {
    if (htmlElement.querySelectorAll(".o_list_button_edit").length) {
        return click(htmlElement, ".o_list_button_edit");
    } else {
        throw new Error("No edit button found to be clicked.");
    }
}

export async function clickSave(htmlElement) {
    if (htmlElement.querySelectorAll(".o_form_status_indicator").length) {
        await mouseEnter(htmlElement, ".o_form_status_indicator");
    }
    if (htmlElement.querySelectorAll(".o_form_button_save").length) {
        return click(htmlElement, ".o_form_button_save");
    } else if (htmlElement.querySelectorAll(".o_list_button_save").length) {
        return click(htmlElement, ".o_list_button_save");
    } else {
        throw new Error("No save button found to be clicked.");
    }
}

export async function clickDiscard(htmlElement) {
    if (htmlElement.querySelectorAll(".o_form_status_indicator").length) {
        await mouseEnter(htmlElement, ".o_form_status_indicator");
    }
    if (htmlElement.querySelectorAll(".o_form_button_cancel").length) {
        return click(htmlElement, ".o_form_button_cancel");
    } else if (htmlElement.querySelectorAll(".o_list_button_discard").length) {
        return click(htmlElement, ".o_list_button_discard");
    } else {
        throw new Error("No discard button found to be clicked.");
    }
}

/**
 * Triggers a mouseenter event on the given target. If no
 * coordinates are given, the event is located by default
 * in the middle of the target to simplify the test process
 *
 * @param {HTMLElement} el
 * @param {string} selector
 * @param {Object} coordinates position of the mouseenter event
 */
export async function mouseEnter(el, selector, coordinates) {
    const target = el.querySelector(selector) || el;
    const atPos = coordinates || {
        clientX: target.getBoundingClientRect().left + target.getBoundingClientRect().width / 2,
        clientY: target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2,
    };
    return triggerEvent(target, null, "mouseenter", atPos);
}

export async function editInput(el, selector, value) {
    const input = findElement(el, selector);
    if (!(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)) {
        throw new Error("Only 'input' and 'textarea' elements can be edited with 'editInput'.");
    }
    if (
        !["text", "textarea", "email", "search", "color", "number", "file", "tel"].includes(
            input.type
        )
    ) {
        throw new Error(`Type "${input.type}" not supported by 'editInput'.`);
    }

    const eventOpts = {};
    if (input.type === "file") {
        const files = Array.isArray(value) ? value : [value];
        const dataTransfer = new DataTransfer();
        for (const file of files) {
            if (!(file instanceof File)) {
                throw new Error(`File input value should be one or several File objects.`);
            }
            dataTransfer.items.add(file);
        }
        input.files = dataTransfer.files;
        eventOpts.skipVisibilityCheck = true;
    } else {
        input.value = value;
    }

    await triggerEvents(input, null, ["input", "change"], eventOpts);

    if (input.type === "file") {
        // Need to wait for the file to be loaded by the input
        await nextTick();
        await nextTick();
    }
}

export function editSelect(el, selector, value) {
    const select = findElement(el, selector);
    if (select.tagName !== "SELECT") {
        throw new Error("Only select tag can be edited with selectInput.");
    }
    select.value = value;
    return triggerEvent(select, null, "change");
}

/**
 * Triggers an hotkey properly disregarding the operating system.
 *
 * @param {string} hotkey
 * @param {boolean} addOverlayModParts
 * @param {KeyboardEventInit} eventAttrs
 * @returns {{ keydownEvent: KeyboardEvent, keyupEvent: KeyboardEvent }}
 */
export function triggerHotkey(hotkey, addOverlayModParts = false, eventAttrs = {}) {
    eventAttrs.key = hotkey.split("+").pop();

    if (/shift/i.test(hotkey)) {
        eventAttrs.shiftKey = true;
    }

    if (/control/i.test(hotkey)) {
        if (isMacOS()) {
            eventAttrs.metaKey = true;
        } else {
            eventAttrs.ctrlKey = true;
        }
    }

    if (/alt/i.test(hotkey) || addOverlayModParts) {
        if (isMacOS()) {
            eventAttrs.ctrlKey = true;
        } else {
            eventAttrs.altKey = true;
        }
    }

    if (!("bubbles" in eventAttrs)) {
        eventAttrs.bubbles = true;
    }

    const keydownEvent = new KeyboardEvent("keydown", eventAttrs);
    const keyupEvent = new KeyboardEvent("keyup", eventAttrs);
    document.activeElement.dispatchEvent(keydownEvent);
    document.activeElement.dispatchEvent(keyupEvent);
    return { keydownEvent, keyupEvent };
}

export async function legacyExtraNextTick() {
    return nextTick();
}

export function mockDownload(cb) {
    patchWithCleanup(download, { _download: cb });
}

export const hushConsole = Object.create(null);
for (const propName of Object.keys(window.console)) {
    hushConsole[propName] = () => {};
}

export function mockSendBeacon(mock) {
    patchWithCleanup(navigator, {
        sendBeacon: (url, blob) => {
            return mock(url, blob) !== false;
        },
    });
}

export function mockTimeout() {
    const timeouts = new Map();
    let currentTime = 0;
    let id = 1;
    patchWithCleanup(browser, {
        setTimeout(fn, delay = 0) {
            timeouts.set(id, { fn, scheduledFor: delay + currentTime, id });
            return id++;
        },
        clearTimeout(id) {
            timeouts.delete(id);
        },
    });
    return {
        execRegisteredTimeouts() {
            for (const { fn } of timeouts.values()) {
                fn();
            }
            timeouts.clear();
        },
        async advanceTime(duration) {
            // wait here so all microtasktick scheduled in this frame can be
            // executed and possibly register their own timeout
            await nextTick();
            currentTime += duration;
            for (const { fn, scheduledFor, id } of timeouts.values()) {
                if (scheduledFor <= currentTime) {
                    fn();
                    timeouts.delete(id);
                }
            }
            // wait here to make sure owl can update the UI
            await nextTick();
        },
    };
}

export function mockAnimationFrame() {
    const callbacks = new Map();
    let id = 1;
    patchWithCleanup(browser, {
        requestAnimationFrame(fn) {
            callbacks.set(id, fn);
            return id++;
        },
        cancelAnimationFrame(id) {
            callbacks.delete(id);
        },
    });
    return function execRegisteredCallbacks() {
        for (const fn of callbacks.values()) {
            fn();
        }
        callbacks.clear();
    };
}

export async function mount(Comp, target, config = {}) {
    let { props, env } = config;
    env = env || {};
    const configuration = {
        env,
        templates,
        test: true,
        props,
    };
    if (env.services && "localization" in env.services) {
        configuration.translateFn = env._t;
    }
    const app = new App(Comp, configuration);
    registerCleanup(() => app.destroy());
    return app.mount(target);
}

export function destroy(comp) {
    comp.__owl__.app.destroy();
}

export function findChildren(comp, predicate = (e) => e) {
    const queue = [];
    [].unshift.apply(queue, Object.values(comp.__owl__.children));

    while (queue.length > 0) {
        const curNode = queue.pop();
        if (predicate(curNode)) {
            return curNode;
        }
        [].unshift.apply(queue, Object.values(curNode.component.__owl__.children));
    }
}

// partial replacement of t-ref on component
export function useChild() {
    const node = useComponent().__owl__;
    const setChild = () => {
        const componentNode = Object.values(node.children)[0];
        node.component.child = componentNode.component;
    };
    onMounted(setChild);
    onPatched(setChild);
}

const lifeCycleHooks = [
    "onError",
    "onMounted",
    "onPatched",
    "onRendered",
    "onWillDestroy",
    "onWillPatch",
    "onWillRender",
    "onWillStart",
    "onWillUnmount",
    "onWillUpdateProps",
];
export function useLogLifeCycle(logFn, name = "") {
    const component = owl.useComponent();
    let loggedName = `${component.constructor.name}`;
    if (name) {
        loggedName = `${component.constructor.name} ${name}`;
    }
    for (const hook of lifeCycleHooks) {
        owl[hook](() => {
            logFn(`${hook} ${loggedName}`);
        });
    }
}

/**
 * Returns the list of nodes containing n2 (included) that do not contain n1.
 *
 * @param {Node} n1
 * @param {Node} n2
 * @returns {Node[]}
 */
function getDifferentParents(n1, n2) {
    const parents = [n2];
    while (parents[0].parentNode) {
        const parent = parents[0].parentNode;
        if (parent.contains(n1)) {
            break;
        }
        parents.unshift(parent);
    }
    return parents;
}

/**
 * Helper performing a drag and drop sequence.
 *
 * - the 'fromSelector' is used to determine the element on which the drag will
 *  start;
 * - the 'toSelector' will determine the element on which the first one will be
 * dropped.
 *
 * The first element will be dragged by its center, and will be dropped on the
 * bottom-right inner pixel of the target element. This behavior covers both
 * cases of appending the first element to the end of a list (toSelector =
 * target list) or moving it at the position of another element, effectively
 * placing the first element before the second (toSelector = other element).
 *
 * A position can be given to drop the first element above, below, or on the
 * side of the second (default is inside, as specified above).
 *
 * Note that only the last event is awaited, since all the others are
 * considered to be synchronous.
 *
 * @param {Element|string} from
 * @param {Element|string} to
 * @param {string} [position] "top" | "bottom" | "left" | "right"
 * @returns {Promise<void>}
 */
export async function dragAndDrop(from, to, position) {
    const dropFunction = drag(from, to, position);
    await dropFunction();
}

/**
 * Helper performing a drag.
 *
 * - the 'from' selector is used to determine the element on which the drag will
 *  start;
 * - the 'to' selector will determine the element on which the dragged element will be
 * moved.
 *
 * Returns a drop function
 * @param {Element|string} from
 * @param {Element|string} to
 * @param {string} [position] "top" | "bottom" | "left" | "right"
 * @returns {function: Promise<void>}
 */
export function drag(from, to, position) {
    const fixture = getFixture();
    from = from instanceof Element ? from : fixture.querySelector(from);
    to = to instanceof Element ? to : fixture.querySelector(to);

    // Mouse down on main target
    const fromRect = from.getBoundingClientRect();
    const toRect = to.getBoundingClientRect();
    triggerEvent(from, null, "mousedown", {
        clientX: fromRect.x + fromRect.width / 2,
        clientY: fromRect.y + fromRect.height / 2,
    });

    // Find target position
    const toPos = {
        clientX: toRect.x + toRect.width / 2,
        clientY: toRect.y + toRect.height / 2,
    };
    if (position && typeof position === "object") {
        // x and y coordinates start from the element's initial coordinates
        toPos.clientX += position.x || 0;
        toPos.clientY += position.y || 0;
    } else {
        switch (position) {
            case "top": {
                toPos.clientY = toRect.y - 1;
                break;
            }
            case "bottom": {
                toPos.clientY = toRect.y + toRect.height + 1;
                break;
            }
            case "left": {
                toPos.clientX = toRect.x - 1;
                break;
            }
            case "right": {
                toPos.clientX = toRect.x + toRect.width + 1;
                break;
            }
        }
    }

    // Move, enter and drop the element on the target
    triggerEvent(window, null, "mousemove", toPos);
    // "mouseenter" is fired on every parent of `to` that do not contain
    // `from` (typically: different parent lists).
    for (const target of getDifferentParents(from, to)) {
        triggerEvent(target, null, "mouseenter", toPos);
    }

    return function () {
        return drop(from, toPos);
    };
}

function drop(from, toPos) {
    return triggerEvent(from, null, "mouseup", toPos);
}

export async function clickDropdown(target, fieldName) {
    const dropdownInput = target.querySelector(`[name='${fieldName}'] .dropdown input`);
    dropdownInput.focus();
    await nextTick();
    await click(dropdownInput);
}

export async function clickOpenedDropdownItem(target, fieldName, itemContent) {
    const dropdowns = target.querySelectorAll(`[name='${fieldName}'] .dropdown .dropdown-menu`);
    if (dropdowns.length === 0) {
        throw new Error(`No dropdown found for field ${fieldName}`);
    } else if (dropdowns.length > 1) {
        throw new Error(`Found ${dropdowns.length} dropdowns for field ${fieldName}`);
    }
    const dropdownItems = dropdowns[0].querySelectorAll("li");
    const indexToClick = Array.from(dropdownItems)
        .map((html) => html.textContent)
        .indexOf(itemContent);
    if (indexToClick === -1) {
        throw new Error(`The element '${itemContent}' does not exist in the dropdown`);
    }
    await click(dropdownItems[indexToClick], null, "click");
}

export async function selectDropdownItem(target, fieldName, itemContent) {
    await clickDropdown(target, fieldName);
    await clickOpenedDropdownItem(target, fieldName, itemContent);
}

export function getNodesTextContent(nodes) {
    return Array.from(nodes).map((n) => n.textContent);
}

/**
 * Click to open the dropdown on a many2one
 */
export async function clickOpenM2ODropdown(el, fieldName, selector) {
    const m2oSelector = `${selector || ""} .o_field_many2one[name=${fieldName}] input`;
    const matches = el.querySelectorAll(m2oSelector);
    if (matches.length !== 1) {
        throw new Error(
            `cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`
        );
    }

    await click(matches[0]);
    return matches[0];
}

/**
 * Click on the active (highlighted) selection in a m2o dropdown.
 */
// TO FIX
export async function clickM2OHighlightedItem(el, fieldName, selector) {
    const m2oSelector = `${selector || ""} .o_field_many2one[name=${fieldName}] input`;
    // const $dropdown = $(m2oSelector).autocomplete('widget');
    const matches = el.querySelectorAll(m2oSelector);
    if (matches.length !== 1) {
        throw new Error(
            `cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`
        );
    }
    // clicking on an li (no matter which one), will select the focussed one
    return click(matches[0].parentElement.querySelector("li"));
}

// X2Many
export async function addRow(target, selector) {
    await click(target.querySelector(`${selector ? selector : ""} .o_field_x2many_list_row_add a`));
}

export async function removeRow(target, index) {
    await click(target.querySelectorAll(".o_list_record_remove")[index]);
}