import {remove} from "lodash/array";

export default class ReadMore {
    constructor(shortContentElement, fullContentElement, toggleButtonElement) {
        this.shortContentElement = shortContentElement;
        this.fullContentElement = fullContentElement;
        this.toggleButtonElement = toggleButtonElement;

        // Initialize the state
        this.isExpanded = false;

        // Bind the click event to the toggle method
        this.toggleButtonElement.addEventListener('click', () => this.toggle());
    }

    toggle() {
        this.isExpanded = !this.isExpanded;

        // Update the view based on the current state
        this.updateView();
    }

    updateView() {
        if (this.isExpanded) {
            this.shortContentElement.classList.remove('is-active')
            this.fullContentElement.classList.add('is-active');
            this.toggleButtonElement.textContent = 'Lees minder';
        } else {
            this.shortContentElement.classList.add('is-active')
            this.fullContentElement.classList.remove('is-active');
            this.toggleButtonElement.textContent = 'Lees meer';
        }
    }
}