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 __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import * as React from 'react';
import Tooltip from './Tooltip';
import MenuBar from './MenuBar';
import styled, { css } from 'react-emotion';
import { Icon } from '@bitbloq/ui';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  user-select: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  user-select: none;\n"])));
var HeaderWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 70px;\n  overflow: hidden;\n  transition: height 150ms ease-out;\n\n  ", ";\n"], ["\n  height: 70px;\n  overflow: hidden;\n  transition: height 150ms ease-out;\n\n  ",
    ";\n"])), function (props) {
    return props.collapsed && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 0px;\n    "], ["\n      height: 0px;\n    "])));
});
var Header = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 70px;\n  display: flex;\n"], ["\n  height: 70px;\n  display: flex;\n"])));
var DocumentIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 70px;\n  background-color: #4dc3ff;\n"], ["\n  width: 70px;\n  background-color: #4dc3ff;\n"])));
var Title = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-left: 18px;\n  background-color: #ebebeb;\n  flex: 1;\n  font-weight: 500;\n  font-style: italic;\n"], ["\n  display: flex;\n  align-items: center;\n  padding-left: 18px;\n  background-color: #ebebeb;\n  flex: 1;\n  font-weight: 500;\n  font-style: italic;\n"])));
var Main = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n"], ["\n  flex: 1;\n  display: flex;\n"])));
var MenuWrap = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  border-bottom: 1px solid #cfcfcf;\n"], ["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  border-bottom: 1px solid #cfcfcf;\n"])));
var CollapseButton = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: pointer;\n  svg {\n    width: 12px;\n    margin: 0px 12px;\n    transition: transform 150ms ease-out;\n  }\n\n  ", ";\n"], ["\n  cursor: pointer;\n  svg {\n    width: 12px;\n    margin: 0px 12px;\n    transition: transform 150ms ease-out;\n  }\n\n  ",
    ";\n"])), function (props) {
    return props.collapsed && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      svg {\n        transform: rotateX(180deg);\n      }\n    "], ["\n      svg {\n        transform: rotateX(180deg);\n      }\n    "])));
});
var Tabs = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 70px;\n  min-width: 70px;\n  background-color: #3b3e45;\n  color: white;\n"], ["\n  width: 70px;\n  min-width: 70px;\n  background-color: #3b3e45;\n  color: white;\n"])));
var TabIcon = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 70px;\n  border-bottom: 1px solid #797c81;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  svg {\n    width: 24px;\n    height: 24px;\n    opacity: 0.5;\n  }\n\n  ", ";\n"], ["\n  height: 70px;\n  border-bottom: 1px solid #797c81;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  svg {\n    width: 24px;\n    height: 24px;\n    opacity: 0.5;\n  }\n\n  ",
    ";\n"])), function (props) {
    return props.selected && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: #1e1f21;\n\n      svg {\n        opacity: 1;\n      }\n    "], ["\n      background-color: #1e1f21;\n\n      svg {\n        opacity: 1;\n      }\n    "])));
});
var Content = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: none;\n  flex: 1;\n  overflow: hidden;\n\n  ", ";\n"], ["\n  display: none;\n  flex: 1;\n  overflow: hidden;\n\n  ",
    ";\n"])), function (props) {
    return props.active && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
});
export var Tab = function (props) { return null; };
var Document = /** @class */ (function (_super) {
    __extends(Document, _super);
    function Document() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            currentTabIndex: 0,
            isHeaderCollapsed: false,
        };
        _this.onCollapseButtonClick = function () {
            _this.setState(function (state) { return (__assign({}, state, { isHeaderCollapsed: !state.isHeaderCollapsed })); });
        };
        return _this;
    }
    Document.prototype.render = function () {
        var _this = this;
        var _a = this.props, children = _a.children, _b = _a.menuOptions, menuOptions = _b === void 0 ? [] : _b, menuRightContent = _a.menuRightContent, onMenuOptionClick = _a.onMenuOptionClick;
        var _c = this.state, currentTabIndex = _c.currentTabIndex, isHeaderCollapsed = _c.isHeaderCollapsed;
        var currentTab = React.Children.toArray(children)[currentTabIndex];
        return (React.createElement(Container, null,
            React.createElement(HeaderWrap, { collapsed: isHeaderCollapsed },
                React.createElement(Header, null,
                    React.createElement(DocumentIcon, null),
                    React.createElement(Title, null, "Proyecto sin t\u00EDtulo"))),
            React.createElement(MenuWrap, null,
                React.createElement(MenuBar, { options: menuOptions, onOptionClick: onMenuOptionClick }),
                menuRightContent,
                React.createElement(CollapseButton, { onClick: this.onCollapseButtonClick, collapsed: isHeaderCollapsed },
                    React.createElement(Icon, { name: "angle-double" }))),
            React.createElement(Main, null,
                React.createElement(Tabs, null, React.Children.map(children, function (tab, i) { return (React.createElement(Tooltip, { position: "right", content: tab.props.label }, function (tooltipProps) { return (React.createElement(TabIcon, __assign({}, tooltipProps, { selected: i === currentTabIndex, onClick: function () { return _this.setState({ currentTabIndex: i }); } }), tab.props.icon)); })); })),
                React.Children.map(children, function (tab, i) { return (React.createElement(Content, { active: i === currentTabIndex }, tab.props.children)); }))));
    };
    return Document;
}(React.Component));
export default Document;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
//# sourceMappingURL=Document.js.map