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;
};
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { TextField } from "../../TextField";
import { get, useFormContext, useWatch } from "react-hook-form";
var FieldParent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
var CustomField = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  width: 100%;\n  display: ", ";\n  justify-content: space-between;\n  align-items: center;\n"])), function (_a) {
    var flex = _a.flex;
    return (flex ? "flex" : "block");
});
var Content = React.memo(function (_a) {
    var title = _a.title, description = _a.description, children = _a.children, elType = _a.elType, type = _a.type, watchedField = _a.watchedField, name = _a.name, customOnChangeFunc = _a.customOnChangeFunc, placeholder = _a.placeholder, min = _a.min, step = _a.step, watchedValue = _a.watchedValue, disabled = _a.disabled, defaultValue = _a.defaultValue, extraStyles = _a.extraStyles, fontSize = _a.fontSize, pattern = _a.pattern, subComponent = _a.subComponent, flex = _a.flex;
    var _b = useFormContext(), setValue = _b.setValue, register = _b.register, errors = _b.formState.errors, control = _b.control;
    // Get error message based on field name
    var error = get(errors, name);
    // If we pass in a custom change function then we use it otherwise just set the value.
    // Manually setting the value so we can make sure the input is dirtied on change.
    function handleChange(e) {
        setValue(name, e.target.value, { shouldDirty: true });
    }
    return (_jsx(_Fragment, { children: _jsx(TextField, __assign({}, register(name), { description: description, placeholder: placeholder, type: type, autoComplete: "off", onChange: handleChange, label: title, min: min, step: step, disabled: disabled, pattern: pattern, textarea: elType === "textarea", error: error === null || error === void 0 ? void 0 : error.message, subComponent: subComponent })) }));
});
// export const StandardFormField2 = (props: Props) => {
//   const { type, name, extraStyles, disabled, fontSize } = props;
//   return (
//     // <FormController
//     //   name={name}
//     //   render={() => {
//     //     return (
//     //       <>
//     //         {type !== "noRender" && (
//     //           <FieldParent
//     //             style={{
//     //               ...extraStyles,
//     //               opacity: disabled ? 0.5 : 1
//     //             }}
//     //             className={fontSize}
//     //           >
//     <Content {...props} />
//     //           </FieldParent>
//     //         )}
//     //       </>
//     //     );
//     //   }}
//     // />
//   );
// };
export var StandardFormField2 = function (props) {
    var name = props.name, title = props.title, elType = props.elType, subComponent = props.subComponent, rest = __rest(props, ["name", "title", "elType", "subComponent"]);
    var _a = useFormContext(), setValue = _a.setValue, register = _a.register, errors = _a.formState.errors, control = _a.control;
    var value = useWatch({ name: name, control: control });
    // Get error message based on field name
    var error = get(errors, name);
    // If we pass in a custom change function then we use it otherwise just set the value.
    // Manually setting the value so we can make sure the input is dirtied on change.
    function handleChange(e) {
        setValue(name, e.target.value, { shouldDirty: true });
    }
    return (
    // <FormController
    //   name={name}
    //   render={() => {
    //     return (
    //       <>
    //         {type !== "noRender" && (
    //           <FieldParent
    //             style={{
    //               ...extraStyles,
    //               opacity: disabled ? 0.5 : 1
    //             }}
    //             className={fontSize}
    //           >
    _jsx("input", __assign({}, register(name), rest))
    //         </FieldParent>
    //       )}
    //     </>
    //   );
    // }}
    // />
    );
};
var templateObject_1, templateObject_2;
//# sourceMappingURL=StandardFormField2.js.map