import { ContentEditable } from "@common/components/ContentEditable";
import { useInputCallback } from "@common/hooks/useInputCallback";
import clsx from "clsx";
import styles from "../../assets/settings-modal.module.css";
import { useAppState } from "../../contexts/state";

export const ContinuePromptSettings = () => {
    const { continuePrompt, dispatch } = useAppState();

    const setPromptValue = useInputCallback((value) => {
        dispatch({ type: "SET_CONTINUE_PROMPT", continuePrompt: value });
    }, []);

    return (
        <div class={styles.form}>
            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
                <label class={styles.label}>Continue Prompt</label>
                <ContentEditable
                    highlight
                    value={continuePrompt}
                    onInput={setPromptValue}
                    placeholder="Enter the prompt prepended when continuing the story..."
                    class={clsx(styles.input, styles.textarea)}
                />
            </div>
        </div>
    );
};
