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

export default class extends Controller {
    static targets = ['value', 'textarea', 'save', 'revert', 'edit', 'delete']
    edit_card(){
        this.textareaTarget.style.display = 'block'
        this.saveTarget.style.display = 'block'
        this.revertTarget.style.display = 'block'
        this.valueTarget.style.display = 'none'
        this.editTarget.style.display = 'none'
        this.deleteTarget.style.display = 'none'
        this.textareaTarget.value = this.valueTarget.innerText
        this.element.draggable = false;
    }
    edit_card_save(){
        var value = this.textareaTarget.value.replace(/(?:\r\n|\r|\n)/g, '%5Cr%5Cn');
        console.log(this.textareaTarget.value);
        if(value.length === 0){
            return
        }
        const xhttp = new XMLHttpRequest()
        xhttp.open("GET", location.origin + `/kanban/api/card/set/value/${this.element.getAttribute('db_id')}/${value}`, true)
        xhttp.onreadystatechange = (ev) => {
            if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
                this.valueTarget.innerText = this.textareaTarget.value;
                this.valueTarget.style.display = 'block'
                this.editTarget.style.display = 'block'
                this.deleteTarget.style.display = 'block'
                this.textareaTarget.style.display = 'none'
                this.saveTarget.style.display = 'none'
                this.revertTarget.style.display = 'none'
                this.element.draggable = true;
            }
        }
        xhttp.send()

    }
    edit_card_revert(){
        this.valueTarget.style.display = 'block'
        this.editTarget.style.display = 'block'
        this.deleteTarget.style.display = 'block'
        this.textareaTarget.style.display = 'none'
        this.saveTarget.style.display = 'none'
        this.revertTarget.style.display = 'none'
        this.element.draggable = true;
    }
    delete_card(){
        const xhttp = new XMLHttpRequest()
        xhttp.open("GET", location.origin + `/kanban/api/card/delete/${this.element.getAttribute('db_id')}`, true)
        xhttp.onreadystatechange = (ev) => {
            if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
                this.element.remove()
            }
        }
        xhttp.send()
    }
}