import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = [
        'row',
        'term',
        'input',
        'save',
        'edit',
        'cancel',
    ];

    static values = {
        saveUrl: String,
    };

    /**
     * @todo Simpler way? 
     */
    edit(event) {
        const id = event.currentTarget.getAttribute('data-vocabs-id-value');

        this.saveTargets.forEach((btn, index) => {
            if (btn.getAttribute('data-vocabs-id-value') === id) {
                btn.classList.toggle('is-hidden');
                this.inputTargets[index].disabled = false;
                this.cancelTargets[index].classList.toggle('is-hidden');
            }
        });

        event.currentTarget.classList.add('is-hidden');
    }

    async save(event) {
        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
        let term = '';

        for (let input of this.inputTargets) {
            if (input.getAttribute('data-vocabs-id-value') === id) {
                term = input.value;
            }
        }

        let data = new FormData;
        data.append("_id", id);
        data.append("_new_term", term);

        const res = await fetch(this.saveUrlValue, {
            method: "POST",
            body: data,
        });

        // TODO: show notification
        if (res.status === 200) {
            console.log('Saved...');
        };
    }

    delete() {
    }

    cancel(event) {
        const id = event.currentTarget.getAttribute('data-vocabs-id-value');

        this.editTargets.forEach((btn, index) => {
            if (btn.getAttribute('data-vocabs-id-value') === id) {
                btn.classList.toggle('is-hidden');
                this.inputTargets[index].disabled = true;
                this.saveTargets[index].classList.toggle('is-hidden');
                this.cancelTargets[index].classList.toggle('is-hidden');
            }
        });
    }
}