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 ScratchpadEditor = ({ visible }: { visible: boolean }) => {
    const { currentWorld, currentStory, dispatch } = useAppState();

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

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

    return (
        <ContentEditable
        highlight
            class={styles.editable}
            value={currentStory?.scratchpad ?? ''}
            onInput={handleInput}
            placeholder="Notes, ideas, outlines — anything you don't want in the story..."
        />
    );
};
