// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiRadio } from '@zywave/zui-radio';
import { assert } from '@esm-bundle/chai';
import { randString } from '../../../../test/src/util/helpers';
import { faceTests } from '../../../../test/src/util/face-tests';

function createElement(name?: string) {
  const element = document.createElement('zui-radio') as unknown as ZuiRadio;
  if (name) {
    element.setAttribute('name', name);
  }
  return element;
}

suite('zui-radio', () => {
  let element: ZuiRadio;

  setup(() => {
    element = createElement(randString());
    document.body.append(element);
  });

  teardown(() => {
    element?.remove();
  });

  test('initializes as a ZuiRadio', () => {
    assert.instanceOf(element, ZuiRadio);
  });

  test('default property values', async () => {
    await element.updateComplete;

    assert.isFalse(element.checked, 'Expected checked to be false.');
    assert.isFalse(element.disabled, 'Expected disabled to be false.');
    assert.equal(element.value, 'on', 'Expected value to be on.');
  });

  test('clicking radio toggles checked property/attribute', async () => {
    await element.updateComplete;

    assert.isFalse(element.checked, 'Expected checked to be false.');

    element.click();
    await element.updateComplete;

    assert.isTrue(element.checked, 'Expected checked to be true.');
    assert.isTrue(element.hasAttribute('checked'));
  });
});

faceTests<ZuiRadio>('zui-radio', {
  defaultValue: null,
  supportsAutofocus: false,
  async postConnectedConfigure(radio: ZuiRadio) {
    radio.checked = true;
    await radio.updateComplete;
  },
  valueAccessor(element) {
    return element.checked ? element.value : null;
  },
});