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

const TRANSPARENT = 'rgba(0, 0, 0, 0)';

/**
 * The surface color comes from a design token, which a bare fixture does not
 * load — so pin it on a wrapper to have something concrete to assert against.
 */
async function withToken(markup: unknown) {
  const wrapper = await fixture<HTMLDivElement>(
    html`<div style="--nile-colors-neutral-100: rgb(1, 2, 3)">${markup}</div>`
  );
  const el = wrapper.querySelector('nile-side-bar-footer') as NileSideBarFooter;
  await el.updateComplete;
  return el;
}

const backgroundOf = (el: NileSideBarFooter) => getComputedStyle(el).backgroundColor;

describe('NileSideBarFooter — background', () => {
  it('1. defaults to "default" and reflects the attribute', async () => {
    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);
    expect(el.background).to.equal('default');
    expect(el.getAttribute('background')).to.equal('default');
  });

  it('2. paints the sidebar surface color by default', async () => {
    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);
    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
  });

  it('3. background="transparent" removes the background', async () => {
    const el = await withToken(
      html`<nile-side-bar-footer background="transparent"></nile-side-bar-footer>`
    );
    expect(el.background).to.equal('transparent');
    expect(backgroundOf(el)).to.equal(TRANSPARENT);
  });

  it('4. setting the property at runtime reflects and re-styles both ways', async () => {
    const el = await withToken(html`<nile-side-bar-footer></nile-side-bar-footer>`);

    el.background = 'transparent';
    await el.updateComplete;
    expect(el.getAttribute('background')).to.equal('transparent');
    expect(backgroundOf(el)).to.equal(TRANSPARENT);

    el.background = 'default';
    await el.updateComplete;
    expect(el.getAttribute('background')).to.equal('default');
    expect(backgroundOf(el)).to.equal('rgb(1, 2, 3)');
  });
});