var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import styled from 'react-emotion';
import NumberInput from '../NumberInput';
import { Select } from '@bitbloq/ui';
import Checkbox from '../Checkbox';
import ColorPicker from '../ColorPicker';
import STLLoader from '../../lib/object3dts/STLLoader';
var FormGroup = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 10px;\n  display: flex;\n  align-items: center;\n\n  label {\n    display: block;\n    width: 120px;\n  }\n\n  input {\n    flex: 1;\n  }\n"], ["\n  margin-bottom: 10px;\n  display: flex;\n  align-items: center;\n\n  label {\n    display: block;\n    width: 120px;\n  }\n\n  input {\n    flex: 1;\n  }\n"])));
var ColorPickerWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
var StyledSelect = styled(Select)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
var IntegerProperty = function (_a) {
    var label = _a.label, value = _a.value, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, unit = _a.unit;
    return (React.createElement(FormGroup, null,
        React.createElement("label", null, label),
        React.createElement(NumberInput, { value: value, unit: unit, onChange: function (value) { return onChange(value); }, onFocus: onFocus, onBlur: onBlur })));
};
var FileProperty = function (_a) {
    var onChange = _a.onChange;
    return (React.createElement(FormGroup, null,
        React.createElement("input", { type: "file", onChange: function (e) {
                //console.log(e.target.files[0].name);
                var file = e.target.files[0];
                if (file.type.match('model/x.stl-binary')) {
                    var reader_1 = new FileReader();
                    reader_1.onload = function (e) {
                        var blob = reader_1.result;
                        var geom = STLLoader.loadBinaryStl(blob);
                        onChange(geom);
                    };
                    reader_1.readAsArrayBuffer(file);
                }
                else if (file.type.match('model/x.stl-ascii')) {
                    var reader_2 = new FileReader();
                    reader_2.onload = function (e) {
                        var blob = reader_2.result;
                        var geom = STLLoader.loadBinaryStl(blob);
                        onChange(geom);
                    };
                    reader_2.readAsArrayBuffer(file);
                }
                else {
                    throw 'Error: Not recognized file type';
                }
            }, id: "stlFile", name: "stlFile", accept: "model/stl, model/x.stl-binary, model/x.stl-ascii" })));
};
var SelectProperty = function (_a) {
    var label = _a.label, options = _a.options, value = _a.value, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
    return (React.createElement(FormGroup, null,
        React.createElement("label", null, label),
        React.createElement(StyledSelect, { value: value, options: options, selectConfig: { isSearchable: false }, onChange: onChange, onFocus: onFocus, onBlur: onBlur })));
};
var BooleanProperty = function (_a) {
    var label = _a.label, value = _a.value, onChange = _a.onChange;
    return (React.createElement(FormGroup, null,
        React.createElement("label", null, label),
        React.createElement(Checkbox, { checked: value, onChange: onChange })));
};
var ColorProperty = function (_a) {
    var label = _a.label, value = _a.value, onChange = _a.onChange;
    return (React.createElement(FormGroup, null,
        React.createElement("label", null, label),
        React.createElement(ColorPickerWrap, null,
            React.createElement(ColorPicker, { color: value, onChange: onChange, position: "top-right" }))));
};
var PropertyInput = function (_a) {
    var parameter = _a.parameter, value = _a.value, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
    switch (parameter.type) {
        case 'integer':
            return (React.createElement(IntegerProperty, { label: parameter.label, unit: parameter.unit, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur }));
        case 'select':
            return (React.createElement(SelectProperty, { label: parameter.label, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, options: parameter.options }));
        case 'boolean':
            return (React.createElement(BooleanProperty, { label: parameter.label, value: value, onChange: onChange }));
        case 'color':
            return (React.createElement(ColorProperty, { label: parameter.label, value: value, onChange: onChange }));
        case 'file':
            return (React.createElement(FileProperty, { label: parameter.label, value: value, onChange: onChange }));
        default:
            return null;
    }
};
export default PropertyInput;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=PropertyInput.js.map