"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXFormConfigTimeUseService = PHXFormConfigTimeUseService;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_hook_form_1 = require("react-hook-form");
const Select_1 = require("../Select");
const Input_1 = require("../Input");
function PHXFormConfigTimeUseService({ options, preview = {
    enable: false,
    data: [],
}, onChange, defaultValue, }) {
    const [dataConfig, setDataConfig] = (0, react_1.useState)(defaultValue || {});
    const { register, formState: { errors }, reset, } = (0, react_hook_form_1.useForm)();
    (0, react_1.useEffect)(() => {
        if (defaultValue) {
            setDataConfig(defaultValue);
            reset(defaultValue);
        }
    }, [defaultValue]);
    const handleChangeConfig = (event, registerName) => {
        setDataConfig({ ...dataConfig, [registerName]: event.target.value });
        if (onChange) {
            onChange({ ...dataConfig, [registerName]: event.target.value });
        }
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: 'grid grid-cols-2 gap-x-2' },
            react_1.default.createElement("div", null,
                react_1.default.createElement("p", { className: 'text-xs' }, "Ng\u00E0y b\u1EAFt \u0111\u1EA7u"),
                react_1.default.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
                    react_1.default.createElement(Select_1.PHXSelect, { onChange: (event) => handleChangeConfig(event, options.monthStart.registerName), register: register(options.monthStart.registerName, {
                            required: true,
                        }), error: !!errors[options.monthStart.registerName], errorType: 'required-field' }, options.monthStart.option.map((item, index) => (react_1.default.createElement("option", { key: index, value: item.value }, item.name)))),
                    react_1.default.createElement(Select_1.PHXSelect, { onChange: (event) => handleChangeConfig(event, options.dateStart.registerName), register: register(options.dateStart.registerName, {
                            required: true,
                        }), error: !!errors[options.dateStart.registerName], errorType: 'required-field' }, options.dateStart.option.map((item, index) => (react_1.default.createElement("option", { key: index, value: item.value }, item.name)))))),
            react_1.default.createElement("div", null,
                react_1.default.createElement("p", { className: 'text-xs' }, "Ng\u00E0y k\u1EBFt th\u00FAc"),
                react_1.default.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
                    react_1.default.createElement(Select_1.PHXSelect, { onChange: (event) => handleChangeConfig(event, options.monthEnd.registerName), register: register(options.monthEnd.registerName, {
                            required: true,
                        }), error: !!errors[options.monthEnd.registerName], errorType: 'required-field' }, options.monthEnd.option.map((item, index) => (react_1.default.createElement("option", { key: index, value: item.value }, item.name)))),
                    react_1.default.createElement(Select_1.PHXSelect, { onChange: (event) => handleChangeConfig(event, options.dateEnd.registerName), register: register(options.dateEnd.registerName, {
                            required: true,
                        }), error: !!errors[options.dateEnd.registerName], errorType: 'required-field' }, options.dateEnd.option.map((item, index) => (react_1.default.createElement("option", { key: index, value: item.value }, item.name))))))),
        preview && preview.enable && (react_1.default.createElement("div", { className: 'mt-3' },
            react_1.default.createElement("p", { className: 'text-xs' }, "Xem tr\u01B0\u1EDBc c\u00E0i \u0111\u1EB7t"),
            react_1.default.createElement("div", { className: 'mt-3 grid sm:grid-cols-2 gap-3' }, preview.data.map((item, index) => (react_1.default.createElement(Input_1.PHXInput, { key: index, disabled: true, value: item.value }))))))));
}
//# sourceMappingURL=FormConfigTimeUseService.js.map