package com.laseroptek.raman.ui.screens.engineer.serial

import android.content.res.Configuration
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
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.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
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.layout.ContentScale
import androidx.compose.ui.res.painterResource
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.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.laseroptek.raman.R
import com.laseroptek.raman.const.productMonthLists
import com.laseroptek.raman.const.productQuantityHundredthRangeList
import com.laseroptek.raman.const.productYearOrQuantityOnethRangeList
import com.laseroptek.raman.const.productYearOrQuantityTenthRangeList
import com.laseroptek.raman.ui.common.core.WheelPickerDefaults
import com.laseroptek.raman.ui.common.core.WheelTextPicker
import com.laseroptek.raman.ui.common.fullscreen.FullScreen
import com.laseroptek.raman.ui.theme.RobotoTypography
import com.laseroptek.raman.utils.ext.dropShadow
import com.laseroptek.raman.utils.ext.px
import timber.log.Timber

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SerialNumberPopup(
    title: String = stringResource(R.string.serial_number),
    productSerialList: MutableList<String> = mutableListOf(),
    laserHandSerialList: MutableList<String> = mutableListOf(),
    powerSupplySerialList: MutableList<String> = mutableListOf(),
    onClick: (Boolean, List<String>, List<String>, List<String>) -> Unit = { _, _, _, _ -> },
) {
    FullScreen(contentAlignment= Alignment.CenterEnd) {
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(360.px.dp)
                .clip(RoundedCornerShape(16.px.dp))
                .background(Color.White)
                .dropShadow(
                    shape = RoundedCornerShape(16.px.dp),
                    color = Color.Black.copy(alpha = 0.2f),
                    blur = 48.px.dp,
                    offsetX = 0.px.dp,
                    offsetY = 24.px.dp,
                    spread = 0.px.dp
                )
                .dropShadow(
                    shape = RoundedCornerShape(16.px.dp),
                    color = Color.Black.copy(alpha = 0.1f),
                    blur = 6.px.dp,
                    offsetX = 0.px.dp,
                    offsetY = 3.px.dp,
                    spread = 0.px.dp
                )
                .padding(5.px.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Top
        ) {
            // Title
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(60.px.dp)
                    .padding(start = 18.px.dp, end = 10.px.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ){
                Text(
                    text = title,
                    style = RobotoTypography.headlineLarge,
                    fontWeight = FontWeight.ExtraLight,
                    fontSize = 16.px.sp,
                    color = Color.Black,
                    textAlign = TextAlign.Center,
                )

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

                IconButton(
                    onClick = { onClick(false, productSerialList, laserHandSerialList, powerSupplySerialList) },
                    modifier = Modifier.size(40.px.dp, 40.px.dp)
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.ic_close),
                        contentDescription = null,
                        modifier = Modifier.size(24.px.dp),
                        contentScale = ContentScale.Crop
                    )
                }
            }

            // Product Title
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.px.dp)
                    .padding(start = 16.px.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.Bottom
            ){
                Text(
                    text = stringResource(R.string.product),
                    style = RobotoTypography.labelMedium,
                    fontWeight = FontWeight.Medium,
                    fontSize = 12.px.sp,
                    color = Color.Black.copy(alpha = 0.6f),
                    textAlign = TextAlign.Center,
                )
            }
            // Product SN
            SN_Layer(serialList = productSerialList)

            // Divider
            HorizontalDivider(
                modifier = Modifier.padding(start = 18.px.dp, end=10.px.dp),
                thickness = 0.2.px.dp,
                color = Color.LightGray
            )

            // LaserHand Title
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.px.dp)
                    .padding(start = 16.px.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.Bottom
            ){
                Text(
                    text = stringResource(R.string.laser_hand),
                    style = RobotoTypography.labelMedium,
                    fontWeight = FontWeight.Medium,
                    fontSize = 12.px.sp,
                    color = Color.Black.copy(alpha = 0.6f),
                    textAlign = TextAlign.Center,
                )
            }
            // LaserHand SN
            SN_Layer(serialList = laserHandSerialList)

            // Divider
            HorizontalDivider(
                modifier = Modifier
                    .padding(start = 18.px.dp, end=10.px.dp),
                thickness = 0.2.px.dp,
                color = Color.LightGray
            )

            // Power Supply Title
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.px.dp)
                    .padding(start = 16.px.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.Bottom
            ){
                Text(
                    text = stringResource(R.string.powser_supply),
                    style = RobotoTypography.labelMedium,
                    fontWeight = FontWeight.Medium,
                    fontSize = 12.px.sp,
                    color = Color.Black.copy(alpha = 0.6f),
                    textAlign = TextAlign.Center,
                )
            }

            // Power Supply SN
            SN_Layer(serialList = powerSupplySerialList)

            // Divider
            HorizontalDivider(
                modifier = Modifier
                    .padding(start = 18.px.dp, end=10.px.dp),
                thickness = 0.2.px.dp,
                color = Color.LightGray
            )

            Spacer(Modifier.weight(1f))

            // Cancel & OK
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(88.px.dp)
                    .padding(start = 10.px.dp, end = 10.px.dp),
                horizontalArrangement = Arrangement.End,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // Cancel
                TextButton(
                    modifier = Modifier
                        .size(68.px.dp, 40.px.dp),
                    onClick = {
                        Timber.d("onLoadClick")
                        onClick(false, productSerialList, laserHandSerialList, powerSupplySerialList)
                    }
                ) {
                    Text(
                        text = stringResource(R.string.cancel),
                        style = RobotoTypography.labelLarge,
                        fontWeight = FontWeight.Normal,
                        fontSize = 14.px.sp,
                        color = Color.Black
                    )
                }

                // Ok
                TextButton(
                    modifier = Modifier
                        .size(68.px.dp, 40.px.dp),
                    onClick = {
                        Timber.d("Ok Clicked")
                        onClick(true, productSerialList, laserHandSerialList, powerSupplySerialList)
                    }
                ) {
                    Text(
                        text = stringResource(R.string.ok),
                        style = RobotoTypography.labelLarge,
                        fontWeight = FontWeight.Normal,
                        fontSize = 14.px.sp,
                        color = Color.Black
                    )
                }
            }

        }
    }
}


@Composable
fun SN_Layer(
    serialList: MutableList<String> = mutableListOf("C","N","2","C","C","2")
) {
    // Prep & Wheel
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(120.px.dp)
            .padding(start = 18.px.dp, end=10.px.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        // LO-3ND
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(60.px.dp),
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "LO-3ND",
                style = RobotoTypography.bodyMedium,
                fontWeight = FontWeight.ExtraLight,
                fontSize = 13.px.sp,
            )
        }

        // -
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(8.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "-",
                style = RobotoTypography.bodyMedium,
                fontSize = 14.px.sp,
            )
        }

        // 제조년도 (1)
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            WheelTextPicker(
                modifier = Modifier.size(30.px.dp, 120.px.dp),
                startIndex =  productYearOrQuantityTenthRangeList.indexOf(serialList[0]).takeIf {it != -1} ?: 0,
                size = DpSize(30.px.dp, 120.px.dp),
                texts = productYearOrQuantityTenthRangeList,
                rowCount = 3,
                style = RobotoTypography.bodyMedium.copy(fontSize = 14.px.sp),
                color = Color.Black,
                selectorProperties = WheelPickerDefaults.selectorProperties(
                    enabled = true,
                    color = Color(222,173,11),
                    width = 1.0f
                ),
                onScrollFinished = { snappedIndex ->
                    Timber.d("snappedIndex: $snappedIndex")

                    serialList[0] = productYearOrQuantityTenthRangeList[snappedIndex]

                    Timber.d("serialList[0]: ${serialList[0]}")
                    return@WheelTextPicker snappedIndex
                }
            )
        }

        // 제조년도 (2)
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            WheelTextPicker(
                modifier = Modifier.size(30.px.dp, 120.px.dp),
                startIndex = productYearOrQuantityOnethRangeList.indexOf(serialList[1]).takeIf {it != -1} ?: 0,
                size = DpSize(30.px.dp, 120.px.dp),
                texts = productYearOrQuantityOnethRangeList,
                rowCount = 3,
                style = RobotoTypography.bodyMedium.copy(fontSize = 14.px.sp),
                color = Color.Black,
                selectorProperties = WheelPickerDefaults.selectorProperties(
                    enabled = true,
                    color = Color(222,173,11),
                    width = 1.0f
                ),
                onScrollFinished = { snappedIndex ->
                    Timber.d("snappedIndex: $snappedIndex")

                    serialList[1] = productYearOrQuantityOnethRangeList[snappedIndex]

                    Timber.d("serialList[1]: ${serialList[1]}")
                    return@WheelTextPicker snappedIndex
                }
            )
        }

        // -
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(8.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "-",
                style = RobotoTypography.bodyMedium,
                fontSize = 14.px.sp,
            )
        }

        // 생산수량 (1)
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            WheelTextPicker(
                modifier = Modifier.size(30.px.dp, 120.px.dp),
                startIndex = productQuantityHundredthRangeList.indexOf(serialList[2]).takeIf {it != -1} ?: 0,
                size = DpSize(30.px.dp, 120.px.dp),
                texts = productQuantityHundredthRangeList,
                rowCount = 3,
                style = RobotoTypography.bodyMedium.copy(fontSize = 14.px.sp),
                color = Color.Black,
                selectorProperties = WheelPickerDefaults.selectorProperties(
                    enabled = true,
                    color = Color(222,173,11),
                    width = 1.0f
                ),
                onScrollFinished = { snappedIndex ->
                    Timber.d("snappedIndex: $snappedIndex")

                    serialList[2] = productQuantityHundredthRangeList[snappedIndex]

                    Timber.d("serialList[2]: ${serialList[2]}")
                    return@WheelTextPicker snappedIndex
                }
            )
        }

        // 생산수량 (2)
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            WheelTextPicker(
                modifier = Modifier.size(30.px.dp, 120.px.dp),
                startIndex = productYearOrQuantityTenthRangeList.indexOf(serialList[3]).takeIf {it != -1} ?: 0,
                size = DpSize(80.px.dp, 120.px.dp),
                texts = productYearOrQuantityTenthRangeList,
                rowCount = 3,
                style = RobotoTypography.bodyMedium.copy(fontSize = 14.px.sp),
                color = Color.Black,
                selectorProperties = WheelPickerDefaults.selectorProperties(
                    enabled = true,
                    color = Color(222,173,11),
                    width = 1.0f
                ),
                onScrollFinished = { snappedIndex ->
                    Timber.d("snappedIndex: $snappedIndex")

                    serialList[3] = productYearOrQuantityTenthRangeList[snappedIndex]

                    Timber.d("serialList[3]: ${serialList[3]}")
                    return@WheelTextPicker snappedIndex
                }
            )
        }

        // 생산수량 (3)
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            WheelTextPicker(
                modifier = Modifier.size(30.px.dp, 120.px.dp),
                startIndex = productYearOrQuantityOnethRangeList.indexOf(serialList[4]).takeIf {it != -1} ?: 0,
                size = DpSize(80.px.dp, 120.px.dp),
                texts = productYearOrQuantityOnethRangeList,
                rowCount = 3,
                style = RobotoTypography.bodyMedium.copy(fontSize = 14.px.sp),
                color = Color.Black,
                selectorProperties = WheelPickerDefaults.selectorProperties(
                    enabled = true,
                    color = Color(222,173,11),
                    width = 1.0f
                ),
                onScrollFinished = { snappedIndex ->
                    Timber.d("snappedIndex: $snappedIndex")

                    serialList[4] = productYearOrQuantityOnethRangeList[snappedIndex]

                    Timber.d("serialList[4]: ${serialList[4]}")
                    return@WheelTextPicker snappedIndex
                }
            )
        }

        // -
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(8.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "-",
                style = RobotoTypography.bodyMedium,
                fontSize = 14.px.sp,
            )
        }

        // 제조월
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .width(30.px.dp)
            , verticalArrangement = Arrangement.Center
            , horizontalAlignment = Alignment.CenterHorizontally
        ) {
            WheelTextPicker(
                modifier = Modifier.size(30.px.dp, 120.px.dp),
                startIndex = productMonthLists.indexOf(serialList[5]).takeIf {it != -1} ?: 0,
                size = DpSize(30.px.dp, 120.px.dp),
                texts = productMonthLists,
                rowCount = 3,
                style = RobotoTypography.bodyMedium.copy(fontSize = 14.px.sp),
                color = Color.Black,
                selectorProperties = WheelPickerDefaults.selectorProperties(
                    enabled = true,
                    color = Color(222,173,11),
                    width = 1.0f
                ),
                onScrollFinished = { snappedIndex ->
                    Timber.d("snappedIndex: $snappedIndex")

                    serialList[5] = productMonthLists[snappedIndex]

                    Timber.d("serialList[5]: ${serialList[5]}")
                    return@WheelTextPicker snappedIndex
                }
            )
        }
    }
}



@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 PreviewSerialNumberView() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        SerialNumberPopup()
    }

}
