function imageFullscreen() {
    let info = document.querySelector('.info-container');
    let image = document.querySelector('.image-container');

    if (info.classList.contains('collapsed')) {
        info.classList.remove('collapsed');
        image.classList.remove('collapsed');
        document.cookie = "image-info=0"
    } else {
        info.classList.add('collapsed');
        image.classList.add('collapsed');
        document.cookie = "image-info=1"
    }
}

function imageShowOptionsPopup(obj) {
    // let title = 'Options';
    // let subtitle = null;
    //
    // let body = document.createElement('div');
    //     body.style.cssText = 'display: flex; flex-direction: column; gap: 0.5rem;';
    //
    // let copyBtn = document.createElement('button');
    //     copyBtn.classList.add('btn-block');
    //     copyBtn.innerHTML = 'Copy URL';
    //     copyBtn.onclick = () => {
    //         copyToClipboard(window.location.href)
    //     }
    //
    // let downloadBtn = document.createElement('a');
    //     downloadBtn.classList.add('btn-block');
    //     downloadBtn.innerHTML = 'Download';
    //     downloadBtn.href = '/api/media/uploads/' + image_data["filename"];
    //     downloadBtn.download = '';
    //
    // body.appendChild(copyBtn);
    // body.appendChild(downloadBtn);
    //
    // if (image_data["owner"]) {
    //     let editBtn = document.createElement('button');
    //         editBtn.classList.add('btn-block');
    //         editBtn.classList.add('critical');
    //         editBtn.innerHTML = 'Edit';
    //         editBtn.onclick = imageEditPopup;
    //
    //     let deleteBtn = document.createElement('button');
    //         deleteBtn.classList.add('btn-block');
    //         deleteBtn.classList.add('critical');
    //         deleteBtn.innerHTML = 'Delete';
    //         deleteBtn.onclick = imageDeletePopup;
    //
    //     body.appendChild(editBtn);
    //     body.appendChild(deleteBtn);
    // }
    //
    // popupShow(title, subtitle, body, [popupCancelButton]);

    showContextMenu(obj, [
        {
            'value': 'Edit',
            'function': () => {
                dissmissContextMenu();
                imageEditPopup();
            },
            'type': 'critical'
        },
        {
            'value': 'Delete',
            'function': () => {
                dissmissContextMenu();
                imageDeletePopup();
            },
            'type': 'critical'
        }
    ], 'button')
}

function imageDeletePopup() {
    let title = 'DESTRUCTION!!!!!!';
    let subtitle =
        'Do you want to delete this image along with ' +
        'all of its data??? This action is irreversible!';
    let body = null;

    let deleteBtn = document.createElement('button');
        deleteBtn.classList.add('btn-block');
        deleteBtn.classList.add('critical');
        deleteBtn.innerHTML = 'Dewww eeeet!';
        deleteBtn.onclick = imageDeleteConfirm;

    popupShow(title, subtitle, body, [popupCancelButton, deleteBtn]);
}
function imageDeleteConfirm() {
    popupDismiss();

    fetch('/image/' + image_data["id"], {
        method: 'DELETE',
    }).then(response => {
        if (response.ok) {
            window.location.href = '/';
        } else {
            addNotification('Image *clings*', 2);
        }
    });
}

function imageEditPopup() {
    let title = 'Edit image!';
    let subtitle = 'Enter funny stuff here!';

    let formSubmitButton = document.createElement('button');
        formSubmitButton.setAttribute('form', 'imageEditForm');
        formSubmitButton.setAttribute('type', 'submit');
        formSubmitButton.classList.add('btn-block');
        formSubmitButton.classList.add('primary');
        formSubmitButton.innerHTML = 'Saveeee';

    // Create form
    let body = document.createElement('form');
        body.setAttribute('onsubmit', 'return imageEditConfirm(event);');
        body.id = 'imageEditForm';

    let formAlt = document.createElement('input');
        formAlt.setAttribute('type', 'text');
        formAlt.setAttribute('value', image_data["alt"]);
        formAlt.setAttribute('placeholder', 'Image Alt');
        formAlt.classList.add('input-block');
        formAlt.id = 'imageFormAlt';

    let formDescription = document.createElement('input');
        formDescription.setAttribute('type', 'text');
        formDescription.setAttribute('value', image_data["description"]);
        formDescription.setAttribute('placeholder', 'Image Description');
        formDescription.classList.add('input-block');
        formDescription.id = 'imageFormDescription';

    body.appendChild(formAlt);
    body.appendChild(formDescription);

    popupShow(title, subtitle, body, [popupCancelButton, formSubmitButton]);
}

function imageEditConfirm(event) {
    // Yoink subby form
    event.preventDefault();

    let alt = document.querySelector('#imageFormAlt').value;
    let description = document.querySelector('#imageFormDescription').value;
    let form = new FormData();
        form.append('alt', alt);
        form.append('description', description);

    fetch('/image/' + image_data["id"], {
        method: 'PUT',
        body: form,
    }).then(response => {
        if (response.ok) {
            window.location.reload();
        } else {
            addNotification('Image *clings*', 2);
        }
    });
}