import {slideUp, slideDown} from '../services/animations';
import {Component} from './component';

export class ChapterContents extends Component {

    setup() {
        this.list = this.$refs.list;
        this.toggle = this.$refs.toggle;

        this.isOpen = this.toggle.classList.contains('open');
        this.toggle.addEventListener('click', this.click.bind(this));
    }

    open() {
        this.toggle.classList.add('open');
        this.toggle.setAttribute('aria-expanded', 'true');
        slideDown(this.list, 180);
        this.isOpen = true;
    }

    close() {
        this.toggle.classList.remove('open');
        this.toggle.setAttribute('aria-expanded', 'false');
        slideUp(this.list, 180);
        this.isOpen = false;
    }

    click(event) {
        event.preventDefault();
        this.isOpen ? this.close() : this.open();
    }

}