'use strict';

/**
 * this is the telescope-style fuzzy finder modal. it owns the overlay, the
 * result list + preview pane, and the current selection. the pure helpers
 * (clamp_index, result_url, is_editable) hang off the class as static methods
 */
export class Telescope {

    /**
     * this function wraps an index into [0, len), so moving past either end
     * of the result list loops around
     *
     * @param {number} i
     * @param {number} len
     * @return {number}
     */
    static clamp_index(i, len) {
        if (len <= 0) {
            return 0;
        }
        if (i < 0) {
            return len - 1;
        }
        if (i >= len) {
            return 0;
        }
        return i;
    }

    /**
     * this function builds the thread url for a search result
     *
     * @param {object} result
     * @return {string}
     */
    static result_url(result) {
        return '/thread/' + encodeURIComponent(result.thread_id);
    }

    /**
     * this function tells whether an element is something youre typing into,
     * so the "/" shortcut doesnt hijack a real input
     *
     * @param {Element} el
     * @return {boolean}
     */
    static is_editable(el) {
        if (!el) {
            return false;
        }
        const tag = el.tagName;
        return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable === true;
    }

    constructor() {
        this.results = [];
        this.selected = 0;
        this.open = false;
        this.timer = null;
        this.controller = null;
        this.build();
    }

    /**
     * this function builds the modal dom once and wires up its input + click
     * handlers, then parks it on the body hidden
     *
     * @return {void}
     */
    build() {
        const overlay = document.createElement('div');
        overlay.className = 'tele-overlay';
        overlay.innerHTML =
            '<div class="tele">' +
            '<input class="tele-input" type="text" placeholder="Search threads and posts..." autocomplete="off" spellcheck="false">' +
            '<div class="tele-body"><ul class="tele-list"></ul><div class="tele-preview"></div></div>' +
            '<div class="tele-footer"><span>&#x2191;&#x2193; move</span><span>&#x23ce; open</span><span>esc close</span></div>' +
            '</div>';

        this.overlay = overlay;
        this.input = overlay.querySelector('.tele-input');
        this.list = overlay.querySelector('.tele-list');
        this.preview = overlay.querySelector('.tele-preview');

        overlay.addEventListener('mousedown', (e) => {
            if (e.target === overlay) {
                this.close();
            }
        });
        this.input.addEventListener('input', () => {
            this.query(this.input.value);
        });
        this.input.addEventListener('keydown', (e) => {
            this.on_key(e);
        });

        document.body.appendChild(overlay);
    }

    /**
     * this function opens the modal, clearing whatever was there last and
     * focusing the input
     *
     * @return {void}
     */
    show() {
        this.open = true;
        this.overlay.classList.add('tele-visible');
        this.input.value = '';
        this.results = [];
        this.selected = 0;
        this.render();
        this.input.focus();
    }

    /**
     * this function closes the modal and aborts any in-flight search
     *
     * @return {void}
     */
    close() {
        this.open = false;
        this.overlay.classList.remove('tele-visible');
        if (this.controller) {
            this.controller.abort();
            this.controller = null;
        }
    }

    /**
     * this function handles keys while the modal is focused: esc closes,
     * enter opens the selection, and arrows / ctrl-j / ctrl-k move the cursor
     *
     * @param {KeyboardEvent} e
     * @return {void}
     */
    on_key(e) {
        if (e.key === 'Escape') {
            e.preventDefault();
            this.close();
        } else if (e.key === 'Enter') {
            e.preventDefault();
            this.choose();
        } else if (e.key === 'ArrowDown' || (e.ctrlKey && e.key === 'j')) {
            e.preventDefault();
            this.move(1);
        } else if (e.key === 'ArrowUp' || (e.ctrlKey && e.key === 'k')) {
            e.preventDefault();
            this.move(-1);
        }
    }

    /**
     * this function moves the selection by delta (wrapping at the ends)
     *
     * @param {number} delta
     * @return {void}
     */
    move(delta) {
        this.selected = Telescope.clamp_index(this.selected + delta, this.results.length);
        this.render();
    }

    /**
     * this function navigates to the currently selected result
     *
     * @return {void}
     */
    choose() {
        const r = this.results[this.selected];
        if (r) {
            window.location.href = Telescope.result_url(r);
        }
    }

    /**
     * this function debounces typing so we only hit the server once the user
     * pauses for a moment
     *
     * @param {string} q
     * @return {void}
     */
    query(q) {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => this.fetch(q), 120);
    }

    /**
     * this function fetches results from the /search json endpoint,
     * cancelling any earlier request thats still in flight so stale results
     * cant land late
     *
     * @param {string} q
     * @return {void}
     */
    fetch(q) {
        if (q.trim() === '') {
            this.results = [];
            this.selected = 0;
            this.render();
            return;
        }
        if (this.controller) {
            this.controller.abort();
        }
        this.controller = new AbortController();
        window.fetch('/search?json=1&q=' + encodeURIComponent(q), { signal: this.controller.signal })
            .then((r) => r.json())
            .then((data) => {
                this.results = data || [];
                this.selected = 0;
                this.render();
            })
            .catch(() => {});
    }

    /**
     * this function repaints the result list and the preview pane for the
     * current selection. titles go in as text, but the snippet is set as html
     * since the server already escaped it and only left <mark> tags in
     *
     * @return {void}
     */
    render() {
        this.list.innerHTML = '';

        if (!this.results.length) {
            this.preview.innerHTML = '';
            const empty = document.createElement('li');
            empty.className = 'tele-empty';
            empty.textContent = this.input.value.trim() === '' ? 'Type to search' : 'No results';
            this.list.appendChild(empty);
            return;
        }

        this.results.forEach((r, i) => {
            const li = document.createElement('li');
            li.className = 'tele-item' + (i === this.selected ? ' tele-active' : '');
            const title = document.createElement('span');
            title.className = 'tele-item-title';
            title.textContent = r.title;
            li.appendChild(title);
            if (r.board_slug) {
                const board = document.createElement('span');
                board.className = 'tele-item-board';
                board.textContent = r.board_slug;
                li.appendChild(board);
            }
            li.addEventListener('mouseenter', () => {
                this.selected = i;
                this.render();
            });
            li.addEventListener('click', () => this.choose());
            this.list.appendChild(li);
        });

        const sel = this.results[this.selected];
        this.preview.innerHTML =
            '<div class="tele-prev-title"></div><div class="tele-prev-snippet"></div>';
        this.preview.querySelector('.tele-prev-title').textContent = sel.title;
        this.preview.querySelector('.tele-prev-snippet').innerHTML = sel.snippet || '';
    }
}

/**
 * this function wires up the global "/" and ctrl-k shortcuts (ignored while
 * youre typing in a field) plus any [data-telescope] links
 *
 * @return {void}
 */
function telescope_init() {
    const tele = new Telescope();
    document.addEventListener('keydown', (e) => {
        if (tele.open) {
            return;
        }
        if (e.key === '/' && !Telescope.is_editable(e.target)) {
            e.preventDefault();
            tele.show();
        } else if (e.ctrlKey && e.key === 'k') {
            e.preventDefault();
            tele.show();
        }
    });
    const links = document.querySelectorAll('[data-telescope]');
    links.forEach((a) => {
        a.addEventListener('click', (e) => {
            e.preventDefault();
            tele.show();
        });
    });
}

if (typeof document !== 'undefined' && document.querySelectorAll) {
    telescope_init();
}