var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import { connect } from 'react-redux';
import { setAdvancedMode } from '../../actions/threed';
import styled from 'react-emotion';
import ObjectTree from './ObjectTree';
import ThreeDViewer from './ThreeDViewer.tsx';
import Toolbar from './Toolbar';
import PropertiesPanel from './PropertiesPanel';
import Document, { Tab } from '../Document';
import Switch from '../Switch';
import { Icon } from '@bitbloq/ui';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n"])));
var MainArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n"])));
var AdvanceModeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n\n  span {\n    font-size: 14px;\n    margin-right: 10px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n\n  span {\n    font-size: 14px;\n    margin-right: 10px;\n  }\n"])));
var menuOptions = function (props) { return [
    {
        id: 'file',
        label: 'File',
        children: [
            {
                id: 'download-project',
                label: 'Download Project',
                icon: React.createElement(Icon, { name: "download" }),
            },
        ],
    },
    {
        id: 'view',
        label: 'View',
        children: [
            {
                id: 'mode',
                label: 'Mode',
                icon: React.createElement(Icon, { name: "difficulty" }),
                children: [
                    {
                        id: 'basic-mode',
                        label: 'Basic',
                        checked: !props.advancedMode,
                    },
                    {
                        id: 'advanced-mode',
                        label: 'Advanced',
                        checked: props.advancedMode,
                    },
                ],
            },
            {
                id: 'change-theme',
                label: 'Change theme',
                icon: React.createElement(Icon, { name: "brush" }),
                children: [
                    {
                        id: 'color-theme',
                        label: 'Color',
                    },
                    {
                        id: 'gray-theme',
                        label: 'Gris',
                    },
                ],
            },
        ],
    },
    {
        id: 'share',
        label: 'Share',
        children: [
            {
                id: 'publish-explora',
                label: 'Publish in Explora',
                icon: React.createElement(Icon, { name: "publish" }),
            },
        ],
    },
]; };
var ThreeD = /** @class */ (function (_super) {
    __extends(ThreeD, _super);
    function ThreeD() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onMenuOptionClick = function (option) {
            var setAdvancedMode = _this.props.setAdvancedMode;
            switch (option.id) {
                case 'basic-mode':
                    setAdvancedMode(false);
                    return;
                case 'advanced-mode':
                    setAdvancedMode(true);
                    return;
                default:
                    return;
            }
        };
        return _this;
    }
    ThreeD.prototype.render = function () {
        var _a = this.props, advancedMode = _a.advancedMode, setAdvancedMode = _a.setAdvancedMode;
        var menuRightContent = (React.createElement(AdvanceModeWrap, null,
            React.createElement("span", null, "Modo avanzado"),
            React.createElement(Switch, { value: advancedMode, onChange: setAdvancedMode })));
        return (React.createElement(Document, { menuOptions: menuOptions(this.props), onMenuOptionClick: this.onMenuOptionClick, menuRightContent: menuRightContent },
            React.createElement(Tab, { icon: React.createElement(Icon, { name: "threed" }), label: "3D" },
                React.createElement(Container, null,
                    React.createElement(ObjectTree, null),
                    React.createElement(MainArea, null,
                        React.createElement(Toolbar, null),
                        React.createElement(ThreeDViewer, null)),
                    React.createElement(PropertiesPanel, null))),
            React.createElement(Tab, { icon: React.createElement(Icon, { name: "info" }), label: "Informaci\u00F3n del proyecto" })));
    };
    return ThreeD;
}(React.Component));
var mapStateToProps = function (state) { return ({
    advancedMode: state.threed.ui.advancedMode,
}); };
var mapDispatchToProps = function (dispatch) { return ({
    setAdvancedMode: function (active) { return dispatch(setAdvancedMode(active)); },
}); };
export default connect(mapStateToProps, mapDispatchToProps)(ThreeD);
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=ThreeD.js.map