package com.laseroptek.raman.ui.screens.home.dcd

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.laseroptek.raman.data.datasource.db.RamanDatabase
import com.laseroptek.raman.data.source.db.RamanDatabaseService
import com.laseroptek.raman.repository.DatabaseRepository
import com.laseroptek.raman.repository.PreferenceRepository
import com.laseroptek.raman.repository.SerialPortRepository
import com.laseroptek.raman.ui.screens.main.MainViewModel
import com.laseroptek.raman.utils.DefaultDispatcherProvider
import com.laseroptek.raman.utils.ext.px
import timber.log.Timber


@Composable
fun GradientSlider(
    modifier: Modifier = Modifier,
    chargeRate: Int = 0, // Value from (0 .. 100)
) {
    val chargeIndex = ((chargeRate.coerceIn(0, 100) + 4) / 5).toInt()   // 0..19
    Timber.d("chargeRate: $chargeRate, chargeIndex: $chargeIndex")

    Box(
        modifier = modifier
            .clip(RoundedCornerShape(6.px.dp))
            .border(width = 1.px.dp, color = Color.Black.copy(alpha = 0.3f), shape = RoundedCornerShape(6.px.dp)),
    ) {
        // Percent
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            for (i in 19 downTo 0) {
                val (backgroundColor, borderColor) = if (i > chargeIndex) {
                    Pair(Color.White, Color.DarkGray)
                } else {
                    if ( i < 3 && chargeIndex < 3) {
                        Pair(Color.Red, Color.DarkGray)
                    } else {
                        Pair(Color.DarkGray, Color.DarkGray)
                    }

                }

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(10.px.dp)
                ) {
                    Box(
                        modifier = Modifier
                            .size(width = 30.px.dp, height = 7.px.dp)
                            .border(width = 0.5.px.dp, color = borderColor)
                            .background(color = backgroundColor)
                            .align(Alignment.Center)
                    )
                }

            }
        }
    }
}


@Preview(
    apiLevel = 34,
    uiMode = Configuration.UI_MODE_NIGHT_NO,
    showBackground = false,
    device = "spec:width=1920dp,height=1080dp,dpi=150,isRound=false,chinSize=0dp,orientation=portrait"
)
@Composable
fun GradientSliderPreview(
    mainViewModel:MainViewModel = MainViewModel(
        preferenceRepository = PreferenceRepository(LocalContext.current),
        serialPortRepository = SerialPortRepository.createWithFakeRepository(),
        databaseRepository = DatabaseRepository(RamanDatabaseService(RamanDatabase.getInstance(LocalContext.current))),
        dispatcherProvider = DefaultDispatcherProvider(),
        applicationContext = LocalContext.current
    )
) {
    GradientSlider(
        //mainViewModel = mainViewModel
        modifier = Modifier
            .size(40.px.dp, 210.px.dp),
        chargeRate =  20
    )
}
