import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import Input, { InputType } from "../Input/Input";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useEffect, useRef, useState, } from "react";
const parseValue = (value) => {
    if (!value) {
        return [];
    }
    return value
        .split("\n")
        .map((line) => {
        return line.trim();
    })
        .filter((line) => {
        return line.length > 0;
    });
};
const serializeValue = (options) => {
    return options
        .map((option) => {
        return option.trim();
    })
        .filter((option) => {
        return option.length > 0;
    })
        .join("\n");
};
const DropdownOptionsInput = (props) => {
    const [options, setOptions] = useState(() => {
        const parsed = parseValue(props.initialValue);
        return parsed.length > 0 ? parsed : [""];
    });
    const lastEmittedRef = useRef(serializeValue(parseValue(props.initialValue)));
    useEffect(() => {
        const serialized = serializeValue(options);
        if (serialized !== lastEmittedRef.current) {
            lastEmittedRef.current = serialized;
            if (props.onChange) {
                props.onChange(serialized);
            }
        }
    }, [options]);
    const updateAt = (index, value) => {
        setOptions((prev) => {
            const next = [...prev];
            next[index] = value;
            return next;
        });
    };
    const removeAt = (index) => {
        setOptions((prev) => {
            const next = prev.filter((_, i) => {
                return i !== index;
            });
            return next.length > 0 ? next : [""];
        });
    };
    const addOption = () => {
        setOptions((prev) => {
            return [...prev, ""];
        });
    };
    return (React.createElement("div", null,
        React.createElement("div", { className: "space-y-2" }, options.map((value, index) => {
            return (React.createElement("div", { key: index, className: "flex items-center gap-2" },
                React.createElement("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-xs font-medium text-gray-500" }, index + 1),
                React.createElement("div", { className: "flex-1" },
                    React.createElement(Input, { value: value, placeholder: props.placeholder || `Option ${index + 1}`, onChange: (newValue) => {
                            updateAt(index, newValue);
                        }, onBlur: () => {
                            if (props.onBlur) {
                                props.onBlur();
                            }
                        }, type: InputType.TEXT })),
                React.createElement(Button, { title: "Remove", buttonStyle: ButtonStyleType.ICON, icon: IconProp.Trash, onClick: () => {
                        removeAt(index);
                    } })));
        })),
        React.createElement("div", { className: "mt-3" },
            React.createElement(Button, { title: "Add Option", icon: IconProp.Add, buttonSize: ButtonSize.Small, buttonStyle: ButtonStyleType.NORMAL, onClick: addOption })),
        props.error ? (React.createElement("p", { className: "mt-2 text-sm text-red-500" }, props.error)) : null));
};
export default DropdownOptionsInput;
//# sourceMappingURL=DropdownOptionsInput.js.map