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

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

const options = [
  { selected: false, disabled: false, value: 'single', text: 'Single' },
  { selected: false, disabled: false, value: 'couples', text: 'Couples' },
  { selected: false, disabled: false, value: 'family', text: 'Family' },
];

describe('MonoSelectComp', () => {
  it('handle value, options, id, name, error, disabled, required, and take a label slot', async () => {
    const el = await fixture<MonoSelectComp>(
      html`<mono-select
        value="couples"
        .options=${options}
        id="aabbcc"
        name="cool"
        error="X is a required value"
        disabled
        required
        corners="rounded"
      >
        <span slot="label">Some Select</span>
      </mono-select>`,
    );

    expect(el.value).to.equal('couples');
    expect(el.id).to.equal('aabbcc');
    expect(el.name).to.equal('cool');
    expect(el.error).to.equal('X is a required value');
    expect(el.disabled).to.equal(true);
    expect(el.required).to.equal(true);
    expect(el.corners).to.equal('rounded');

    // we properly configure the select
    expect(el.__selectEl.value).to.equal('couples');
    expect(el.__selectEl.id).to.equal('aabbcc');
    expect(el.__selectEl.disabled).to.equal(true);
    expect(el.__selectEl.required).to.equal(true);

    // 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 Select');

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

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

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

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

    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('corners should be by default none', async () => {
    const el = await fixture<MonoSelectComp>(html`<mono-select></mono-select>`);

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

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

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

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

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

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

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

  it('passes the a11y audit', async () => {
    const el = await fixture<MonoSelectComp>(
      html`<mono-select value="couples" .options=${options} id="aabbcc">
        <span slot="label">Some Select</span>
      </mono-select>`,
    );

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