"use strict";
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)
            t[p[i]] = s[p[i]];
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const jss_1 = require("../../jss");
const classnames_1 = __importDefault(require("classnames"));
const React = __importStar(require("react"));
const react_jss_1 = __importDefault(require("react-jss"));
var InputSize;
(function (InputSize) {
    InputSize[InputSize["BIG"] = 0] = "BIG";
    InputSize[InputSize["NORMAL"] = 1] = "NORMAL";
    InputSize[InputSize["SMALL"] = 2] = "SMALL";
    InputSize[InputSize["XSMALL"] = 3] = "XSMALL";
    InputSize[InputSize["XXSMALL"] = 4] = "XXSMALL";
})(InputSize = exports.InputSize || (exports.InputSize = {}));
var InputType;
(function (InputType) {
    InputType["TEXT"] = "text";
    InputType["PASSWORD"] = "password";
})(InputType = exports.InputType || (exports.InputType = {}));
const styles = {
    container: {
        maxWidth: 500,
    },
    input: Object.assign({ display: 'block', appearance: 'none', border: (({ error }) => error ? `2px solid ${jss_1.theme.colors.error}` : '1px solid rgba(41, 41, 41, 0.1)'), padding: [0, 15], boxSizing: 'border-box', borderRadius: 30, minWidth: 200, width: '100%', height: 34, lineHeight: '34px' }, jss_1.theme.fontMixin(11, 500), { transition: 'all 250ms ease-out', color: (({ error }) => error ? jss_1.theme.colors.error : '#292929'), backgroundColor: '#FFFFFF', '&:disabled': {
            opacity: 0.4,
        }, '&:focus': {
            outline: 'none',
        }, '&::-webkit-input-placeholder': {
            color: 'rgba(1, 1, 1, 0.3)',
        } }),
    inputXSmall: {
        height: '24px',
        lineHeight: '24px',
    },
    inputXXSmall: {
        height: '20px',
        lineHeight: '20px',
        padding: '0 10px',
    },
    inputSmall: {
        height: '30px',
        lineHeight: '30px',
    },
    inputBig: {
        fontSize: '13px',
        height: '42px',
        lineHeight: '42px',
    },
    header: {
        display: 'flex',
        justifyContent: 'space-between',
    },
    label: Object.assign({ display: 'block', margin: [0, 0, 8, 5] }, jss_1.theme.fontMixin(12), { color: (({ error }) => error ? jss_1.theme.colors.error : jss_1.theme.colors.gray.middle) }),
    error: Object.assign({}, jss_1.theme.fontMixin(10, 'bold'), { color: jss_1.theme.colors.error, textAlign: 'right', padding: [0, 5, 8, 10] }),
};
class InputImpl extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        const { onChange, onValueChange } = this.props;
        const value = event.currentTarget.value;
        if (onChange)
            onChange(event);
        if (onValueChange)
            onValueChange(value, event);
    }
    renderHeader() {
        const { classes, label, error, forceHeader } = this.props;
        if (!forceHeader && !label && !error)
            return null;
        return (React.createElement("div", { className: classes.header },
            label ?
                React.createElement("label", { className: classes.label }, label)
                :
                    React.createElement("label", { className: classes.label }, "\u00A0"),
            error &&
                React.createElement("span", { className: classes.error }, error)));
    }
    render() {
        const _a = this.props, { classes, inputClassName, className, inputSize, label, error, refInput, forceHeader, onValueChange } = _a, inputProps = __rest(_a, ["classes", "inputClassName", "className", "inputSize", "label", "error", "refInput", "forceHeader", "onValueChange"]);
        const sizeClassNames = {
            [InputSize.XXSMALL]: classes.inputXXSmall,
            [InputSize.XSMALL]: classes.inputXSmall,
            [InputSize.SMALL]: classes.inputSmall,
            [InputSize.NORMAL]: '',
            [InputSize.BIG]: classes.inputBig,
        };
        const _inputClassName = classnames_1.default(classes.input, sizeClassNames[inputSize], inputClassName);
        return (React.createElement("div", { className: classnames_1.default(classes.container, className) },
            this.renderHeader(),
            React.createElement("input", Object.assign({ ref: refInput, className: _inputClassName, onChange: this.handleChange }, inputProps), this.props.children)));
    }
}
InputImpl.defaultProps = {
    forceHeader: true,
    inputSize: InputSize.NORMAL,
    refInput: () => { },
};
exports.Input = react_jss_1.default(styles)(InputImpl);
//# sourceMappingURL=index.js.map