"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const utils_1 = require("@skava/utils");
const styled_1 = require("./styled");
exports.defaultRender = (props) => {
    // console.debug('[1form] defaultRender Input')
    // console.log(props)
    // ref?
    const dataQa = props['data-qa'] || props['dataQa'];
    return (React.createElement(styled_1.StyledInput
    // standard
    , { 
        // standard
        isValid: props.isValid, isActive: props.isActive, isDirty: props.isDirty, "data-qa": dataQa, "aria-label": props['aria-label'] || props.label || props.labelText, "aria-invalid": props.isValid === false, 
        // events
        onChange: props.onChange, 
        // @note - these were in wrapper, which did not work well...
        onFocus: props.onFocus, onBlur: props.onBlur, 
        // browser
        id: props.identifier, value: props.value, type: props.type, 
        // need to manage spreading these...
        pattern: props.pattern, minLength: props.minLength, maxLength: props.maxLength, required: props.required, placeholder: props.placeholder, disabled: props.isDisabled, autoComplete: props.autoComplete, autoFocus: props.autoFocus, 
        // name
        name: props.propertyName }));
};
exports.defaultRenderLabelText = (props) => {
    // @todo renderRequired, can hover with `title` for more?
    // const requiredSymbol = props.required ? <span title="required"> *</span> : ''
    const requiredSymbol = props.required ? ' *' : '';
    const text = props.label || props.labelText || 'no label';
    const children = text + requiredSymbol;
    const hasError = props.isValid === false && props.isDirty === true;
    return (React.createElement(styled_1.StyledLabelText, { htmlFor: props.identifier, isActive: props.isActive, isValid: !hasError, hasValue: props.value !== '' }, children));
};
exports.defaultRenderError = (props) => {
    // console.debug('[1form] renderError')
    // console.log(props)
    const hasError = props.isValid === false && props.isDirty === true;
    return (React.createElement(styled_1.StyledError, { key: props.identifier + '-error', id: props.identifier + '-error', isValid: !hasError, children: props.state.errorText }));
};
/**
 * @todo not added, was from codesandbox
 * @todo use this for documentation on hover or click to expand
 */
exports.defaultRenderAfterInput = (props) => {
    return (React.createElement(styled_1.StyledTooltip, { isActive: props.isActive }, props.tooltip));
};
exports.defaultRenderWrap = (props) => {
    const remainingProps = utils_1.omit(props, [
        'isActive',
        'data-qa',
        'aria-label',
        'onChange',
        'onFocus',
        'onBlur',
        'identifier',
        'value',
        'label',
        'tooltip',
        'type',
        // isRequired?
        'required',
        'maxLength',
        'minLength',
        'placeholder',
        'pattern',
    ]);
    return React.createElement(styled_1.StyledInputWrap, Object.assign({}, remainingProps), props.children);
};
//# sourceMappingURL=renderProps.js.map