function updateStatus(e) {
    const url = window.location.search ? window.location.href + '&o=u' : window.location.href + '?o=u';
    const postData = e.dataset;
    postData.value = e.checked ? 1 : null;
    const msgYes = e.dataset.yes;
    const msgNo = e.dataset.no;
    const blinkUpdate = one(`#blink_${e.dataset.id}`);
    //const
    if (blinkUpdate) {
        if (e.checked) {
            if(blinkUpdate.dataset.published) {
                blinkUpdate.innerHTML = blinkUpdate.dataset.published;
            }
            blinkUpdate.classList.remove('blink-green')
        } else {
            if(blinkUpdate.dataset.unpublished) {
                blinkUpdate.innerHTML = blinkUpdate.dataset.unpublished;
            }
            blinkUpdate.classList.add('blink-green')
        }
    }
    request({
        url: url,
        post: postData,
        done: data => {
            if (data.successMsg) {
                if (e.checked) {
                    flash.success(msgYes, true)
                } else {
                    flash.success(msgNo, true)
                }
            }
        }
    })
}

function symbolInputProtect(e) {
    e.value = e.value.replace(':', '');
    e.value = e.value.replace('\'', '');
    e.value = e.value.replace('\"', '');
}

function searchInCheckList(e) {
    all('.check-list label').forEach(l => {
        console.log(l.dataset.name);
        if (l.dataset.name.indexOf(e.value) !== -1) {
            l.style.display = 'block';
        } else {
            l.style.display = 'none';
        }
    });
}

function setSingleFileImage(e) {
    const [defaultIcon, add, edit, remove] = [
        appendElem('i', e.dataset.default, e.parentNode),
        appendElem('i', 'la la-plus', e),
        appendElem('i', 'la la-pencil', e),
        appendElem('i', 'la la-remove', e),
    ];

    let [canvas, img] = [null, null];
    if (e.dataset.src) {
        add.addClass('hidden');
        defaultIcon.addClass('hidden');
        img = addImg('appear', e.parentNode, e.dataset.src, 'prepend');
    } else {
        edit.addClass('hidden');
        remove.addClass('hidden');
    }

    if (add) {
        add.title = e.dataset.add;
        add.addEventListener('click', function () {
            chooseSingleFileImage(add, e.dataset.imageName, function (c) {
                defaultIcon.addClass('hidden');
                add.addClass('hidden');
                edit.removeClass('hidden');
                remove.removeClass('hidden');
                canvas = c;
                flash.warning(e.dataset.warning)
            });
        });
    }

    if (edit) {
        edit.title = e.dataset.edit;
        edit.addEventListener('click', function () {
            chooseSingleFileImage(edit, e.dataset.imageName, function (c) {
                defaultIcon.addClass('hidden');
                add.addClass('hidden');
                edit.removeClass('hidden');
                remove.removeClass('hidden');
                canvas = c;
                flash.warning(e.dataset.warning)
            });
        });
    }

    if (remove) {
        remove.title = e.dataset.remove;
        remove.addEventListener('click', function () {
            modal.confirm(e.dataset.removeMsg, function () {
                if (canvas) {
                    canvas.remove();
                }
                if (img) {
                    img.remove();
                }
                defaultIcon.removeClass('hidden');
                add.removeClass('hidden');
                edit.addClass('hidden');
                remove.addClass('hidden');
                if (e.dataset.src !== '') {
                    //TODO SEARCH IMAGE AND DELETE IT
                    request({
                        url: '/remove-img/',
                        post: {
                            hash: e.dataset.src
                        },
                        done: r => {
                            console.log(r);
                            flash.success(e.dataset.removeReady);
                        }
                    })
                } else {
                    flash.success(e.dataset.removeReady);
                }
            })
        });
    }

}

function chooseSingleFileImage(e, name, callback) {
    const bufferContent = e.innerHTML;
    const file = document.createElement('input');
    file.type = 'file';
    file.accept = 'image/jpeg, image/png';
    file.click();
    file.addEventListener('change', function () {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(file.files[0]);
        img.style.height = '100%';
        img.style.width = 'auto';
        const cropper = new Cropper(img, {
            autoCrop: false,
            aspectRatio: 1,
            ready() {
                this.cropper.crop();
            },
        });
        modal.confirm(img,
            () => {
                e = e.parentNode.parentNode;
                const canvas = cropper.getCroppedCanvas();
                const img = e.querySelector('img');
                if (img)
                    img.remove();
                e.prepend(canvas);
                canvas.toBlob(function (blob) {
                    bufferFiles[name] = new File([blob], name + '.png', {type: 'image/png'});
                }, 'image/png');
                callback(canvas);
            },
            () => {

            },
            {
                width: '50%',
                height: '70%'
            }
        );
    });
}

function setHistoryButton(e) {
    e.addEventListener('click', function () {
        all('.history-box', box => {
            if (e.hasClass('la-history')) {
                const b = box.parentNode.querySelector('.historyButton');
                b.switchClasses('la-remove', 'la-history');
            }
            box.remove();
        });

        if (e.hasClass('la-history')) {
            e.switchClasses('la-history', 'la-remove');
            const container = e.parentNode;
            container.style.position = 'relative';
            const historyBox = one('history-box', container);
            request({
                url: '/get-history/',
                post: {
                    table: e.dataset.table,
                    id: e.dataset.id
                },
                done: data => {
                    data.forEach(row => {
                        one('history-row', historyBox).innerHTML = row;
                    });
                    historyBox.addClass('open');

                }
            })
        } else {
            e.switchClasses('la-remove', 'la-history');
        }
    })
}

function setPositionButton(e) {
    e.addEventListener('click', function () {
        all('.position-box', box => {
            if (e.hasClass('la-stream')) {
                const b = box.parentNode.querySelector('.positionButton');
                b.switchClasses('la-remove', 'la-stream');
            }
            box.remove();
        });

        if (e.hasClass('la-stream')) {
            e.switchClasses('la-stream', 'la-remove');
            const container = e.parentNode;
            container.style.position = 'relative';
            const positionBox = one('position-box', container);
            request({
                url: '/get-article-positions/',
                post: {
                    article_key: e.dataset.articleKey
                },
                done: data => {
                    data.forEach(groupRow => {
                        const row = one('position-row', positionBox);
                        var positions = '';
                        groupRow.positions.forEach((p, i) => {
                            const c = p.checked ? 'checked' : '';
                            const cfa = p.checked_fa ? 'class="busy" title="Позицията е заета"' : ''
                            positions += `<label onclick="updateArticlePosition(this)" ${cfa}  style="margin-right: 5px"><input ${c} data-id="${p.id}" data-article-key="${e.dataset.articleKey}" type="checkbox"><span>${i + 1}</span></label>`;
                        });

                        row.innerHTML = `
                            <div class="group-row">
                                    <div class="group-name">${groupRow.group}</div>
                                    <div class="group-positions flex-wrap">
                                        ${positions}
                                    </div>
                            </div>
                        `;
                    });
                    //console.log(data);
                    positionBox.addClass('open');

                }
            })
        } else {
            e.switchClasses('la-remove', 'la-stream');
        }
    })
}

function updateArticlePosition(e) {
    e.removeClass('busy');
    const check = e.querySelector('input');

    request({
        url: '/update-article-position/',
        post: {
            id: check.dataset.id,
            article_key: check.dataset.articleKey,
            checked: check.checked,
        },
        done: r => {
            flash.success(r.message);
        }
    })
}

function saveAndBackToList(el) {
    event.preventDefault();
    const container = el.parentNode;
    const back = btoa(container.querySelector('a').href);
    history.pushState({}, null, window.location.href + `&back=${back}`);
    container.querySelector('#save').click();
}

function updateLabelRequire(e, id) {
    if (e.value !== '') {
        one(`${id}`).addClass('require')
    } else {
        one(`${id}`).removeClass('require')
    }
}