import { useReminder } from "../../ReminderContext";
import { Field } from "./Field";

export const Fields = () => {
    const [{ embed_fields }, setReminder] = useReminder();

    return (
        <div class={"embed-multifield-box"}>
            {[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
                <Field
                    {...field}
                    index={index}
                    onUpdate={({ index, ...props }) => {
                        setReminder((reminder) => ({
                            ...reminder,
                            embed_fields: [
                                ...reminder.embed_fields,
                                { value: "", title: "", inline: true },
                            ]
                                .map((f, i) => {
                                    if (i === index) {
                                        return {
                                            ...f,
                                            ...props,
                                        };
                                    } else {
                                        return f;
                                    }
                                })
                                .filter((f) => f.value || f.title),
                        }));
                    }}
                ></Field>
            ))}
        </div>
    );
};