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

suite('zui-search', () => {
  let element: ZuiSearch;

  setup(async () => {
    // reset to default
    await setViewport({ width: 800, height: 600 });
    element = document.createElement('zui-search') as ZuiSearch;
    document.body.appendChild(element);
  });

  teardown(() => {
    document.body.removeChild(element);
  });

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

  test('on mobile hides submit button and displays search icon', async () => {
    await setViewport({ width: 720, height: 640 });

    await element.updateComplete;

    const searchIcon = element.shadowRoot?.querySelector('zui-icon.search-icon');
    const submitButton = element.shadowRoot?.querySelector('button.submit');

    assert.exists(searchIcon);
    assert.exists(submitButton);

    const searchDisplayValue = getComputedStyle(searchIcon).getPropertyValue('display');
    const submitButtonValue = getComputedStyle(submitButton).getPropertyValue('display');

    assert.equal(searchDisplayValue, 'block');
    assert.equal(submitButtonValue, 'none');
  });
});

faceTests<ZuiSearch>('zui-search', {
  defaultValue: '',
  valueAccessor(element) {
    return element.value;
  },
});