import BaseComponent from './BaseComponent';
import SetValueCommand from '../command/SetValueCommand';
import AddObjectCommand from '../command/AddObjectCommand';

/**
 * 场景组件
 * @author tengge / https://github.com/tengge1
 * @param {*} options 
 */
function SceneComponent(options) {
    BaseComponent.call(this, options);
    this.selected = null;
}

SceneComponent.prototype = Object.create(BaseComponent.prototype);
SceneComponent.prototype.constructor = SceneComponent;

SceneComponent.prototype.render = function () {
    var data = {
        xtype: 'div',
        id: 'scenePanel',
        scope: this.id,
        parent: this.parent,
        cls: 'Panel',
        style: {
            display: 'none'
        },
        children: [{
            xtype: 'row',
            children: [{
                xtype: 'label',
                style: {
                    color: '#555',
                    fontWeight: 'bold'
                },
                text: '场景组件'
            }]
        }, {
            xtype: 'row',
            children: [{
                xtype: 'label',
                text: '背景'
            }, {
                xtype: 'select',
                id: 'backgroundType',
                scope: this.id,
                options: {
                    'Color': '纯色',
                    'Image': '背景图片',
                    'SkyBox': '立体贴图'
                },
                onChange: this.onChangeBackgroundType.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundColorRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: '背景颜色'
            }, {
                xtype: 'color',
                id: 'backgroundColor',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundImageRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: '背景图片'
            }, {
                xtype: 'texture',
                id: 'backgroundImage',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundPosXRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: 'x轴正向'
            }, {
                xtype: 'texture',
                id: 'backgroundPosX',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundNegXRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: 'x轴负向'
            }, {
                xtype: 'texture',
                id: 'backgroundNegX',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundPosYRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: 'y轴正向'
            }, {
                xtype: 'texture',
                id: 'backgroundPosY',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundNegYRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: 'y轴负向'
            }, {
                xtype: 'texture',
                id: 'backgroundNegY',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundPosZRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: 'z轴正向'
            }, {
                xtype: 'texture',
                id: 'backgroundPosZ',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'backgroundNegZRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: 'z轴负向'
            }, {
                xtype: 'texture',
                id: 'backgroundNegZ',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            children: [{
                xtype: 'label',
                text: '雾'
            }, {
                xtype: 'select',
                id: 'fogType',
                scope: this.id,
                options: {
                    'None': '无',
                    'Fog': '线性',
                    'FogExp2': '指数型'
                },
                onChange: this.onChangeFogType.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'fogColorRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: '雾颜色'
            }, {
                xtype: 'color',
                id: 'fogColor',
                scope: this.id,
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'fogNearRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: '雾近点'
            }, {
                xtype: 'number',
                id: 'fogNear',
                scope: this.id,
                range: [0, Infinity],
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'fogFarRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: '雾远点'
            }, {
                xtype: 'number',
                id: 'fogFar',
                scope: this.id,
                range: [0, Infinity],
                onChange: this.update.bind(this)
            }]
        }, {
            xtype: 'row',
            id: 'fogDensityRow',
            scope: this.id,
            children: [{
                xtype: 'label',
                text: '雾浓度'
            }, {
                xtype: 'number',
                id: 'fogDensity',
                scope: this.id,
                range: [0, 0.1],
                precision: 3,
                onChange: this.update.bind(this)
            }]
        }]
    };

    var control = UI.create(data);
    control.render();

    this.app.on(`objectSelected.${this.id}`, this.onObjectSelected.bind(this));
    this.app.on(`objectChanged.${this.id}`, this.onObjectChanged.bind(this));
};

SceneComponent.prototype.onObjectSelected = function () {
    this.updateUI();
};

SceneComponent.prototype.onObjectChanged = function () {
    this.updateUI();
};

SceneComponent.prototype.updateUI = function () {
    var container = UI.get('scenePanel', this.id);
    var editor = this.app.editor;
    if (editor.selected && editor.selected instanceof THREE.Scene) {
        container.dom.style.display = '';
    } else {
        container.dom.style.display = 'none';
        return;
    }

    this.selected = editor.selected;
    var scene = this.selected;

    // 背景
    var backgroundColorRow = UI.get('backgroundColorRow', this.id);
    var backgroundImageRow = UI.get('backgroundImageRow', this.id);
    var backgroundPosXRow = UI.get('backgroundPosXRow', this.id);
    var backgroundNegXRow = UI.get('backgroundNegXRow', this.id);
    var backgroundPosYRow = UI.get('backgroundPosYRow', this.id);
    var backgroundNegYRow = UI.get('backgroundNegYRow', this.id);
    var backgroundPosZRow = UI.get('backgroundPosZRow', this.id);
    var backgroundNegZRow = UI.get('backgroundNegZRow', this.id);

    var backgroundType = UI.get('backgroundType', this.id);
    var backgroundColor = UI.get('backgroundColor', this.id);
    var backgroundImage = UI.get('backgroundImage', this.id);
    var backgroundPosX = UI.get('backgroundPosX', this.id);
    var backgroundNegX = UI.get('backgroundNegX', this.id);
    var backgroundPosY = UI.get('backgroundPosY', this.id);
    var backgroundNegY = UI.get('backgroundNegY', this.id);
    var backgroundPosZ = UI.get('backgroundPosZ', this.id);
    var backgroundNegZ = UI.get('backgroundNegZ', this.id);

    backgroundType.setValue(`${scene.background instanceof THREE.CubeTexture ? 'SkyBox' : (scene.background instanceof THREE.Texture ? 'Image' : 'Color')}`);

    backgroundColorRow.dom.style.display = scene.background instanceof THREE.Color ? '' : 'none';
    backgroundColor.setValue(`#${scene.background instanceof THREE.Color ? scene.background.getHexString() : 'aaaaaa'}`);

    backgroundImageRow.dom.style.display = (scene.background instanceof THREE.Texture && !(scene.background instanceof THREE.CubeTexture)) ? '' : 'none';
    backgroundImage.setValue((scene.background instanceof THREE.Texture && !(scene.background instanceof THREE.CubeTexture)) ? scene.background : null);

    backgroundPosXRow.dom.style.display = scene.background instanceof THREE.CubeTexture ? '' : 'none';
    backgroundNegXRow.dom.style.display = scene.background instanceof THREE.CubeTexture ? '' : 'none';
    backgroundPosYRow.dom.style.display = scene.background instanceof THREE.CubeTexture ? '' : 'none';
    backgroundNegYRow.dom.style.display = scene.background instanceof THREE.CubeTexture ? '' : 'none';
    backgroundPosZRow.dom.style.display = scene.background instanceof THREE.CubeTexture ? '' : 'none';
    backgroundNegZRow.dom.style.display = scene.background instanceof THREE.CubeTexture ? '' : 'none';

    backgroundPosX.setValue(scene.background instanceof THREE.CubeTexture ? new THREE.Texture(scene.background.image[0]) : null);
    backgroundNegX.setValue(scene.background instanceof THREE.CubeTexture ? new THREE.Texture(scene.background.image[1]) : null);
    backgroundPosY.setValue(scene.background instanceof THREE.CubeTexture ? new THREE.Texture(scene.background.image[2]) : null);
    backgroundNegY.setValue(scene.background instanceof THREE.CubeTexture ? new THREE.Texture(scene.background.image[3]) : null);
    backgroundPosZ.setValue(scene.background instanceof THREE.CubeTexture ? new THREE.Texture(scene.background.image[4]) : null);
    backgroundNegZ.setValue(scene.background instanceof THREE.CubeTexture ? new THREE.Texture(scene.background.image[5]) : null);

    // 雾效
    var fogColorRow = UI.get('fogColorRow', this.id);
    var fogNearRow = UI.get('fogNearRow', this.id);
    var fogFarRow = UI.get('fogFarRow', this.id);
    var fogDensityRow = UI.get('fogDensityRow', this.id);

    var fogType = UI.get('fogType', this.id);
    var fogColor = UI.get('fogColor', this.id);
    var fogNear = UI.get('fogNear', this.id);
    var fogFar = UI.get('fogFar', this.id);
    var fogDensity = UI.get('fogDensity', this.id);

    fogType.setValue(scene.fog == null ? 'None' : ((scene.fog instanceof THREE.FogExp2) ? 'FogExp2' : 'Fog'));

    fogColorRow.dom.style.display = scene.fog == null ? 'none' : '';
    fogColor.setValue(`#${scene.fog == null ? 'aaaaaa' : scene.fog.color.getHexString()}`);

    fogNearRow.dom.style.display = (scene.fog && scene.fog instanceof THREE.Fog) ? '' : 'none';
    fogNear.setValue((scene.fog && scene.fog instanceof THREE.Fog) ? scene.fog.near : 0.1);

    fogFarRow.dom.style.display = (scene.fog && scene.fog instanceof THREE.Fog) ? '' : 'none';
    fogFar.setValue((scene.fog && scene.fog instanceof THREE.Fog) ? scene.fog.far : 50);

    fogDensityRow.dom.style.display = (scene.fog && scene.fog instanceof THREE.FogExp2) ? '' : 'none';
    fogDensity.setValue((scene.fog && scene.fog instanceof THREE.FogExp2) ? fog.density : 0.05);
};

SceneComponent.prototype.onChangeBackgroundType = function () { // 切换背景类型
    var backgroundType = UI.get('backgroundType', this.id);

    var backgroundColorRow = UI.get('backgroundColorRow', this.id);
    var backgroundImageRow = UI.get('backgroundImageRow', this.id);
    var backgroundPosXRow = UI.get('backgroundPosXRow', this.id);
    var backgroundNegXRow = UI.get('backgroundNegXRow', this.id);
    var backgroundPosYRow = UI.get('backgroundPosYRow', this.id);
    var backgroundNegYRow = UI.get('backgroundNegYRow', this.id);
    var backgroundPosZRow = UI.get('backgroundPosZRow', this.id);
    var backgroundNegZRow = UI.get('backgroundNegZRow', this.id);

    switch (backgroundType.getValue()) {
        case 'Color':
            backgroundColorRow.dom.style.display = '';
            backgroundImageRow.dom.style.display = 'none';
            backgroundPosXRow.dom.style.display = 'none';
            backgroundNegXRow.dom.style.display = 'none';
            backgroundPosYRow.dom.style.display = 'none';
            backgroundNegYRow.dom.style.display = 'none';
            backgroundPosZRow.dom.style.display = 'none';
            backgroundNegZRow.dom.style.display = 'none';
            break;
        case 'Image':
            backgroundColorRow.dom.style.display = 'none';
            backgroundImageRow.dom.style.display = '';
            backgroundPosXRow.dom.style.display = 'none';
            backgroundNegXRow.dom.style.display = 'none';
            backgroundPosYRow.dom.style.display = 'none';
            backgroundNegYRow.dom.style.display = 'none';
            backgroundPosZRow.dom.style.display = 'none';
            backgroundNegZRow.dom.style.display = 'none';
            break;
        case 'SkyBox':
            backgroundColorRow.dom.style.display = 'none';
            backgroundImageRow.dom.style.display = 'none';
            backgroundPosXRow.dom.style.display = '';
            backgroundNegXRow.dom.style.display = '';
            backgroundPosYRow.dom.style.display = '';
            backgroundNegYRow.dom.style.display = '';
            backgroundPosZRow.dom.style.display = '';
            backgroundNegZRow.dom.style.display = '';
            break;
    }

    this.update();
};

SceneComponent.prototype.onChangeFogType = function () { // 切换雾类型
    var fogType = UI.get('fogType', this.id);
    var fogColorRow = UI.get('fogColorRow', this.id);
    var fogNearRow = UI.get('fogNearRow', this.id);
    var fogFarRow = UI.get('fogFarRow', this.id);
    var fogDensityRow = UI.get('fogDensityRow', this.id);

    switch (fogType.getValue()) {
        case 'None':
            fogColorRow.dom.style.display = 'none';
            fogNearRow.dom.style.display = 'none';
            fogFarRow.dom.style.display = 'none';
            fogDensityRow.dom.style.display = 'none';
            break;
        case 'Fog':
            fogColorRow.dom.style.display = '';
            fogNearRow.dom.style.display = '';
            fogFarRow.dom.style.display = '';
            fogDensityRow.dom.style.display = 'none';
            break;
        case 'FogExp2':
            fogColorRow.dom.style.display = '';
            fogNearRow.dom.style.display = 'none';
            fogFarRow.dom.style.display = 'none';
            fogDensityRow.dom.style.display = '';
            break;
    }

    this.update();
};

SceneComponent.prototype.update = function () {
    var scene = this.selected;

    // 背景
    var backgroundType = UI.get('backgroundType', this.id).getValue();
    var backgroundColor = UI.get('backgroundColor', this.id).getHexValue();
    var backgroundImage = UI.get('backgroundImage', this.id).getValue();
    var backgroundPosX = UI.get('backgroundPosX', this.id).getValue();
    var backgroundNegX = UI.get('backgroundNegX', this.id).getValue();
    var backgroundPosY = UI.get('backgroundPosY', this.id).getValue();
    var backgroundNegY = UI.get('backgroundNegY', this.id).getValue();
    var backgroundPosZ = UI.get('backgroundPosZ', this.id).getValue();
    var backgroundNegZ = UI.get('backgroundNegZ', this.id).getValue();

    switch (backgroundType) {
        case 'Color':
            scene.background = new THREE.Color(backgroundColor);
            break;
        case 'Image':
            if (backgroundImage) {
                scene.background = backgroundImage;
            }
            break;
        case 'SkyBox':
            if (backgroundPosX && backgroundNegX && backgroundPosY && backgroundNegY && backgroundPosZ && backgroundNegZ) {
                scene.background = new THREE.CubeTexture([
                    backgroundPosX.image,
                    backgroundNegX.image,
                    backgroundPosY.image,
                    backgroundNegY.image,
                    backgroundPosZ.image,
                    backgroundNegZ.image
                ]);
                scene.background.needsUpdate = true;
            }
            break;
    }

    // 雾
    var fogType = UI.get('fogType', this.id).getValue();
    var fogColor = UI.get('fogColor', this.id).getHexValue();
    var fogNear = UI.get('fogNear', this.id).getValue();
    var fogFar = UI.get('fogFar', this.id).getValue();
    var fogDensity = UI.get('fogDensity', this.id).getValue();

    switch (fogType) {
        case 'None':
            scene.fog = null;
            break;
        case 'Fog':
            scene.fog = new THREE.Fog(fogColor, fogNear, fogFar);
            break;
        case 'FogExp2':
            scene.fog = new THREE.FogExp2(fogColor, fogDensity);
            break;
    }
};

export default SceneComponent;