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);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect } from "react";
import styled from "styled-components";
import { FormController } from "../FormController";
import { Description, Label, LabelContainer, TextField, Title } 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;
    // If we pass a defaultValue to the form field we set it automatically here
    // This is because we cant set default values to nested array of objects
    useEffect(function () {
        defaultValue && setValue(name, defaultValue);
    }, [defaultValue, setValue, name]);
    // Get error message based on field name
    var error = get(errors, name);
    // If watched field is passed, we use useWatch hook which allows us to listen to
    // a specific field. In future versions, will include 'watch behaviour' - for now just
    // toggling display.
    var useWatch_WatchedField = useWatch({
        control: control,
        name: watchedField,
        defaultValue: "" // default value before the render
    });
    // If we pass in an array of values we check if the watched field is equal to any of those values
    var isWatched = Array.isArray(watchedValue)
        ? watchedValue.includes(useWatch_WatchedField)
        : watchedValue === useWatch_WatchedField;
    // 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) {
        !!customOnChangeFunc
            ? customOnChangeFunc(e, setValue)
            : setValue(name, e.target.value, { shouldDirty: true });
    }
    return (_jsx(_Fragment, { children: type !== "noRender" && (_jsxs(FieldParent, __assign({ style: __assign(__assign({}, extraStyles), { display: watchedField ? (isWatched ? "block" : "none") : "block", opacity: disabled ? 0.5 : 1 }), className: fontSize }, { children: [type === "custom" && (_jsxs(CustomField, __assign({ flex: flex }, { children: [_jsxs(Title, __assign({ flex: flex }, { children: [_jsx(LabelContainer, { children: _jsx(Label, __assign({ htmlFor: name }, { children: title })) }), description && _jsx(Description, { children: description })] })), React.cloneElement(children, {
                            name: name,
                            disabled: disabled
                        })] }))), type !== "custom" && type !== "noRender" && (_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 var StandardFormField = function (props) {
    var type = props.type, name = props.name, extraStyles = props.extraStyles, disabled = props.disabled, fontSize = props.fontSize;
    return (_jsx(FormController, { name: name, render: function () {
            return (_jsx(_Fragment, { children: type !== "noRender" && (_jsx(FieldParent, __assign({ style: __assign(__assign({}, extraStyles), { opacity: disabled ? 0.5 : 1 }), className: fontSize }, { children: _jsx(Content, __assign({}, props)) }))) }));
        } }));
};
var templateObject_1, templateObject_2;
//# sourceMappingURL=index.js.map