import { html, fixture, expect } from '@open-wc/testing';

import type { MonoTextFieldComp } from '../src/MonoTextFieldComp';
import '../src/MonoTextFieldComp';

describe('MonoTextFieldComp', () => {
  it('handle value, placeholder, id, name, error, mask-type, disabled, required, and take a label slot', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield
        value="26"
        placeholder="Enter x"
        id="aabbcc"
        name="cool"
        error="X is a required value"
        mask-type="phone"
        disabled
        required
        inputmode="tel"
        corners="rounded"
      >
        <span slot="label">Some TextField</span>
      </mono-textfield>`,
    );

    expect(el.value).to.equal('26');
    expect(el.placeholder).to.equal('Enter x');
    expect(el.id).to.equal('aabbcc');
    expect(el.name).to.equal('cool');
    expect(el.error).to.equal('X is a required value');
    expect(el.maskType).to.equal('phone');
    expect(el.disabled).to.equal(true);
    expect(el.required).to.equal(true);
    expect(el.inputMode).to.equal('tel');
    expect(el.corners).to.equal('rounded');

    // we properly configure the input
    expect(el.__inputEl.value).to.equal('26');
    expect(el.__inputEl.placeholder).to.equal('Enter x');
    expect(el.__inputEl.id).to.equal('aabbcc');
    expect(el.__inputEl.disabled).to.equal(true);
    expect(el.__inputEl.required).to.equal(true);
    expect(el.__inputEl.inputMode).to.equal('tel');

    // we accept a slot label
    expect(el.__labelEl.childNodes.length).to.equal(3);

    const slotLabel = Array.from(el.children).find(
      (child) => child.slot === 'label',
    );
    expect(slotLabel?.textContent).to.equal('Some TextField');

    // expect we set the error
    expect(el.__errorEl.textContent).to.contain('X is a required value');
    expect(
      el.__inputEl.getAttribute('aria-describedby')?.length,
    ).to.greaterThan(0);
  });

  it('should spreads other attribute to the input element', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield fake="test"></mono-textfield>`,
    );

    expect(el.__inputEl.getAttribute('fake')).to.equal('test');
  });

  it('placeholder, label, value, name should be by default empty', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield></mono-textfield>`,
    );

    expect(el.placeholder).to.equal('');
    expect(el.value).to.equal('');
    expect(el.name).to.equal('');

    const slotLabel = Array.from(el.children).find(
      (child) => child.slot === 'label',
    );
    expect(slotLabel).to.equal(undefined);
  });

  it('disabled and required should be by default false', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield></mono-textfield>`,
    );

    expect(el.disabled).to.equal(false);
    expect(el.required).to.equal(false);
  });

  it('inputmode sould be by default text', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield></mono-textfield>`,
    );

    expect(el.inputMode).to.equal('text');
  });

  it('corners should be by default none', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield></mono-textfield>`,
    );

    expect(el.corners).to.equal('none');
  });

  it('generates an id if one is not provided', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield></mono-textfield>`,
    );

    expect(el.placeholder).to.equal('');
    expect(el.id.length).to.equal(9);
  });

  it('without an error does not set an ariaDescribedBy', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield></mono-textfield>`,
    );

    expect(el.__inputEl.getAttribute('aria-describedby')).to.equal('');
  });

  it('passes the a11y audit', async () => {
    const el = await fixture<MonoTextFieldComp>(
      html`<mono-textfield value="26" placeholder="Enter x" id="aabbcc">
        <span slot="label">Some TextField</span>
      </mono-textfield>`,
    );

    await expect(el).shadowDom.to.be.accessible();
  });
});