package com.suno.android.common_ui.components.preview

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalInspectionMode
import androidx.compose.ui.unit.dp
import androidx.core.content.res.ResourcesCompat
import coil3.ColorImage
import coil3.annotation.ExperimentalCoilApi
import coil3.asImage
import coil3.compose.AsyncImagePreviewHandler
import coil3.compose.LocalAsyncImagePreviewHandler
import com.suno.android.common_ui.R
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.SunoTheme

/**
 * Utility composable to wrap previews so we can add preview specific CompositionLocals, etc.
 */
@OptIn(ExperimentalCoilApi::class)
@Composable
fun SunoPreview(
    content: @Composable () -> Unit,
) {
    val resources = LocalContext.current.resources

    SunoTheme {
        val fallbackPreviewColor = ExtendedTheme.colors.sunoPink.toArgb()
        val previewHandler = AsyncImagePreviewHandler {
            ResourcesCompat.getDrawable(resources, R.drawable.launch_splash, null)?.asImage() ?: ColorImage(
                fallbackPreviewColor,
            )
        }

        CompositionLocalProvider(
            value = LocalAsyncImagePreviewHandler provides previewHandler,
        ) {
            if (LocalInspectionMode.current) {
                content()
            } else {
                // center previews that are smaller than screen size so that pinch-to-zoom gesture works
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(bottom = 48.dp),
                ) {
                    content()
                }
            }
        }
    }
}