package com.laseroptek.raman.ui.common.button

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.laseroptek.raman.R
import com.laseroptek.raman.utils.ext.dropShadow
import com.laseroptek.raman.utils.ext.innerShadow
import com.laseroptek.raman.utils.ext.px

@Composable
fun RoundImageButton(
    onClick: () -> Unit,
    painter: Painter,
    contentDescription: String?, // Important for accessibility
    modifier: Modifier = Modifier,
    buttonSize: Dp = 48.dp, // Overall size of the touch target
    imageSize: Dp = 24.dp   // Size of the image within the button
) {
    IconButton(
        onClick = onClick,
        modifier = modifier
            .size(buttonSize) // Set the touch target size for the button
            .clip(CircleShape) // This makes the button itself (and its ripple) round
            .background(
                brush = Brush.linearGradient(
                    colorStops = arrayOf(
                        0.0f to Color(255, 255, 255),
                        1.0f to Color(209, 209, 209),
                    )
                )
            )
            .border(1.6.px.dp, color = Color(208, 208, 208), shape = CircleShape)
            .dropShadow(
                shape = CircleShape,
                color = Color(0, 0, 0).copy(alpha = 0.12f),
                blur = 10.px.dp,
                offsetY = 2.px.dp,
                offsetX = 0.px.dp,
                spread = 0.px.dp
            )
            .innerShadow(
                shape = CircleShape,
                color = Color(240, 240, 240),
                blur = 1.6.px.dp,
                offsetY = 1.6.px.dp,
                offsetX = 0.px.dp,
                spread = 0.px.dp
            )
            .dropShadow(
                shape = CircleShape,
                color = Color(0, 0, 0).copy(alpha = 0.25f),
                blur = 3.2.px.dp,
                offsetY = 1.6.px.dp,
                offsetX = 0.px.dp,
                spread = 0.px.dp
            ),
    ) {
        Image(
            painter = painter,
            contentDescription = contentDescription,
            modifier = Modifier.size(imageSize), // Control the size of the image inside
            contentScale = ContentScale.Fit // Or ContentScale.Crop, ContentScale.Inside etc.
        )
    }
}

@Preview(showBackground = true)
@Composable
fun RoundImageButtonPreview() {
    RoundImageButton(
        onClick = { /* Handle click */ },
        painter = painterResource(id = R.drawable.ic_reload), // Replace with your drawable
        contentDescription = "Action description",
        buttonSize = 50.dp,
        imageSize = 24.dp
    )
}