import * as React from 'react';
import { CellEditor, color, css, datagrid, markdown } from '../common';
import { MyScreen } from '../components/MyScreen';
import { TestGridView } from '../components/Test.Grid.view';
export const factory = (req) => {
    if (req.type === 'EDITOR') {
        return renderEditor(req);
    }
    if (req.type === 'SCREEN') {
        return renderScreen(req);
    }
    if (req.type === 'CELL') {
        return renderCell(req);
    }
    console.log(`Factory type '${req.type}' not supported by test.`, req);
    return null;
};
function renderEditor(req) {
    console.log(`\nTODO 🐷  extend [cell.props.view].editor \n`);
    return React.createElement(CellEditor, null);
}
function renderScreen(req) {
    console.group('🌳 renderScreen');
    console.log('req', req);
    console.log('req.view', req.view);
    console.groupEnd();
    const type = req.view.screen ? req.view.screen.type : 'DEFAULT';
    if (type === 'GRID') {
        const grid = datagrid.Grid.create({ ns: 'foo' });
        const styles = {
            base: css({
                flex: 1,
                backgroundColor: 'rgba(255, 0, 0, 0.1)',
                display: 'flex',
            }),
            grid: css({ Absolute: 20, border: `solid 1px ${color.format(-0.2)}` }),
        };
        return (React.createElement("div", Object.assign({}, styles.base),
            React.createElement(TestGridView, { grid: grid, style: styles.grid })));
    }
    else {
        return React.createElement(MyScreen, null);
    }
}
function renderCell(req) {
    const cell = req.cell;
    const view = cell.props.view;
    if (view && (!view.cell || !view.cell.type)) {
        return formatValue(cell.data);
    }
    else {
        const styles = {
            base: css({
                Absolute: 0,
                backgroundColor: 'rgba(255, 0, 0, 0.1)',
                fontSize: 11,
                Flex: 'center-center',
            }),
        };
        const type = view && view.cell ? view.cell.type : 'Unknown';
        return React.createElement("div", Object.assign({}, styles.base),
            "CUSTOM: ",
            type);
    }
}
function formatValue(cell) {
    let value = cell.props && cell.props.value ? cell.props.value : cell.value;
    value = typeof value === 'string' && !value.startsWith('=') ? markdown.toHtmlSync(value) : value;
    value = typeof value === 'object' ? JSON.stringify(value) : value;
    return value;
}
