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 styled from 'react-emotion';
import { Spring, animated, interpolate } from 'react-spring';
import { resolveSoftwareType } from '../lib/bloq-types';
import { resolveComponentClass } from '../lib/hardware';
import { updateBloqs } from '../actions/software';
import BloqsEditor from './BloqsEditor';
import CodeEditor from './CodeEditor';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n"], ["\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n"])));
var Wrap = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  width: 200%;\n  height: 100%;\n"], ["\n  display: flex;\n  position: absolute;\n  width: 200%;\n  height: 100%;\n"])));
var CodeButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  background-color: #1e1e1e;\n  color: white;\n  padding: 20px;\n  font-size: 10px;\n  margin-left: -50px;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  background-color: #1e1e1e;\n  color: white;\n  padding: 20px;\n  font-size: 10px;\n  margin-left: -50px;\n  cursor: pointer;\n"])));
var BloqsButton = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  background-color: white;\n  padding: 20px;\n  font-size: 10px;\n  z-index: 1;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  background-color: white;\n  padding: 20px;\n  font-size: 10px;\n  z-index: 1;\n  cursor: pointer;\n"])));
var toolbarBloqs = [
    { type: 'OnButtonPressed' },
    { type: 'TurnOnLed' },
    { type: 'TurnOffLed' },
    { type: 'Delay' },
    { type: 'If' },
    { type: 'True' }
];
var Software = /** @class */ (function (_super) {
    __extends(Software, _super);
    function Software() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            tab: 'bloqs',
        };
        _this.onCodeClick = function () { return _this.setState({ tab: 'code' }); };
        _this.onBloqsClick = function () { return _this.setState({ tab: 'bloqs' }); };
        _this.getBloqOptions = function (options) {
            var _a = _this.props.hardware, _b = (_a === void 0 ? {} : _a).components, components = _b === void 0 ? [] : _b;
            return components
                .filter(function (component) {
                var componentClass = resolveComponentClass(component.className);
                return componentClass.isInstanceOf(options.componentClass);
            })
                .map(function (component) { return ({ label: component.name, value: component }); });
        };
        return _this;
    }
    Software.prototype.render = function () {
        var _this = this;
        var _a = this.props, bloqs = _a.bloqs, updateBloqs = _a.updateBloqs;
        var tab = this.state.tab;
        return (React.createElement(Container, null,
            React.createElement(Spring, { native: true, from: { x: 0 }, to: { x: tab === 'code' ? -50 : 0 } }, function (_a) {
                var x = _a.x;
                return (React.createElement(Wrap, { style: {
                        transform: interpolate([x], function (x) { return "translate(" + x + "%, 0)"; }),
                    } },
                    React.createElement(BloqsEditor, { bloqs: bloqs, toolbarBloqs: toolbarBloqs, onBloqsChange: updateBloqs, getBloqType: resolveSoftwareType, getBloqOptions: _this.getBloqOptions }),
                    React.createElement(CodeButton, { onClick: _this.onCodeClick }, "Code"),
                    React.createElement(BloqsButton, { onClick: _this.onBloqsClick }, "Bloqs"),
                    React.createElement(CodeEditor, null)));
            })));
    };
    return Software;
}(React.Component));
var mapStateToProps = function (_a) {
    var software = _a.software, hardware = _a.hardware;
    return ({
        bloqs: software.bloqs,
        hardware: hardware,
    });
};
var mapDispatchToProps = function (dispatch) { return ({
    updateBloqs: function (bloqs) { return dispatch(updateBloqs(bloqs)); },
}); };
export default connect(mapStateToProps, mapDispatchToProps)(Software);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Software.js.map