import {
    type Component,
    type ParentProps,
    Show,
    createContext,
    createSignal,
    useContext,
} from "solid-js";
import { ItemModal } from "./components/item-modal/ItemModal";
import type { UserImage } from "./network";

const EntityDialogContext = createContext<
    (image: UserImage | undefined) => void
>(() => {});

export const useSetEntity = () => useContext(EntityDialogContext);

export const WithEntityDialog: Component<ParentProps> = (props) => {
    const [selectedEntity, setSelectedEntity] = createSignal<UserImage>();

    return (
        <EntityDialogContext.Provider value={setSelectedEntity}>
            <Show when={selectedEntity()}>
                {(entity) => (
                    <ItemModal
                        item={entity()}
                        onClose={() => setSelectedEntity(undefined)}
                    />
                )}
            </Show>
            {props.children}
        </EntityDialogContext.Provider>
    );
};