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

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

describe('MonoButtonComp', () => {
  it('handle size, tone, variant props and accept a default slot', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button
        as="a"
        size="base"
        tone="accent"
        variant="solid"
        loading
        disabled
        insets-x="96"
        corners="rounded"
        >Hey there</mono-button
      >`,
    );

    expect(el.textContent).to.equal('Hey there');
    expect(el.as).to.equal('a');
    expect(el.size).to.equal('base');
    expect(el.tone).to.equal('accent');
    expect(el.variant).to.equal('solid');
    expect(el.disabled).to.equal(true);
    expect(el.loading).to.equal(true);
    expect(el.insetsX).to.equal(96);
    expect(el.corners).to.equal('rounded');
  });

  it('tone should be by default primary', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

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

  it('as should be by default button', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

    expect(el.as).to.equal('button');
  });

  it('size should be by default standard', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

    expect(el.size).to.equal('base');
  });

  it('variant should be by default solid', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

    expect(el.variant).to.equal('solid');
  });

  it('disabled should be by default false', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

    expect(el.disabled).to.equal(false);
    expect(el.__buttonEl.getAttribute('aria-disabled')).to.equal('false');
  });

  it('loading should be by default false', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

    expect(el.loading).to.equal(false);
  });

  it('insets-x should be by default 3', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button>Hey there</mono-button>`,
    );

    expect(el.insetsX).to.equal(3);
  });

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

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

  it('disabling the element should not disable the underlying button but set it to aria-disabled', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button disabled>Hey there</mono-button>`,
    );

    expect(el.disabled).to.equal(true);
    expect(el.__buttonEl.disabled).to.equal(false);
    expect(el.__buttonEl.getAttribute('aria-disabled')).to.equal('true');
  });

  it('submit should only be set if as tag is a button', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button submit>Hey there</mono-button>`,
    );

    const el2 = await fixture<MonoButtonComp>(
      html`<mono-button as="a" submit>Hey there</mono-button>`,
    );

    expect(el.__buttonEl.type).to.equal('submit');
    expect(el2.__buttonEl.type).to.equal('');
  });

  it('as will throw if not allowed tag name', async () => {
    let caught = false;
    try {
      await fixture<MonoButtonComp>(
        html`<mono-button as="fake">Hey there</mono-button>`,
      );
    } catch (_e) {
      caught = true;
    }

    expect(caught).to.equal(true);
  });

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

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

  it('passes the a11y audit', async () => {
    const el = await fixture<MonoButtonComp>(
      html`<mono-button tone="highlight" variant="solid">Hello</mono-button>`,
    );

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