"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("../styleConstants");
exports.InputIcon = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  left: calc(100% - 50px);\n  top: -30px;\n"], ["\n  position: relative;\n  left: calc(100% - 50px);\n  top: -30px;\n"])));
exports.InputLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 15px;\n  color: #000;\n  font-family: ", ";\n"], ["\n  font-size: 15px;\n  color: #000;\n  font-family: ", ";\n"])), styleConstants_1.fonts.SANS_SERIF);
exports.ErrorMessage = styled_components_1.default.small(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n"], ["\n  color: ", ";\n  font-family: ", ";\n"])), styleConstants_1.colors.accent.CIVIL_RED, styleConstants_1.fonts.SANS_SERIF);
var InputBaseWrapperComponent = function (props) {
    var icon = props.icon, className = props.className, label = props.label, noLabel = props.noLabel, invalid = props.invalid, invalidMessage = props.invalidMessage;
    return (React.createElement("div", { className: (invalid ? "civil-input-error" : "") + " " + className },
        invalid && invalidMessage && React.createElement(exports.ErrorMessage, null, invalidMessage),
        icon ? React.createElement(exports.InputIcon, null, icon) : null,
        props.children,
        !noLabel && React.createElement(exports.InputLabel, null, label || props.placeholder)));
};
var InputBaseComponent = function (props) {
    var onChange = props.onChange, inputRef = props.inputRef, invalid = props.invalid, noLabel = props.noLabel, invalidMessage = props.invalidMessage, inputProps = __rest(props, ["onChange", "inputRef", "invalid", "noLabel", "invalidMessage"]);
    var cb;
    if (onChange) {
        cb = function (ev) { return onChange(props.name, ev.target.value); };
    }
    if (inputProps.type === "textarea") {
        return (React.createElement(InputBaseWrapperComponent, __assign({}, props),
            React.createElement("textarea", __assign({}, inputProps, { onChange: cb, ref: inputRef }), inputProps.value)));
    }
    return (React.createElement(InputBaseWrapperComponent, __assign({}, props),
        React.createElement("input", __assign({}, inputProps, { onChange: cb, ref: inputRef }))));
};
exports.InputBase = styled_components_1.default(InputBaseComponent)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: 10px;\n  display: inline-grid;\n  width: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  font-family: ", ";\n  > div {\n    display: flex;\n    flex-direction: row;\n  }\n  > input,\n  > textarea {\n    box-sizing: border-box;\n    font-size: inherit;\n    margin: 5px 0px 10px 0;\n    padding: 10px;\n    border: 1px solid ", ";\n    outline: none;\n  }\n  > input::placeholder,\n  > textarea::placeholder {\n    color: ", ";\n  }\n  > input:focus,\n  > textarea:focus {\n    border-bottom: 1px solid ", ";\n  }\n  &.civil-input-error {\n    color: ", ";\n  }\n  &.civil-input-error > input {\n    color: ", ";\n    border-bottom-color: ", ";\n  }\n"], ["\n  margin-bottom: 10px;\n  display: inline-grid;\n  width: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  font-family: ", ";\n  > div {\n    display: flex;\n    flex-direction: row;\n  }\n  > input,\n  > textarea {\n    box-sizing: border-box;\n    font-size: inherit;\n    margin: 5px 0px 10px 0;\n    padding: 10px;\n    border: 1px solid ", ";\n    outline: none;\n  }\n  > input::placeholder,\n  > textarea::placeholder {\n    color: ", ";\n  }\n  > input:focus,\n  > textarea:focus {\n    border-bottom: 1px solid ", ";\n  }\n  &.civil-input-error {\n    color: ", ";\n  }\n  &.civil-input-error > input {\n    color: ", ";\n    border-bottom-color: ", ";\n  }\n"])), styleConstants_1.fonts.SANS_SERIF, styleConstants_1.colors.accent.CIVIL_GRAY_3, styleConstants_1.colors.accent.CIVIL_GRAY_3, styleConstants_1.colors.accent.CIVIL_BLUE, styleConstants_1.colors.accent.CIVIL_RED, styleConstants_1.colors.accent.CIVIL_RED, styleConstants_1.colors.accent.CIVIL_RED);
exports.TextInput = function (props) {
    return React.createElement(exports.InputBase, __assign({ type: "text" }, props));
};
exports.NumericInput = function (props) {
    return React.createElement(exports.InputBase, __assign({ type: "number", min: "0.01", step: "0.01" }, props));
};
exports.CurrencyInput = function (props) {
    var icon = props.icon || React.createElement("span", null, "USD");
    return React.createElement(exports.InputBase, __assign({ type: "number", min: "0.01", step: "0.01" }, props, { icon: icon }));
};
exports.HeaderInput = styled_components_1.default(exports.TextInput)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  > input {\n    font-size: 25px;\n  }\n"], ["\n  > input {\n    font-size: 25px;\n  }\n"])));
exports.TextareaInput = function (props) {
    return React.createElement(exports.InputBase, __assign({ type: "textarea" }, props));
};
exports.URLInput = function (props) {
    return React.createElement(exports.InputBase, __assign({ type: "url", pattern: "https?://.+" }, props));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=Input.js.map