export default class EpisodeContainer extends HTMLElement {
    #resultsToggleBtnEl;
    #resultsTableEl;
    #resultsCountBadgeEl;

    constructor() {
        super();
        this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
        this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
        this.#resultsTableEl = this.querySelector('.results-container');

        this.#resultsToggleBtnEl.addEventListener('click', () => this.toggleResults());
        this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());
    }
    connectedCallback() {

    }

    // attribute change
    attributeChangedCallback(property, oldValue, newValue) {
        if (oldValue === newValue) return;
        this[ property ] = newValue;
    }

    static get observedAttributes() {
        return ['name'];
    }

    toggleResults() {
        this.#resultsToggleBtnEl.classList.toggle('rotate-90');
        this.#resultsToggleBtnEl.classList.toggle('-rotate-90');
        this.#resultsTableEl.classList.toggle('hidden');
    }
}