@attio/react-native-bottom-sheet-toolbox-dev-tools/src/use-send-update-device-config.ts

import React from "react"
import {useColorScheme, useWindowDimensions} from "react-native"

import {BOTTOM_SHEET_DEV_TOOLS} from "@attio/react-native-bottom-sheet-toolbox"

export function useSendUpdateDeviceConfig() {
    const {width, height} = useWindowDimensions()
    const colorScheme = useColorScheme()

    const sendUpdateDeviceConfig = React.useCallback(() => {
        BOTTOM_SHEET_DEV_TOOLS.sendMessage("update-device-config", {
            width,
            height,
            theme: colorScheme === "dark" ? "dark" : "light",
        })
    }, [colorScheme, height, width])

    // Send on changes
    React.useEffect(() => {
        sendUpdateDeviceConfig()
    }, [sendUpdateDeviceConfig])

    // Send when requested
    React.useEffect(() => {
        const unsubscribe = BOTTOM_SHEET_DEV_TOOLS.addMessageListener(
            "did-connect",
            sendUpdateDeviceConfig
        )
        return unsubscribe
    }, [sendUpdateDeviceConfig])
}