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

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

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

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

    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.tone).to.equal('primary');
    expect(el.disabled).to.equal(true);
    expect(el.required).to.equal(true);
    expect(el.corners).to.equal('rounded');

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

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

    // Properly setting inputs
    expect(el.__labelsEl.length).to.equal(3);
    expect(el.__inputsEl.length).to.equal(3);

    expect(el.__labelsEl[0].textContent).to.contain(options[0].text);
    expect(el.__inputsEl[0].value).to.equal('single');
    expect(el.__inputsEl[0].disabled).to.equal(true);
    expect(el.__inputsEl[0].required).to.equal(true);

    expect(el.__labelsEl[1].textContent).to.contain(options[1].text);
    expect(el.__inputsEl[1].value).to.equal('couples');
    expect(el.__inputsEl[1].disabled).to.equal(true);
    expect(el.__inputsEl[1].required).to.equal(true);

    expect(el.__labelsEl[2].textContent).to.contain(options[2].text);
    expect(el.__inputsEl[2].value).to.equal('family');
    expect(el.__inputsEl[2].disabled).to.equal(true);
    expect(el.__inputsEl[2].required).to.equal(true);

    // expect we set the error
    expect(el.__errorEl.textContent).to.contain('X is a required value');
  });

  it('label, value should be by default empty and should have no options', async () => {
    const el = await fixture<MonoButtonGroupComp>(
      html`<mono-button-group></mono-button-group>`,
    );

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

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

    expect(el.__labelsEl.length).to.equal(0);
    expect(el.__inputsEl.length).to.equal(0);
  });

  it('tone should be by default highlight', async () => {
    const el = await fixture<MonoButtonGroupComp>(
      html`<mono-button-group></mono-button-group>`,
    );

    expect(el.tone).to.equal('highlight');
  });

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

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

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

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

  it('name should be by default empty', async () => {
    const el = await fixture<MonoButtonGroupComp>(
      html`<mono-button-group></mono-button-group>`,
    );

    expect(el.name).to.equal('');
  });

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

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

  it('should spreads other attributes', async () => {
    const el = await fixture<MonoButtonGroupComp>(
      html`<mono-button-group fake="test"></mono-button-group>`,
    );

    expect(el.shadowRoot?.firstElementChild?.getAttribute('fake')).to.equal(
      'test',
    );
  });

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

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