// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiCheckbox } from '@zywave/zui-checkbox';
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-checkbox') as unknown as ZuiCheckbox;
  if (name) {
    element.setAttribute('name', name);
  }
  return element;
}

suite('zui-checkbox', () => {
  let element: ZuiCheckbox;

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

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

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

  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 checkbox 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'));
  });

  test("clicking a disabled checkbox doesn't toggle checked property/attribute", async () => {
    element.disabled = true;
    await element.updateComplete;

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

    element.click();
    await element.updateComplete;

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

  test('clicking on an indeterminate checkbox unsets indeterminate property/attribute.', async () => {
    element.indeterminate = true;

    await element.updateComplete;

    assert.isTrue(element.indeterminate, 'Expected indeterminate to be true.');

    element.click();
    await element.updateComplete;

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

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