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-id');

        this.saveTargets.forEach((btn, index) => {
            if (btn.getAttribute('data-id') === 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-id');
        let term = '';

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

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

        const url = event.currentTarget.getAttribute('data-url');

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

        if (res.status === 200) {
            let notif = document.getElementById('ajax-saved');
            notif.classList.toggle('is-hidden');
        };

        this.cancelTargets.find(btn => btn.getAttribute('data-id') === id)
            .classList.toggle('is-hidden');

        this.editTargets.find(btn => btn.getAttribute('data-id') === id)
            .classList.toggle('is-hidden');
        const input = this.inputTargets.find(input => input.getAttribute('data-id') === id)
        input.disabled = true;
        event.target.classList.toggle('is-hidden');

    }
    /**
     * 
     * @todo Show modal before deleting! Show delete error (500)!
     */
    async delete(event) {
        const id = event.currentTarget.getAttribute('data-id');
        const url = event.currentTarget.getAttribute('data-url');

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

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

        if (res.status === 200) {
            let notif = document.getElementById('ajax-deleted');
            notif.classList.toggle('is-hidden');
            this.rowTargets.find(row => row.getAttribute('data-id') === id)
                .classList.add('is-hidden');
        };

        if (res.status === 500) {
            let notif = document.getElementById('ajax-error');
            notif.classList.toggle('is-hidden');
        }
    }

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

        this.editTargets.forEach((btn, index) => {
            if (btn.getAttribute('data-id') === 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');
            }
        });
    }
}