CustomStyleScope

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.CustomStyle
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.state
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

// Create a new StyleStateKey
val playingStateKey = StyleStateKey(false)

// In the module scope are the following declarations:
//
//    // A custom style scope which has all the properties of StyleScope
//    interface MediaPlayerStyleScope : StyleScope
//
//    // A custom style type
//    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
//        companion object : MediaPlayerStyle {
//            override fun MediaPlayerStyleScope.applyStyle() { }
//        }
//    }

// Introduce a function to convert the custom style to a Style
fun MediaPlayerStyle.toStyle(): Style = Style {
    val scope = object : StyleScope by this, MediaPlayerStyleScope {}
    with(scope) { applyStyle() }
}

// Introduce an extension function to read the style state. This will only be
// available in a MediaPlayerStyle.
fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
    state(playingStateKey, block)
}

// The MediaPlayer composable
@Suppress("UNUSED_PARAMETER")
@Composable
fun MediaPlayer(
    url: String,
    modifier: Modifier = Modifier,
    style: MediaPlayerStyle = MediaPlayerStyle,
    playing: Boolean = true,
) {
    val styleState =
        rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
    Box(modifier = modifier.styleable(styleState, style.toStyle())) {
        // Implementation of the media player
    }
}

// Using the style in a composable that sets the state.
MediaPlayer(
    url = "https://example.com/media/video",
    style = {
        borderColor(Color.Gray)

        // This only sets the border color to green when the media player is playing
        playerPlaying { borderColor(Color.Green) }
    },
)