import express from 'express';
import path from 'path';
import { SSR, Renderer } from '@fmfe/genesis-core';
import httpProxy from 'http-proxy';
import MyPlugin from './plug';

/**
 * 创建一个应用程序
 */
export const app = express();

/**
 * 创建一个 SSR 实例
 */
export const ssr = new SSR({
    name: 'ssr-demo',
    build: {
        alias: {
            '@': path.resolve(__dirname, './src')
        },
        template: path.resolve(__dirname, './index.html'),
        // transpile: [path.resolve('./node_modules/@fmfe/genesis-app/src')]
        transpile: [
            path.resolve('./node_modules/@fmfe/genesis-app'),
            path.resolve('./node_modules/@fmfe/genesis-remote')
        ]
    }
});
ssr.plugin.use(new MyPlugin(ssr));

/**
 * 拿到渲染器后，启动应用程序
 */
export const startApp = (renderer: Renderer) => {
    const renderModes = ['ssr-html', 'ssr-json', 'csr-html', 'csr-json'];
    /**
     * 提供一个API允许外部渲染
     */
    app.use('/api/render', (req, res, next) => {
        // 获取渲染的地址
        const url = decodeURIComponent(String(req.query.renderUrl));
        // 获取路由渲染的模式
        const routerMode =
            ['abstract', 'history'].indexOf(String(req.query.routerMode)) > -1
                ? req.query.routerMode
                : 'history';
        // 渲染默认
        const mode: any =
            renderModes.indexOf(String(req.query.renderMode)) > -1
                ? String(req.query.renderMode)
                : 'ssr-json';

        renderer
            .render({
                url,
                mode,
                state: {
                    routerMode
                }
            })
            .then((r) => {
                res.send(r.data);
            })
            .catch(next);
    });

    const proxy = httpProxy.createProxyServer({});
    app.use('/api/', (req, res, next) => {
        proxy.web(
            req,
            res,
            {
                target: 'http://b2b.westafricatech.com/api/',
                changeOrigin: true
            },
            (err) => {
                res.status(500).send(err.message);
            }
        );
    });

    /**
     * 使用默认渲染中间件进行渲染，你也可以调用更加底层的 renderer.renderJson 和 renderer.renderHtml 来实现渲染
     */
    app.use(renderer.renderMiddleware);
    /**
     * 监听端口
     */
    const prot = 4123;
    app.listen(prot, () =>
        console.log(`\u001b[31m http://localhost:${prot} \u001b[39m`)
    );
};