'use strict';

const config = require('config');
const blessed = require('neo-blessed');
const opn = require('opn');
const formatters = require('./formatters');

function renderReleases(scenes, screen) {
    screen.realloc();

    const tableTop = blessed.Text({
        content: config.columns.reduce((acc, column, index) => `${acc}${'─'.repeat(column.width)}${index < config.columns.length - 1 ? '┬' : '┐\x1b[0m'}`, '\x1b[30m┌'),
    });

    const items = scenes.map((scene, sceneIndex) => {
        const row = config.columns.reduce((acc, column) => {
            const value = (scene[column.value] && (formatters[column.value]
                ? formatters[column.value](scene[column.value], column)
                : scene[column.value])
                .toString()) || '\x1b[90mNot available\x1b[0m';

            const realLength = value.replace(/\x1b\[\d+m/g, '').length; // eslint-disable-line no-control-regex
            const entityLength = value.length - realLength;

            const truncatedValue = realLength > column.width - 2 ? `${value.slice(0, column.width - 2 - 3)}...` : value;
            const paddedValue = truncatedValue.padEnd(column.width + entityLength - 1).padStart(column.width + entityLength);
            const coloredValue = scene.upcoming ? `\x1b[92m${paddedValue}\x1b[0m` : `\x1b[97m${paddedValue}\x1b[0m`;

            return `${acc}${coloredValue}\x1b[90m│\x1b[0m`;
        }, '\x1b[90m│\x1b[0m');

        if (sceneIndex < scenes.length - 1) {
            const line = config.columns.reduce((acc, column, index) => `${acc}${'─'.repeat(column.width)}${index < config.columns.length - 1 ? '┼' : '┤\x1b[0m'}`, '\n\x1b[30m├');

            return `${row}${line}`;
        }

        return `${row}${sceneIndex}`;
    });

    const menu = blessed.List({
        style: {
            selected: {
                bold: true,
            },
        },
        top: 1,
        height: screen.rows - 3,
        // width: 161,
        width: config.columns.reduce((acc, column) => acc + column.width, 0),
        keys: true,
        vi: true,
        mouse: true,
        scrollbar: {
            style: {
                bg: 'red',
            },
            track: {
                bg: 'magenta',
            },
        },
        items,
    });

    menu.search = (cb) => {
        const searchbox = blessed.Textbox({
            inputOnFocus: true,
        });

        screen.append(searchbox);
        searchbox.focus();

        screen.render();

        searchbox.on('submit', () => {
            menu.focus();
            cb(null, searchbox.value);

            screen.append(menu);
            screen.render();
        });
    };

    const tableBottom = blessed.Text({
        content: config.columns.reduce((acc, column, index) => `${acc}${'─'.repeat(column.width)}${index < config.columns.length - 1 ? '┴' : '┘\x1b[0m\n'}`, '\x1b[30m└'),
        top: screen.rows - 2,
    });

    screen.append(tableTop);
    screen.append(menu);
    screen.append(tableBottom);

    menu.focus();

    menu.on('select', (child) => {
        const scene = scenes[menu.getItemIndex(child)];

        opn(scene.url);
    });

    screen.render();
}

function renderScene(scene, _screen) {
    console.log(scene);
}

module.exports = {
    renderReleases,
    renderScene,
};