package com.laseroptek.raman.ui.screens.info

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.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
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.TextButton
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.CenterVertically
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.SolidColor
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
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.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.common.button.CheckBoxWithText
import com.laseroptek.raman.ui.screens.info.base.LineChartGraph
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.dropShadow
import com.laseroptek.raman.utils.ext.noRippleClickable
import com.laseroptek.raman.utils.ext.px
import timber.log.Timber
import java.util.Locale

@Composable
fun InfoScreen(
    paddingValues: PaddingValues = PaddingValues(),
    mainViewModel: MainViewModel = hiltViewModel<MainViewModel>(),
    infoViewModel: InfoViewModel = hiltViewModel<InfoViewModel>(),
) {
    var showSoftwareInformationDialog by remember{ mutableStateOf(false) }

    val chartDataQueue by mainViewModel.chartDataQueue.collectAsState()

    /*
    var intTempState by remember { mutableStateOf(true) }
    var extTempState by remember { mutableStateOf(true) }
    var intHumidityState by remember { mutableStateOf(true) }
    var extHumidityState by remember { mutableStateOf(true) }

    var ktpState by remember { mutableStateOf(true) }
    var chamber1State by remember { mutableStateOf(true) }
    var chamber2State by remember { mutableStateOf(true) }
    var basePlateState by remember { mutableStateOf(true) }
    var waterState by remember { mutableStateOf(true) }
    */

    val chartUiState by infoViewModel.chartUiState.collectAsState()

    val version by mainViewModel.version.collectAsState()

    val currentTemperature by mainViewModel.temperature.collectAsState()
    val lampCount by  mainViewModel.lampCount.collectAsState()

    var isSystemMonitoring by remember { mutableStateOf(true) }
    val selectedBorderBrush = Brush.verticalGradient(
        colors = listOf(
            Color(92, 99, 107),
            Color(34, 37, 40),
        )
    )
    val selectedBackgroundBrush = Brush.verticalGradient(
        colors = listOf(
            Color(47,51,57),
            Color(83, 88, 97),
        )
    )
    val selecteDropShadowColor1 = Color(243,205,31).copy(alpha = 0.2f)
    val selecteDropShadowColor2 = Color(0,0,0).copy(alpha = 0.1f)

    Timber.d("currentTemperature: ${currentTemperature}")
    Timber.d("lampCount: ${lampCount}")

    Box {
        // Main.
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .padding(
                    start = 130.px.dp,
                    end = 30.px.dp,
                    top = 30.px.dp,
                    bottom = 30.px.dp
                ),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            // Info_Top_Layer
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(110.px.dp)
                    .background(Color.Transparent)
            ) {
                // Flash Lamp Total Count (Text) & Shot Count
                Column(
                    modifier = Modifier
                        .align(Alignment.BottomStart)
                        .size(width = 250.px.dp, height = 80.px.dp)
                ) {
                    // Flash Lamp Total Count (Text)
                    Text(
                        text = stringResource(R.string.flash_lamp_tot_cnt),
                        style = RobotoTypography.bodyMedium.copy(
                            textAlign = TextAlign.End,
                            fontSize = 20.px.sp,
                            fontWeight = FontWeight.Medium,
                            lineHeight = 24.px.sp,
                        ),
                        textAlign = TextAlign.Center,
                    )

                    Spacer(Modifier.weight(1f))

                    // Shot Count
                    Row (
                        modifier = Modifier
                            .background(
                                Brush.verticalGradient(
                                    colors = listOf(
                                        Color(255, 255, 255),
                                        Color(250, 250, 250),
                                    )
                                ),
                                shape = RoundedCornerShape(12.px.dp)
                            )
                            .border(
                                width = 1.px.dp,
                                shape = RoundedCornerShape(12.px.dp),
                                color = Color(209, 209, 209)
                            )
                            .size(width = 260.px.dp, height = 52.px.dp),
                        verticalAlignment = CenterVertically,
                        horizontalArrangement = Arrangement.End
                    ) {
                        Text(
                            text = String.format(Locale.US, "%9d", lampCount),
                            style = RobotoTypography.bodyMedium.copy(
                                fontSize = 26.px.sp,
                                fontWeight = FontWeight.Medium,
                                lineHeight = 32.px.sp,
                            ),
                            textAlign = TextAlign.Center,
                            color = Color.Black
                        )
                        Spacer(Modifier.width(10.px.dp))
                        Text(
                            text = stringResource(R.string.shots),
                            style = RobotoTypography.bodyMedium.copy(
                                fontSize = 14.px.sp,
                                fontWeight = FontWeight.Normal,
                                lineHeight = 20.px.sp,
                            ),
                            textAlign = TextAlign.Center,
                            color = Color.Black
                        )
                        Spacer(Modifier.width(20.px.dp))
                    }
                }

                // Software Info - Button
                TextButton(
                    modifier = Modifier
                        .align(Alignment.TopEnd)
                        .size(width = 150.px.dp, height = 44.px.dp)
                        .clip(RoundedCornerShape(100.px.dp))
                        .background(Color(35, 35, 33)),
                    onClick = {
                        showSoftwareInformationDialog = true
                    }
                ) {
                    Text(
                        text = stringResource(R.string.software_info),
                        style = RobotoTypography.bodyMedium.copy(
                            fontSize = 16.px.sp,
                            fontWeight = FontWeight.Medium,
                            lineHeight = 24.px.sp,
                        ),
                        textAlign = TextAlign.Center,
                        color = Color(243,205,81)
                    )
                }
            }

            Spacer(Modifier.height(20.px.dp))

            // Tab
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.px.dp)
                    .background(Color.Transparent)
            ) {
                Row(
                    modifier =
                        Modifier
                            .size(406.px.dp, 46.px.dp)
                            .border(
                                width = 1.px.dp,
                                color = Color(209, 209, 209),
                                shape = RoundedCornerShape(10.px.dp)
                            ),
                    verticalAlignment = CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    // Environment Monitoring - Title
                    Row(
                        modifier = Modifier
                            .noRippleClickable {
                                if (isSystemMonitoring == true) {
                                    isSystemMonitoring = false

                                    /*
                                    intTempState = true
                                    extTempState = true
                                    intHumidityState = true
                                    extHumidityState = true

                                    ktpState = false
                                    chamber1State = false
                                    chamber2State = false
                                    basePlateState = false
                                    waterState = false
                                    */
                                }
                            }
                            .size(200.px.dp, 40.px.dp)
                            .clip(RoundedCornerShape(8.px.dp))
                            .background(
                                brush =
                                    if (isSystemMonitoring == false) selectedBackgroundBrush
                                    else SolidColor(Color.Transparent),
                            )
                            .border(
                                width = 1.5.px.dp,
                                brush = if (isSystemMonitoring == false) selectedBorderBrush else SolidColor(
                                    Color.Transparent
                                ),
                                shape = RoundedCornerShape(8.px.dp)
                            )
                            .background(
                                brush =
                                    if (isSystemMonitoring == false) selectedBackgroundBrush
                                    else SolidColor(Color.Transparent),
                            )
                            .dropShadow(
                                shape = RoundedCornerShape(8.px.dp),
                                color = if (isSystemMonitoring == false) selecteDropShadowColor1 else Color.Transparent,
                                blur = 48.px.dp,
                                offsetX = 0.px.dp,
                                offsetY = 24.px.dp,
                                spread = 0.px.dp
                            )
                            .dropShadow(
                                shape = RoundedCornerShape(8.px.dp),
                                color = if (isSystemMonitoring == false) selecteDropShadowColor2 else Color.Transparent,
                                blur = 6.px.dp,
                                offsetX = 0.px.dp,
                                offsetY = 3.px.dp,
                                spread = 0.px.dp
                            ),
                        verticalAlignment = CenterVertically,
                        horizontalArrangement = Arrangement.Center
                    ) {
                        Text(
                            text = stringResource(R.string.environment_monitoring),
                            style = RobotoTypography.bodySmall.copy(
                                fontSize = 16.px.sp,
                                fontWeight = FontWeight.ExtraLight,
                            ),
                            textAlign = TextAlign.Center,
                            color = if (isSystemMonitoring == false)  Color.White else Color.Black
                        )
                    }

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

                    // System Monitoring - Title
                    Row(
                        modifier = Modifier
                            .noRippleClickable {
                                if (isSystemMonitoring == false) {
                                    isSystemMonitoring = true

                                    /*
                                    intTempState = false
                                    extTempState = false
                                    intHumidityState = false
                                    extHumidityState = false

                                    ktpState = true
                                    chamber1State = true
                                    chamber2State = true
                                    basePlateState = true
                                    waterState = true
                                    */
                                }

                            }
                            .size(200.px.dp, 40.px.dp)
                            .clip(RoundedCornerShape(8.px.dp))
                            .background(
                                brush =
                                    if (isSystemMonitoring == true) selectedBackgroundBrush
                                    else SolidColor(Color.Transparent),
                            )
                            .border(
                                width = 1.5.px.dp,
                                brush = if (isSystemMonitoring == true) selectedBorderBrush else SolidColor(
                                    Color.Transparent
                                ),
                                shape = RoundedCornerShape(8.px.dp)
                            )
                            .background(
                                brush =
                                    if (isSystemMonitoring == true) selectedBackgroundBrush
                                    else SolidColor(Color.Transparent),
                            )
                            .dropShadow(
                                shape = RoundedCornerShape(8.px.dp),
                                color = if (isSystemMonitoring == true) selecteDropShadowColor1 else Color.Transparent,
                                blur = 48.px.dp,
                                offsetX = 0.px.dp,
                                offsetY = 24.px.dp,
                                spread = 0.px.dp
                            )
                            .dropShadow(
                                shape = RoundedCornerShape(8.px.dp),
                                color = if (isSystemMonitoring == true) selecteDropShadowColor2 else Color.Transparent,
                                blur = 6.px.dp,
                                offsetX = 0.px.dp,
                                offsetY = 3.px.dp,
                                spread = 0.px.dp
                            ),
                        verticalAlignment = CenterVertically,
                        horizontalArrangement = Arrangement.Center
                    ) {
                        Text(
                            text = stringResource(R.string.system_monitoring),
                            style = RobotoTypography.bodySmall.copy(
                                fontSize = 16.px.sp,
                                fontWeight = FontWeight.ExtraLight,
                            ),
                            textAlign = TextAlign.Center,
                            color = if (isSystemMonitoring == true)  Color.White else Color.Black
                        )
                    }
                }
            }

            Spacer(Modifier.height(8.px.dp))

            if (isSystemMonitoring == false) {
                // Environment Monitoring - Frame
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(88.px.dp),
                    verticalAlignment = CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    // Current Interal Environment - Frame
                    Row(modifier = Modifier
                        .background(
                            Brush.verticalGradient(
                                colors = listOf(
                                    Color(255, 255, 255),
                                    Color(250, 250, 250),
                                )
                            ),
                            shape = RoundedCornerShape(12.px.dp)
                        )
                        .border(
                            1.dp,
                            color = Color(209, 209, 209),
                            shape = RoundedCornerShape(12.px.dp)
                        )
                        .size(514.px.dp, 88.px.dp),
                        verticalAlignment = CenterVertically,
                        horizontalArrangement = Arrangement.Center
                    ) {
                        // Current Interal Environment - Text
                        Column(
                            modifier = Modifier
                                .size(155.px.dp, 48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.Start
                        ) {
                            Text(
                                text = stringResource(R.string.current_internal_environment),
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 16.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 24.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black,
                            )
                        }

                        // TEMP - Text & Value
                        Column(
                            modifier = Modifier
                                .size(155.px.dp, 48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {

                            Text(
                                text = "TEMP",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.intTemperature.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }

                        // Divider
                        VerticalDivider(
                            modifier = Modifier.size(2.px.dp, 48.px.dp),
                            thickness = 2.px.dp,
                            color = Color.LightGray
                        )

                        Column(
                            modifier = Modifier
                                .size(155.px.dp, 48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                text = "HUMIDITY",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.intHumidity.toInt().toString() +  " %",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }
                    }

                    Spacer(modifier = Modifier.weight(1f))

                    // Current External Environment - Frame
                    Row(modifier = Modifier
                        .background(
                            Brush.verticalGradient(
                                colors = listOf(
                                    Color(255, 255, 255),
                                    Color(250, 250, 250),
                                )
                            ),
                            shape = RoundedCornerShape(12.px.dp)
                        )
                        .border(
                            1.dp,
                            color = Color(209, 209, 209),
                            shape = RoundedCornerShape(12.px.dp)
                        )
                        .size(514.px.dp, 88.px.dp),
                        verticalAlignment = CenterVertically,
                        horizontalArrangement = Arrangement.Center
                    ) {
                        // Current External Environment - Text
                        Column(
                            modifier = Modifier
                                .size(155.px.dp, 48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.Start
                        ) {
                            Text(
                                text = stringResource(R.string.current_external_environment),
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 16.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 24.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black,
                            )
                        }

                        // TEMP - Text & Value
                        Column(
                            modifier = Modifier
                                .size(155.px.dp, 48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {

                            Text(
                                text = "TEMP",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.extTemperature.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }

                        // Divider
                        VerticalDivider(
                            modifier = Modifier.size(2.px.dp, 48.px.dp),
                            thickness = 2.px.dp,
                            color = Color.LightGray
                        )

                        Column(
                            modifier = Modifier
                                .size(155.px.dp, 48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                text = "HUMIDITY",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.extHumidity.toInt().toString() + " %",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }
                    }
                }
            } else {
                // System Monitoring - Frame
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(88.px.dp),
                    verticalAlignment = CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    // Current Interal Environment - Frame
                    Row(modifier = Modifier
                        .background(
                            Brush.verticalGradient(
                                colors = listOf(
                                    Color(255, 255, 255),
                                    Color(250, 250, 250),
                                )
                            ),
                            shape = RoundedCornerShape(12.px.dp)
                        )
                        .border(
                            1.dp,
                            color = Color(209, 209, 209),
                            shape = RoundedCornerShape(12.px.dp)
                        )
                        .fillMaxWidth()
                        .height(88.px.dp),
                        verticalAlignment = CenterVertically,
                        horizontalArrangement = Arrangement.Center
                    ) {
                        // Current Interal Environment - Text
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                                .height(48.px.dp)
                                .padding(start = 20.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.Start
                        ) {
                            Text(
                                text = stringResource(R.string.current_system_temperature),
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 16.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 24.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black,
                            )
                        }

                        // KTP - Text & Value
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                                .height(48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {

                            Text(
                                text = "KTP",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.ktp.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }

                        // Divider
                        VerticalDivider(
                            modifier = Modifier.size(2.px.dp, 48.px.dp),
                            thickness = 2.px.dp,
                            color = Color.LightGray
                        )

                        // Chamber1 - Text & Value
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                                .height(48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                text = "CHAMBER1",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.chamber1.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }

                        // Divider
                        VerticalDivider(
                            modifier = Modifier.size(2.px.dp, 48.px.dp),
                            thickness = 2.px.dp,
                            color = Color.LightGray
                        )

                        // Chamber2 - Text & Value
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                                .height(48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                text = "CHAMBER2",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.chamber2.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }

                        // Divider
                        VerticalDivider(
                            modifier = Modifier.size(2.px.dp, 48.px.dp),
                            thickness = 2.px.dp,
                            color = Color.LightGray
                        )

                        // Baseplate - Text & Value
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                                .height(48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                text = "BASEPLATE",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.basePlate.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }

                        // Divider
                        VerticalDivider(
                            modifier = Modifier.size(2.px.dp, 48.px.dp),
                            thickness = 2.px.dp,
                            color = Color.LightGray
                        )

                        // Water - Text & Value
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                                .height(48.px.dp),
                            verticalArrangement = Arrangement.Center,
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                text = "WATER",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 14.px.sp,
                                    fontWeight = FontWeight.Normal,
                                    lineHeight = 20.px.sp,
                                ),
                                textAlign = TextAlign.Start,
                                color = Color.Black.copy(alpha = 0.6f),
                            )

                            Spacer(modifier = Modifier.weight(1f))

                            Text(
                                text = currentTemperature.water.toInt().toString() + " °C",
                                style = RobotoTypography.bodyMedium.copy(
                                    fontSize = 26.px.sp,
                                    fontWeight = FontWeight.Medium,
                                    lineHeight = 20.px.sp,
                                ),
                                color = Color.Black,
                            )
                        }
                    }
                }
            }


            Spacer(Modifier.height(8.px.dp))

            // Info_Chart_Layer
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(260.px.dp)
                    .clip(RoundedCornerShape(size = 12.px.dp))
                    .background(color = Color.White)
                    .border(
                        1.px.dp,
                        color = Color.LightGray,
                        shape = RoundedCornerShape(size = 12.px.dp)
                    ),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                LineChartGraph(
                    isSystemMonitoring = isSystemMonitoring,
                    chartDataQueue = chartDataQueue,
                    chartUiState = chartUiState
                )
            }

            Spacer(Modifier.height(8.px.dp))

            // CheckBox List
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.px.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                if (isSystemMonitoring == false) {
                    // Internal Temp - CheckBox
                    CheckBoxWithText(label = "Internal Temp", state =  chartUiState.intTempState,
                        onStateChange = {
                            Timber.d("onStateChange Internal Temp")
                            //intTempState = it
                            infoViewModel.toggleLine(ChartLine.INT_TEMP)
                        }
                    )

                    // External Temp - CheckBox
                    CheckBoxWithText(label = "External Temp", state = chartUiState.extTempState,
                        onStateChange = {
                            Timber.d("onStateChange External Temp")
                            //extTempState = it
                            infoViewModel.toggleLine(ChartLine.EXT_TEMP)
                        }
                    )

                    // Internal Humidity - CheckBox
                    CheckBoxWithText(label = "Internal Humidity", state = chartUiState.intHumidityState,
                        onStateChange = {
                            Timber.d("onStateChange Internal Humidity")
                            //intHumidityState = it
                            infoViewModel.toggleLine(ChartLine.INT_HUMIDITY)
                        }
                    )

                    // External Humidity - CheckBox
                    CheckBoxWithText(label = "External Humidity", state = chartUiState.extHumidityState,
                        onStateChange = {
                            Timber.d("onStateChange External Humidity")
                            //extHumidityState = it
                            infoViewModel.toggleLine(ChartLine.EXT_HUMIDITY)
                        }
                    )
                } else {
                    // KTP - CheckBox
                    CheckBoxWithText(label = "KTP", state = chartUiState.ktpState,
                        onStateChange = {
                            Timber.d("onStateChange KTP")
                            //ktpState = it
                            infoViewModel.toggleLine(ChartLine.KTP)
                        }
                    )

                    // Chamber1 - CheckBox
                    CheckBoxWithText(label = "Chamber1", state = chartUiState.chamber1State,
                        onStateChange = {
                            Timber.d("onStateChange Chamber1")
                            //chamber1State = it
                            infoViewModel.toggleLine(ChartLine.CHAMBER1)
                        }
                    )

                    // Chamber2 - CheckBox
                    CheckBoxWithText(label = "Chamber2", state = chartUiState.chamber2State,
                        onStateChange = {
                            Timber.d("onStateChange Chamber2")
                            //chamber2State = it
                            infoViewModel.toggleLine(ChartLine.CHAMBER2)
                        }
                    )

                    // BasePlate - CheckBox
                    CheckBoxWithText(label = "BasePlate", state = chartUiState.basePlateState,
                        onStateChange = {
                            Timber.d("onStateChange BasePlate")
                            //basePlateState = it
                            infoViewModel.toggleLine(ChartLine.BASE_PLATE)
                        }
                    )

                    // Water - CheckBox
                    CheckBoxWithText(label = "Water", state = chartUiState.waterState,
                        onStateChange = {
                            Timber.d("onStateChange Water")
                            //waterState = it
                            infoViewModel.toggleLine(ChartLine.WATER)
                        }
                    )
                }
            }

            Spacer(Modifier.weight(1f))
        }

        ///////////////////////////////////////////
        // Popups

        if (showSoftwareInformationDialog) {
            SoftwareInformationDialog(
                //showSoftwareInformationDialog = mainViewModel.showSoftwareInformationDialog,
                version = version,
                title = stringResource(R.string.software_information_title),
                onClick = {
                    Timber.d("SoftwareInformationDialog onClick")
                    showSoftwareInformationDialog = false
                }
            )
        }
    }
}


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