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

export const SystemEditor = ({ visible }: { visible: boolean }) => {
    const { currentWorld, dispatch } = useAppState();

    const handleInput = useInputCallback((text: string) => {
        if (!currentWorld) return;
        dispatch({
            type: 'SET_WORLD_SYSTEM_INSTRUCTION_OVERRIDE',
            worldId: currentWorld.id,
            systemInstructionOverride: text || undefined,
        });
    }, [currentWorld?.id]);

    if (!currentWorld || !visible) {
        return null;
    }

    return (
        <ContentEditable
        highlight
            class={styles.editable}
            value={currentWorld?.systemInstructionOverride || ''}
            onInput={handleInput}
            placeholder="Override the global system instruction for this world. Leave empty to use the global setting."
        />
    );
};
