import { $, $$, showEl, hideEl, onGlobalLeftClick } from './utils/dom';
import {fetchJson, handleError} from "./utils/requests";

const selectedIds = [];
let batchSelecting = false;

const updateStatus = (el, text) => {
    $('span', el).textContent = text;
};

const markSelected = (elem) => {
    elem.classList.remove('media-box__header--unselected');
    elem.classList.add('media-box__header--selected');
};

const markUnselected = (elem) => {
    elem.classList.remove('media-box__header--selected');
    elem.classList.add('media-box__header--unselected');
};

const unmark = (elem) => {
    elem.classList.remove('media-box__header--selected');
    elem.classList.remove('media-box__header--unselected');
};

const saveSelectedIds = () => {
    localStorage.setItem('batch-select-ids', JSON.stringify([...selectedIds]));
};

const updateDom = () => {
    $$('.media-box__header').forEach(markUnselected);

    for (const postId of selectedIds) {
        $$(`.media-box[data-post-id="${postId}"] > .media-box__header`).forEach(markSelected);
    }
};

const onImageClicked = (elem) => {
    if (!batchSelecting) {
        return true;
    }

    const header = elem.querySelector('.media-box__header');
    const postId = elem.dataset.postId;

    if (selectedIds.indexOf(postId) !== -1) {
        selectedIds.splice(selectedIds.indexOf(postId), 1)
        markUnselected(header);
    } else {
        selectedIds.push(postId);
        markSelected(header);
    }

    saveSelectedIds();

    return false;
};

const beginBatchSelect = () => {
    hideEl($('.js-batch-select'));
    showEl($('.js-batch-select-abort'), $('.js-batch-select-tag'), $('.js-batch-select-delete'));
    updateDom();

    batchSelecting = true;

    return false;
};

const abortBatchSelect = () => {
    selectedIds.splice(0, selectedIds.length);
    localStorage.removeItem('batch-select-ids');
    hideEl($('.js-batch-select-abort'), $('.js-batch-select-tag'), $('.js-batch-select-delete'));
    $$('.media-box__header').forEach(unmark);
    showEl($('.js-batch-select'));


    batchSelecting = false;

    $('.js-batch-select-tag > span').innerText = 'Tag';
    $('.js-batch-select-delete > span').innerText = 'Delete';


    return false;
};

const submitBatchTag = (el) => {
    const tagString = prompt('Enter a comma-separated list of tags to add (-tag to remove): ');

    if (tagString === null || tagString === '') {
        return false;
    }

    updateStatus(el, 'Wait...');

    fetchJson('PUT', '/admin/batch/tags', {
        tags: tagString,
        post_ids: selectedIds,
    })
        .then(handleError)
        .then(r => r.json())
        .then(data => {
            if (data.failed.length) window.alert(`Failed to add tags to the images with these IDs: ${data.failed}`);
            else window.alert(`Successfully tagged ${data.succeeded.length} posts.`);
            abortBatchSelect();
        });

    return false;
};

const submitBatchDeletion = (el) => {
    const deletionReason = prompt('Enter deletion reason (hit cancel or leave blank to cancel): ');

    if (deletionReason === null || deletionReason === '') {
        return false;
    }

    updateStatus(el, 'Wait...');

    fetchJson('DELETE', '/admin/batch/posts', {
        deletion_reason: deletionReason,
        post_ids: selectedIds,
    })
        .then(handleError)
        .then(r => r.json())
        .then(data => {
            if (data.failed.length) window.alert(`Failed to delete the posts with these IDs: ${data.failed}`);
            else window.alert(`Successfully deleted ${data.succeeded.length} posts.`);

            abortBatchSelect();
        });
}

const setupBatchSelect = () => {
    const localStorageData = localStorage.getItem('batch-select-ids');

    if (localStorageData !== null) {
        for (const postId of JSON.parse(localStorageData)) {
            selectedIds.push(postId);
        }

        beginBatchSelect();
    }

    const targets = {
        '.js-batch-select': beginBatchSelect,
        '.js-batch-select-abort': abortBatchSelect,
        '.js-batch-select-tag': submitBatchTag,
        '.js-batch-select-delete': submitBatchDeletion,
        '.media-box': onImageClicked
    };

    onGlobalLeftClick(targets);
};

export { setupBatchSelect };