import { MaterialManage } from './UI/Editor/Material/MaterialManage';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

//黄金布局
import '../node_modules/golden-layout/src/css/goldenlayout-base.css';
// import '../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
import '../node_modules/golden-layout/src/css/goldenlayout-soda-theme.css';

//
import './UI/Css/style.less';

import { initDrawLayout } from './UI/Layout/Layout';
import { CommandComponent } from "./UI/Components/Command";
import { CommandMsg } from './UI/Store/CommandStore';
import { autorun, observable } from 'mobx';
import { Provider } from "mobx-react";
import { ApplicationService, app } from './ApplicationServices/Application';
import { DownPanel } from './UI/Components/Panel';
import { DownPanelStore } from './UI/Store/DownPanelStore';
import { DrawBox, DrawCircle, DrawLine, DrawRect, DrawSphere, DrawTest, ZoomE } from './Add-on/DrawLine';
import { UndoData } from './DatabaseServices/UndoData';
import { Solid3d, Line } from './DatabaseServices/Entity';
import { Vector3 } from 'three';
import { Command_Move } from './Add-on/Move';
import { Command_Rotate } from './Add-on/Rotate';
import * as THREE from 'three';
import { MaterialAsset } from './UI/Editor/Asset/MaterialAsset';
import { LoadMater } from './UI/Layout/Material.layout';
import { DrawFloor } from './Add-on/DrawFloor';
import { Command_SwitchCamera } from './Add-on/SwitchCamera';
import { Command_Erase } from './Add-on/Erase';
import { end } from 'xaop';
import { Command_SwitchPass } from './Add-on/SwitchPass';
import { Command_DrawBoard } from './Add-on/DrawBoard';
import { Undo, Redo } from './Add-on/Undo';

document.onselectstart = () => false
/**
 * 创建总体布局. 上下分栏. 中间绘图层.
 * 
 * @returns 
 */
function initRootLayout()
{
    let top = document.createElement("div");
    top.style.height = "20px";
    top.id = "TopPanel";
    document.body.appendChild(top);


    var root = document.createElement('div');
    root.id = "app"
    root.style.height = "calc(100% - 35px)";
    document.body.appendChild(root);


    let down = document.createElement("div");
    down.style.height = "15px";
    down.id = "DownPanel";
    document.body.appendChild(down);
    return root;
}

//命令栏.
function renderCommand()
{
    let commandEl = document.getElementById("commandContainer")
    ReactDOM.render(
        <Provider commandStore={app.m_Editor.m_CommandStore}>
            <CommandComponent />
        </Provider>,
        commandEl
    )
}

//底部状态栏.
function renderDownPanel()
{
    let downPanelEl = document.getElementById("DownPanel")
    let downPanelStore = new DownPanelStore();
    ReactDOM.render(
        <Provider store={downPanelStore}>
            <DownPanel />
        </Provider>,
        downPanelEl
    )
}

function initApp()
{
    new ApplicationService();
    //TODO: Test
    window["undoData"] = new UndoData(app);

    app.m_Editor.m_CommandMachine.m_CommandList.set("l", new DrawLine())
    app.m_Editor.m_CommandMachine.m_CommandList.set("u", new Undo())
    app.m_Editor.m_CommandMachine.m_CommandList.set("redo", new Redo())
    app.m_Editor.m_CommandMachine.m_CommandList.set("ze", new ZoomE())
    app.m_Editor.m_CommandMachine.m_CommandList.set("box", new DrawBox())
    app.m_Editor.m_CommandMachine.m_CommandList.set("rec", new DrawRect())
    app.m_Editor.m_CommandMachine.m_CommandList.set("c", new DrawCircle())

    app.m_Editor.m_CommandMachine.m_CommandList.set("t", new DrawTest())
    app.m_Editor.m_CommandMachine.m_CommandList.set("m", new Command_Move())
    app.m_Editor.m_CommandMachine.m_CommandList.set("ro", new Command_Rotate())

    app.m_Editor.m_CommandMachine.m_CommandList.set("sp", new DrawSphere())

    app.m_Editor.m_CommandMachine.m_CommandList.set("fl", new DrawFloor())
    app.m_Editor.m_CommandMachine.m_CommandList.set("cc", new Command_SwitchCamera())
    app.m_Editor.m_CommandMachine.m_CommandList.set("p", new Command_SwitchPass())

    app.m_Editor.m_CommandMachine.m_CommandList.set("e", new Command_Erase())

    app.m_Editor.m_CommandMachine.m_CommandList.set("br", new Command_DrawBoard())
}

window.onload = function ()
{
    initRootLayout();
    initDrawLayout();
    initApp();
    renderCommand();
    renderDownPanel();
    LoadMater();

    let matEditor = new MaterialManage("materialManage");

    let mat = new THREE.MeshStandardMaterial({
        color: new THREE.Color(0, 1, 1)
    });
    matEditor.addMaterial(mat, "测试");
};