import { assert } from '@ember/debug';
import { fillIn, find, settled } from '@ember/test-helpers';

/**
 * Fill the OTP input
 *
 * ```gjs
 * import { fillOTP } from 'ember-primitives/test-support';
 *
 * test('...', async function(assert) {
 *   // ...
 *   await fillOTP('123456');
 *   // ...
 * })
 *
 * ```
 *
 * @param {string} code the code to fill the input(s) with.
 * @param {string} [ selector ] if there are multiple OTP components on a page, this can be used to select one of them.
 */
export async function fillOTP(code: string, selector?: string) {
  const ancestor = selector ? find(selector) : document;

  assert(
    `Could not find ancestor element, does your selector match an existing element?`,
    ancestor
  );

  const fieldset =
    ancestor instanceof HTMLFieldSetElement ? ancestor : ancestor.querySelector('fieldset');

  assert(
    `Could not find containing fieldset element (this holds the OTP Input fields). Was the OTP component rendered?`,
    fieldset
  );

  const inputs = fieldset.querySelectorAll('input');

  assert(
    `code cannot be longer than the available inputs. code is of length ${code.length} but there are ${inputs.length}`,
    code.length <= inputs.length
  );

  const chars = code.split('');

  assert(`OTP Input for index 0 is missing!`, inputs[0]);
  assert(`Character at index 0 is missing`, chars[0]);

  for (let i = 0; i < chars.length; i++) {
    const input = inputs[i];
    const char = chars[i];

    assert(`Input at index ${i} is missing`, input);
    assert(`Character at index ${i} is missing`, char);

    input.value = char;
  }

  await fillIn(inputs[0], chars[0]);

  // Account for out-of-settled-system delay due to RAF debounce.
  await new Promise((resolve) => requestAnimationFrame(resolve));
  await settled();
}