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.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.ui.Alignment
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.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.laseroptek.raman.data.datasource.db.RamanDatabase
import com.laseroptek.raman.data.model.serial.SprayDcd
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.ui.theme.RobotoTypography
import com.laseroptek.raman.utils.DefaultDispatcherProvider
import com.laseroptek.raman.utils.ext.noRippleClickable
import com.laseroptek.raman.utils.ext.px

@Composable
fun DcdBox(
    modifier: Modifier = Modifier,
    id: Int = 0,
    selNumber: Int = 0,
    sprayDcdList: MutableList<SprayDcd> = mutableStateListOf<SprayDcd>(),
    onClickDcd: (Int) -> Unit = {},
    onClickOption: (Int) -> Unit  = {}
) {
    Row(
        modifier = Modifier
            .noRippleClickable { onClickDcd.invoke(id) }
            .size(221.px.dp, 64.px.dp)
            .clip(RoundedCornerShape(12.px.dp))
            .background(
                brush =
                    if (selNumber == id)
                        Brush.verticalGradient(
                            colorStops = arrayOf(
                                0.0f to Color(255, 255, 254),
                                0.5f to Color(255, 253, 248),
                                1.0f to Color(254, 245, 216)
                            )
                        )
                    else
                        Brush.verticalGradient(
                            colorStops = arrayOf(
                                0.0f to Color(255, 255, 255),
                                1.0f to Color(240, 240, 240)
                            )
                        )
            )
            .border(
                width = 1.px.dp,
                color = if (selNumber == id) Color(222, 173, 11) else Color(221, 221, 221),
                shape = RoundedCornerShape(12.px.dp)
            )
            .padding(start = 12.px.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        // Left
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(160.px.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            // upper
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(20.px.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                CoolerTitle(id.toString())
            }

            Spacer(modifier = Modifier.height(1.px.dp))

            // lower
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(20.px.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // spray
                Text(
                    text = if(sprayDcdList.size > id) {
                        val option = sprayDcdList[id]
                        "Spray: %d".format(
                            option.sprayTime.toInt()
                        )
                    } else "Spray: 0",
                    style = RobotoTypography.labelMedium,
                    fontSize = 14.px.sp,
                    color = Color.Black.copy(alpha = 0.6f)
                )

                // divider
                Spacer(modifier = Modifier.width(5.px.dp))
                VerticalDivider(
                    color = Color(161,161,170),
                    thickness = 1.px.dp,
                    modifier = Modifier.size(1.px.dp, 14.px.dp)
                )
                Spacer(modifier = Modifier.width(5.px.dp))

                // delay
                Text(
                    text = if(sprayDcdList.size > id) {
                        val option = sprayDcdList[id]
                        "Delay: %d".format(
                            option.sprayDelay.toInt()
                        )
                    } else "Delay: 0"
                    ,
                    style = RobotoTypography.labelMedium,
                    fontSize = 14.px.sp,
                    color = Color.Black.copy(alpha = 0.6f)
                )
            }
        }

        // Right
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(70.px.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            CoolerButton( onClick = { onClickOption.invoke(id) })
        }

    }
}


@Preview(
    apiLevel = 34,
    uiMode = Configuration.UI_MODE_NIGHT_NO,
    showBackground = true,
    device = "spec:width=1280dp,height=720dp,dpi=150,isRound=false,chinSize=0dp,orientation=landscape"
)
@Composable
fun PreviewDcdBox(
    mainViewModel:MainViewModel = MainViewModel(
        preferenceRepository = PreferenceRepository(LocalContext.current),
        serialPortRepository = SerialPortRepository.createWithFakeRepository(),
        databaseRepository = DatabaseRepository(RamanDatabaseService(RamanDatabase.getInstance(LocalContext.current))),
        dispatcherProvider = DefaultDispatcherProvider(),
        applicationContext = LocalContext.current
    )
) {
    DcdBox (
        //mainViewModel = mainViewModel,
    )
}
