import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { PHXSelect } from '../Select';
import { PHXInput } from '../Input';
export function PHXFormConfigTimeUseService({ options, preview = {
    enable: false,
    data: [],
}, onChange, defaultValue, }) {
    const [dataConfig, setDataConfig] = useState(defaultValue || {});
    const { register, formState: { errors }, reset, } = useForm();
    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.createElement(React.Fragment, null,
        React.createElement("div", { className: 'grid grid-cols-2 gap-x-2' },
            React.createElement("div", null,
                React.createElement("p", { className: 'text-xs' }, "Ng\u00E0y b\u1EAFt \u0111\u1EA7u"),
                React.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
                    React.createElement(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.createElement("option", { key: index, value: item.value }, item.name)))),
                    React.createElement(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.createElement("option", { key: index, value: item.value }, item.name)))))),
            React.createElement("div", null,
                React.createElement("p", { className: 'text-xs' }, "Ng\u00E0y k\u1EBFt th\u00FAc"),
                React.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
                    React.createElement(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.createElement("option", { key: index, value: item.value }, item.name)))),
                    React.createElement(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.createElement("option", { key: index, value: item.value }, item.name))))))),
        preview && preview.enable && (React.createElement("div", { className: 'mt-3' },
            React.createElement("p", { className: 'text-xs' }, "Xem tr\u01B0\u1EDBc c\u00E0i \u0111\u1EB7t"),
            React.createElement("div", { className: 'mt-3 grid sm:grid-cols-2 gap-3' }, preview.data.map((item, index) => (React.createElement(PHXInput, { key: index, disabled: true, value: item.value }))))))));
}
//# sourceMappingURL=FormConfigTimeUseService.js.map