package io.oxygenhub.android.ui.common

import androidx.compose.foundation.BorderStroke

import androidx.compose.foundation.layout.ColumnScope

import androidx.compose.material3.CardColors

import androidx.compose.material3.CardDefaults

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.OutlinedCard

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.unit.dp

/**

 * A panel you can see on any screen (#24): Material's outlined card on a

 * tone a clear step above the background, with a 1 dp edge, as the hub's

 * pages give theirs. Every card in the app is one.

 */

@Composable

fun Panel(modifier: Modifier = Modifier, colors: CardColors = panelColors(), content: @Composable ColumnScope.() -> Unit) {

    OutlinedCard(modifier, colors = colors, border = panelBorder()) {

        // What sits on a panel shows the panel: a ListItem, say, paints

        // `surface`, which is the screen's own tone.

        val scope = this

        MaterialTheme(colorScheme = MaterialTheme.colorScheme.copy(surface = Color.Transparent)) { scope.content() }

    }

}

/** A panel's colours; `alpha` below 1 lets a backdrop show through. */

@Composable

fun panelColors(alpha: Float = 1f): CardColors =

    CardDefaults.outlinedCardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerLow.copy(alpha = alpha))

@Composable

fun panelBorder(): BorderStroke = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant)