import { expect } from '@open-wc/testing';
import { html } from 'lit';
import sinon from 'sinon';
import { fixtures } from '../../internal/test/fixture.js';
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> `);
        expect(el.getAttribute('size')).to.equal(null);
        expect(el.getAttribute('variant')).to.equal(null);
        expect(el.variant).to.equal('inherit');
      });

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

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

      it('should set pill attribute', async () => {
        const el = await fixture<WaTag>(html` <wa-tag pill>Test</wa-tag> `);
        expect(el.hasAttribute('pill')).to.be.true;
      });

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

        expect(el.removable).to.be.true;
        expect(removeButton).to.exist;
      });

      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('wa-icon-button');
          const spy = sinon.spy();

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

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