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

import android.content.res.Configuration
import androidx.compose.foundation.Image
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.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
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.collectAsState
import androidx.compose.runtime.getValue
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.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
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 androidx.constraintlayout.compose.ConstraintLayout
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import com.laseroptek.raman.R
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.ui.theme.RobotoTypography
import com.laseroptek.raman.utils.DefaultDispatcherProvider
import com.laseroptek.raman.utils.ext.noRippleClickable
import com.laseroptek.raman.utils.ext.px
import timber.log.Timber

@Composable
fun DcdView(
    mainViewModel: MainViewModel = hiltViewModel<MainViewModel>(),
    onClick: () -> Unit = {},
) {
    val selectedSprayDcdIndex by mainViewModel.selectedSprayDcdIndex.collectAsState()
    val sprayDcd by mainViewModel.sprayDcd.collectAsState()

    ConstraintLayout(
        modifier = Modifier
            .size(209.px.dp, 74.px.dp)
            .background(Color.Transparent)
            .offset(x = (0).px.dp)
    ) {
        val (boxLRef, boxRRef) = createRefs()

        // right
        Row(
            modifier = Modifier
                .border(
                    width = 2.px.dp,
                    color = Color(50,50,50),
                    shape = RoundedCornerShape(999.px.dp)
                )
                .size(176.px.dp, 62.px.dp)
                .clip(
                    RoundedCornerShape(
                        topStart = 0.dp,     // No rounding on top-left
                        topEnd = 999.px.dp,    // Full rounding on top-right
                        bottomStart = 0.px.dp,  // No rounding on bottom-left
                        bottomEnd = 999.px.dp  // Full rounding on bottom-right
                    )
                )
                .background(Color(37,37,36))
                .constrainAs(boxRRef) {
                    end.linkTo(parent.end)
                    centerVerticallyTo(parent)
                }
            , verticalAlignment = Alignment.CenterVertically
            , horizontalArrangement = Arrangement.End
        ) {
            // Spray
            Timber.d("selectedSprayDcdIndex: ${selectedSprayDcdIndex}")
            //Timber.d("sprayDcdList.size: ${sprayDcdList.size}")

            val sprayTime = "%d".format(sprayDcd.sprayTime)
            Timber.d("sprayTime: ${sprayTime}")

            Column(
                modifier = Modifier
                    .width(45.px.dp)
                    .fillMaxHeight()
                , horizontalAlignment = Alignment.CenterHorizontally
                , verticalArrangement = Arrangement.Center
            )  {
                Text(
                    text = "Spray",
                    style = RobotoTypography.bodyMedium,
                    fontWeight = FontWeight.Normal,
                    fontSize = 14.px.sp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                )
                Text(
                    text = sprayTime,
                    style = RobotoTypography.bodyMedium,
                    fontWeight = FontWeight.Normal,
                    fontSize = 26.px.sp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                )
            }

            Spacer( Modifier.width(10.px.dp))

            VerticalDivider(
                color = Color(161,161,170),
                thickness = 1.px.dp,
                modifier = Modifier.size(1.px.dp, 30.px.dp)
            )

            Spacer( Modifier.width(10.px.dp))

            // Delay
            Timber.d("selectedSprayDcdIndex.value: ${selectedSprayDcdIndex}")
            //Timber.d("sprayDcdList.size: ${sprayDcdList.size}")

            val sprayDelay = "%d".format(sprayDcd.sprayDelay)
            Timber.d("sprayDelay: ${sprayDelay}")

            Column(
                modifier = Modifier
                    .width(45.px.dp)
                    .fillMaxHeight()
                , horizontalAlignment = Alignment.CenterHorizontally
                , verticalArrangement = Arrangement.Center
            )  {
                Text(
                    text = "Delay",
                    style = RobotoTypography.bodyMedium,
                    fontWeight = FontWeight.Normal,
                    fontSize = 14.px.sp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                )
                Text(
                    text = sprayDelay,
                    style = RobotoTypography.bodyMedium,
                    fontWeight = FontWeight.Normal,
                    fontSize = 26.px.sp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                )
            }

            Spacer( Modifier.width(25.px.dp))
        }

        // left - DCD setting button
        Box(
            modifier = Modifier
                .noRippleClickable(onClick = { onClick.invoke() })
                .size(74.px.dp)
                .background(Color.Transparent)
                .constrainAs(boxLRef) {
                    start.linkTo(parent.start)
                    centerVerticallyTo(parent)
                }
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_dcd_setting2_btn),
                contentDescription = "Preset Setting",
                modifier = Modifier
                    .fillMaxSize(),
                contentScale = ContentScale.Crop
            )
        }
    }
}


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