import EventInterval from "../../../Types/Events/EventInterval";
import Recurring from "../../../Types/Events/Recurring";
import PositiveNumber from "../../../Types/PositiveNumber";
import React, { useState } from "react";
import RecurringFieldElement from "./RecurringFieldElement";
import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import IconProp from "../../../Types/Icon/IconProp";
const RecurringArrayFieldElement = (props) => {
    const [recurrings, setRecurrings] = useState(props.initialValue && props.initialValue.length > 0
        ? Recurring.fromJSONArray(props.initialValue)
        : undefined);
    const updateRecurrings = (recurring, index) => {
        const existingRecurrings = [...(recurrings || [])];
        existingRecurrings[index] = recurring;
        setRecurrings(existingRecurrings);
        if (props.onChange) {
            props.onChange(existingRecurrings);
        }
    };
    return (React.createElement("div", null,
        recurrings &&
            recurrings.map((recurring, index) => {
                return (React.createElement("div", { key: index, className: "flex" },
                    React.createElement("div", { className: "" },
                        React.createElement(RecurringFieldElement, { initialValue: recurring, onChange: (recurring) => {
                                updateRecurrings(recurring, index);
                            } })),
                    React.createElement("div", null,
                        React.createElement(Button, { dataTestId: `delete-${index}`, title: "Delete", buttonStyle: ButtonStyleType.ICON, icon: IconProp.Trash, onClick: () => {
                                var _a;
                                const newData = [...(recurrings || [])];
                                newData.splice(index, 1);
                                setRecurrings(newData);
                                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newData);
                            } }))));
            }),
        React.createElement("div", { className: "flex space-x-3 mt-3 -ml-3" },
            React.createElement(Button, { dataTestId: `add-recurring`, title: "Add", buttonStyle: ButtonStyleType.NORMAL, buttonSize: ButtonSize.Small, icon: IconProp.Add, onClick: () => {
                    var _a;
                    const newData = [...(recurrings || [])];
                    const recurring = new Recurring();
                    recurring.intervalCount = new PositiveNumber(1);
                    recurring.intervalType = EventInterval.Day;
                    newData.push(recurring);
                    setRecurrings(newData);
                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newData);
                } })),
        props.error && (React.createElement("p", { "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default RecurringArrayFieldElement;
//# sourceMappingURL=RecurringArrayFieldElement.js.map