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

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

describe('MonoRangeSliderComp', () => {
  it('handle value, min, max, step, id, name, error, disabled and take a label slot', async () => {
    const el = await fixture<MonoRangeSliderComp>(
      html`<mono-rangeslider
        value="26"
        min="5"
        max="90"
        step="10"
        id="aabbcc"
        name="cool"
        error="X is a required value"
        disabled
        required
        corners="rounded"
      >
        <span slot="label">Some RangeSlider</span>
      </mono-rangeslider>`,
    );

    expect(el.value).to.equal('25');
    expect(el.min).to.equal('5');
    expect(el.max).to.equal('90');
    expect(el.step).to.equal('10');
    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 input
    expect(el.__inputEl.value).to.equal('25');
    expect(el.__inputEl.min).to.equal('5');
    expect(el.__inputEl.max).to.equal('90');
    expect(el.__inputEl.step).to.equal('10');
    expect(el.__inputEl.id).to.equal('aabbcc');

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

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

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

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

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

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

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

  it('value, max, min, step should use platform default', async () => {
    const el = await fixture<MonoRangeSliderComp>(
      html`<mono-rangeslider></mono-rangeslider>`,
    );

    const defaultInput = await fixture<HTMLInputElement>(
      html`<input type="range" />`,
    );

    expect(el.min).to.equal(defaultInput.min);
    expect(el.max).to.equal(defaultInput.max);
    expect(el.step).to.equal(defaultInput.step);
  });

  it('value should be set to min if not provided', async () => {
    const el = await fixture<MonoRangeSliderComp>(
      html`<mono-rangeslider></mono-rangeslider>`,
    );

    const defaultInput = await fixture<HTMLInputElement>(
      html`<input type="range" />`,
    );

    expect(el.value).to.equal(defaultInput.min);
  });

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

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

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

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

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

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

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

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

  it('passes the a11y audit', async () => {
    const el = await fixture<MonoRangeSliderComp>(
      html`<mono-rangeslider
        value="25"
        min="10"
        max="100"
        step="10"
        id="aabbcc"
      >
        <span slot="label">Some RangeSlider</span>
      </mono-rangeslider>`,
    );

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