import { expect } from '@open-wc/testing';
import { fixtures } from '../../internal/test/fixture.js';
import { html } from 'lit';
import sinon from 'sinon';
import type WaTag from './tag.js';

describe('<wa-tag>', () => {
  for (const fixture of fixtures) {
    describe(`with "${fixture.type}" rendering`, () => {
      it('should render default tag', async () => {
        const el = await fixture<WaTag>(html` <wa-tag>Test</wa-tag> `);

        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;

        expect(el.getAttribute('size')).to.equal('medium');
        expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium ');
      });

      it('should set variant by attribute', async () => {
        const el = await fixture<WaTag>(html` <wa-tag variant="danger">Test</wa-tag> `);

        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;

        expect(base.getAttribute('class')).to.equal(' tag tag--danger tag--medium ');
      });

      it('should set size by attribute', async () => {
        const el = await fixture<WaTag>(html` <wa-tag size="large">Test</wa-tag> `);

        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;

        expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--large ');
      });

      it('should set pill-attribute by attribute', async () => {
        const el = await fixture<WaTag>(html` <wa-tag pill>Test</wa-tag> `);

        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;

        expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--pill ');
      });

      it('should set removable by attribute', async () => {
        const el = await fixture<WaTag>(html` <wa-tag removable>Test</wa-tag> `);

        const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
        const removeButton = el.shadowRoot!.querySelector('[part~="remove-button"]');

        expect(el.removable).to.equal(true);
        expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--removable ');
        expect(removeButton).not.to.be.null;
      });

      describe('removable', () => {
        it('should emit remove event when remove button clicked', async () => {
          const el = await fixture<WaTag>(html` <wa-tag removable>Test</wa-tag> `);

          const removeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="remove-button"]')!;
          const spy = sinon.spy();

          el.addEventListener('wa-remove', spy, { once: true });

          removeButton.click();

          expect(spy.called).to.equal(true);
        });
      });
    });
  }
});
