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

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.laseroptek.raman.ui.theme.RobotoTypography
import com.laseroptek.raman.utils.ext.px

@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_NO,
    showBackground = false,
    device = "spec:width=1920dp,height=1080dp,dpi=150,isRound=false,chinSize=0dp,orientation=landscape"
)
@Composable
fun CheckBoxWithText(
    label: String = "INTERNAL TEMP.",
    state: Boolean = true,
    onStateChange: (Boolean) -> Unit = {}
) {
    // Checkbox with text on right side
    ElevatedCard(
        modifier = Modifier.padding(6.px.dp),
        shape = RoundedCornerShape(45.px.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 8.px.dp),
    ) {
        Row( modifier = Modifier.width(160.px.dp).height(45.px.dp)
            .clickable(
                role = Role.Checkbox,
                onClick = { onStateChange(!state) }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Color(255,255,255),
                        Color(209,209,209),
                    )
                )
            ),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center
        ) {
            Checkbox(
                checked = state,
                onCheckedChange = null,
                modifier = Modifier.scale(0.7f),
                colors = CheckboxDefaults.colors(
                    checkedColor = Color.White, // Color of the box when checked
                    uncheckedColor = Color.Gray, // Color of the box when unchecked
                    checkmarkColor = Color.Black // Color of the checkmark
                )
            )

            Spacer(modifier = Modifier.width(4.px.dp))

            Text(
                text = label,
                style = RobotoTypography.bodyMedium.copy(
                    fontSize = 14.px.sp,
                    fontWeight = FontWeight.Medium,
                    lineHeight = 20.px.sp,
                ),
                color = Color.Black,
                textAlign = TextAlign.Center,
            )
        }

    }

}