kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("dev.stetsiuk:compose-modal:1.0.2")
        }
    }
}

@Composable
fun App() {
    ProvideModalComponentHost {
        val modalState = rememberModalComponentState()
        val scope = rememberCoroutineScope()

        // Your app content
        Column {
            Text("Main Content")
            Button(onClick = { scope.launch { modalState.show() } }) {
                Text("Show Modal")
            }
        }

        // Modal component
        ModalComponent(
            state = modalState,
            onDismissRequest = { scope.launch { modalState.hide() } }
        ) {
            Text("Modal Content", modifier = Modifier.padding(24.dp))
        }
    }
}

@Composable
fun BottomSheetExample() {
    ProvideModalComponentHost {
        val state = rememberModalComponentState(initialVisibilityRatio = 0f)
        val scope = rememberCoroutineScope()

        // Your content here
        MyAppContent()

        ModalComponent(
            state = state,
            color = Color.White,
            shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
            hostConfigs = ModalComponentHostConfig.default(),
            onDismissRequest = { scope.launch { state.hide() } }
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(24.dp)
            ) {
                Text("Bottom Sheet Title", style = MaterialTheme.typography.headlineSmall)
                Spacer(modifier = Modifier.height(16.dp))
                Text("Bottom sheet content goes here")
            }
        }
    }
}

// Slide up animation
Image(
    modifier = Modifier
        .fillMaxWidth()
        .offset {
            IntOffset(
                x = 0,
                y = (200.dp - (200.dp * state.visibilityRatio)).roundToPx()
            )
        }
        .alpha(state.visibilityRatio),
    painter = painterResource(Res.drawable.image),
    contentDescription = null
)

@Composable
fun ModalComponent(
    state: ModalComponentState,
    modifier: Modifier = Modifier,
    color: Color = Color.Transparent,
    shape: Shape = RectangleShape,
    contentColor: Color = contentColorFor(color),
    shadowElevation: Dp = 0.dp,
    tonalElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    hostConfigs: ModalComponentHostConfig = ModalComponentHostConfig.default(),
    dismissOnBackPress: Boolean = true,
    dismissOnClickOutside: Boolean = true,
    onDismissRequest: () -> Unit,
    content: @Composable () -> Unit
)

class ModalComponentState(
    initialVisibilityRatio: Float = 0f
) {
    val visibilityRatio: Float // Current visibility ratio (0f to 1f)
    val isVisible: Boolean // Whether modal is visible
    val indexInStack: Int? // Position in modal stack

    suspend fun show(animationSpec: AnimationSpec<Float> = tween(300))
    suspend fun hide(animationSpec: AnimationSpec<Float> = tween(300))
    suspend fun snapTo(targetValue: Float)
}

@Composable
fun rememberModalComponentState(
    initialVisibilityRatio: Float = 0f
): ModalComponentState

data class ModalComponentHostConfig(
    val contentAlignment: Alignment,      // Alignment of modal content
    val backgroundBlur: Dp,                // Blur amount for background
    val backgroundTint: Color,             // Tint color for background
    val backgroundScaleRatio: Float        // Scale ratio for background (>1f zooms in)
)

ModalComponentHostConfig.default()

@Composable
fun ProvideModalComponentHost(
    modifier: Modifier = Modifier,
    state: ModalComponentHostState = rememberModalComponentHostState(),
    content: @Composable () -> Unit
)

val states = List(3) { rememberModalComponentState(false) }

ProvideModalComponentHost {
    MyContent()

    states.forEachIndexed { index, state ->
        ModalComponent(
            state = state,
            onDismissRequest = { scope.launch { state.hide() } }
        ) {
            Text("Modal $index")
        }
    }
}

// Center dialog with strong blur
val centerDialogConfig = ModalComponentHostConfig(
    contentAlignment = Alignment.Center,
    backgroundBlur = 20.dp,
    backgroundTint = Color.Black.copy(0.4f),
    backgroundScaleRatio = 1.02f
)

// Side sheet with minimal effects
val sideSheetConfig = ModalComponentHostConfig(
    contentAlignment = Alignment.CenterEnd,
    backgroundBlur = 8.dp,
    backgroundTint = Color.Black.copy(0.05f),
    backgroundScaleRatio = 1.0f
)

// Fast animation
scope.launch {
    state.show(animationSpec = tween(150, easing = FastOutSlowInEasing))
}

// Spring animation
scope.launch {
    state.show(animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ))
}

Slider(
    value = state.visibilityRatio,
    onValueChange = { scope.launch { state.snapTo(it) } }
)