class TutorialContainerScope() {
    var selectedX: Float by mutableStateOf(0f)
    var selectedY: Float by mutableStateOf(0f)
    var selectedHeight: Int by mutableStateOf(0)
    var selectedWidth: Int by mutableStateOf(0)

    var anyVisible by mutableStateOf(false)
    var overlayContent: @Composable () -> Unit = { }

    @Composable
    fun Modifier.updatePos(visible: Boolean) = this.then(onGloballyPositioned {
        if (visible) {
            selectedX = it.positionInRoot.x
            selectedY = it.positionInRoot.y
            selectedWidth = it.size.width
            selectedHeight = it.size.height
        }
    })

    @Composable()
    fun coachElement(modifier: Modifier, showCoach: Boolean, content: @Composable () -> Unit) {
        if (showCoach) {
            anyVisible = true
            overlayContent = content
        }
        // Draw normally, even if showCoach == true, to obtain the position
        Box(modifier.updatePos(showCoach), Alignment.TopCenter) {
            content()
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun TutorialContainer(
    modifier: Modifier = Modifier.fillMaxSize(),
    overallContent: @Composable() (TutorialContainerScope.() -> Unit),
    color: Color = Color(0x0000009A),
) {
    val tutorialContainerScope = TutorialContainerScope()
    ConstraintLayout(Modifier.fillMaxSize()) {
        overallContent(tutorialContainerScope)
        if (tutorialContainerScope.anyVisible) androidx.compose.foundation.layout.Box(
            Modifier
                .fillMaxSize()
                .background(Color.Black.copy(alpha = 0.5f))
                .zIndex(2f)
        )
        val contentConstraint = createRef()
        with(DensityAmbient.current) {
            Box(Modifier.zIndex(3f).constrainAs(contentConstraint) {
                val selectedX = tutorialContainerScope.selectedX
                start.linkTo(parent.start, selectedX.toDp())
                val selectedY = tutorialContainerScope.selectedY
                top.linkTo(<http://parent.top|parent.top>, selectedY.toDp())
                width = Dimension.value(tutorialContainerScope.selectedWidth.toDp())
                height = Dimension.value(tutorialContainerScope.selectedHeight.toDp())
            }, alignment = Alignment.TopStart) {
                tutorialContainerScope.overlayContent()
            }
        }
    }
}


@Preview()
@Composable()
fun usage() {
    TutorialContainer(overallContent = {
        Row(modifier = Modifier.size(300.dp, 700.dp), horizontalArrangement = Arrangement.SpaceBetween) {
            coachElement(Modifier.size(120.dp, 120.dp), false) {
                androidx.compose.foundation.layout.Box(Modifier.background(Color.Green).size(20.dp))
            }
            coachElement(Modifier.align(Alignment.Bottom).fillMaxSize(0.3f), true) {
                androidx.compose.foundation.layout.Box((Modifier.background(Color.Blue).fillMaxSize()))
            }
        }
    }, color = Color.Green)
}