import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import './nile-side-bar';
import '../nile-side-bar-expand/nile-side-bar-expand';
import type { NileSideBar } from './nile-side-bar';

describe('NileSideBar — collapse/expand API', () => {
  it('1. defaults to expanded (not collapsed) and not overlay', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
    expect(el.collapsed).to.be.false;
    expect(el.overlay).to.be.false;
    expect(el.hasAttribute('overlay')).to.be.false;
  });

  it('2. collapse() sets collapsed state + reflects attribute', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
    el.collapse();
    await el.updateComplete;
    expect(el.collapsed).to.be.true;
    expect(el.hasAttribute('collapsed')).to.be.true;
  });

  it('3. expand() clears collapsed state', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar collapsed></nile-side-bar>`);
    expect(el.collapsed).to.be.true;
    el.expand();
    await el.updateComplete;
    expect(el.collapsed).to.be.false;
    expect(el.hasAttribute('collapsed')).to.be.false;
  });

  it('4. toggle() flips state', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
    el.toggle();
    await el.updateComplete;
    expect(el.collapsed).to.be.true;
    el.toggle();
    await el.updateComplete;
    expect(el.collapsed).to.be.false;
  });

  it('5. toggle(force) sets an explicit state', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
    el.toggle(false); // already expanded -> no-op
    await el.updateComplete;
    expect(el.collapsed).to.be.false;
    el.toggle(true);
    await el.updateComplete;
    expect(el.collapsed).to.be.true;
  });

  it('6. emits nile-toggle with new collapsed state', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
    setTimeout(() => el.collapse());
    const ev = await oneEvent(el, 'nile-toggle');
    expect(ev.detail.collapsed).to.be.true;
  });

  it('7. does NOT emit nile-toggle when state is unchanged', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
    let fired = false;
    el.addEventListener('nile-toggle', () => { fired = true; });
    el.expand(); // already expanded
    await el.updateComplete;
    expect(fired).to.be.false;
  });

  it('8. built-in expand button toggles the sidebar (normal mode)', async () => {
    const el = await fixture<NileSideBar>(html`
      <nile-side-bar>
        <nile-side-bar-expand slot="expand"></nile-side-bar-expand>
      </nile-side-bar>
    `);
    await el.updateComplete;
    const expandEl = el.querySelector('nile-side-bar-expand') as HTMLElement & { collapsed: boolean };
    const btn = expandEl.shadowRoot!.querySelector('.expand-btn') as HTMLElement;

    let detail: any;
    el.addEventListener('nile-toggle', (e: Event) => { detail = (e as CustomEvent).detail; });

    btn.click();
    await el.updateComplete;
    expect(el.collapsed).to.be.true;
    expect(detail.collapsed).to.be.true;
    expect(expandEl.collapsed).to.be.true; // arrow icon state stays in sync

    btn.click();
    await el.updateComplete;
    expect(el.collapsed).to.be.false;
    expect(expandEl.collapsed).to.be.false;
  });

  it('9. overlay attribute is opt-in and reflects', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar overlay></nile-side-bar>`);
    expect(el.overlay).to.be.true;
    el.overlay = false;
    await el.updateComplete;
    expect(el.hasAttribute('overlay')).to.be.false;
  });

  it('10. methods work the same with overlay enabled', async () => {
    const el = await fixture<NileSideBar>(html`<nile-side-bar overlay></nile-side-bar>`);
    el.collapse();
    await el.updateComplete;
    expect(el.collapsed).to.be.true;
    el.expand();
    await el.updateComplete;
    expect(el.collapsed).to.be.false;
  });
});