package llc.arma.ble.app.ui.screen.inspection.thermometer.view

import androidx.compose.animation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.KeyboardArrowDown
import androidx.compose.material.icons.rounded.KeyboardArrowUp
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import llc.arma.ble.app.ui.model.BleView
import llc.arma.ble.app.ui.screen.inspection.thermometer.ThermometerContract

@Composable
fun IntervalEdit(
    state: BleView.Thermometer,
    onEvent: (ThermometerContract.Event) -> Unit,
){

    var value by remember(state.thermometerState.historyInterval) {
        mutableStateOf((state.thermometerState.historyInterval / 1000 / 60 / 60).toInt())
    }

    val maxInterval = 240

    if(value > maxInterval){
        value = maxInterval
    }

    if(value < 1){
        value = 1
    }

    val maxHours = maxInterval
    val maxDays = maxInterval / 24

    val dayValue = value / 24
    val hourValue = value - (24 * dayValue)

    Column(
        modifier = Modifier
    ) {

        Text(
            modifier = Modifier.padding(horizontal = 12.dp),
            text = "Интервал измерений",
            style = MaterialTheme.typography.titleLarge
        )

        Spacer(modifier = Modifier.height(16.dp))


        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {

            NumberPicker(
                range = -1..maxDays,
                value = dayValue,
                onValueChanged = { value = (it * 24) + hourValue }
            )

            Spacer(modifier = Modifier.width(8.dp))

            Text(text = "Дни")

            Spacer(modifier = Modifier.width(16.dp))

            NumberPicker(
                range = -1..maxHours,
                value = hourValue,
                onValueChanged = {
                    value = it + (dayValue * 24)
                }
            )

            Spacer(modifier = Modifier.width(8.dp))

            Text(text = "Часы")

        }

        Spacer(modifier = Modifier.height(16.dp))

        Surface(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                .height(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colorScheme.primaryContainer,
            onClick = {
                onEvent(
                    ThermometerContract.Event.OnSaveIntervalChanged(
                        value.toLong() * 1000 * 60 * 60
                    )
                )
            }
        ) {

            Box(modifier = Modifier.fillMaxSize()) {

                Text(
                    modifier = Modifier.align(Alignment.Center),
                    color = MaterialTheme.colorScheme.background,
                    style = MaterialTheme.typography.labelLarge,
                    text = "Применить"
                )

            }

        }

    }

}

@Composable
fun NumberPicker(
    modifier: Modifier = Modifier,
    range: IntRange,
    value: Int,
    onValueChanged: (Int) -> Unit
) {

    LaunchedEffect(range){

        if(value > range.last){

            onValueChanged(range.last)

        }

        if(value < range.first){

            onValueChanged(range.first)

        }

    }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
    ){

        FilledIconButton(
            onClick = {
                if(value < range.last) onValueChanged(value + 1)
            }
        ) {
            Icon(
                imageVector = Icons.Rounded.KeyboardArrowUp,
                contentDescription = null
            )
        }

        Spacer(modifier = Modifier.height(36.dp))

        AnimatedContent(
            targetState = value,
            transitionSpec = {
                if (targetState > initialState) {
                    (slideInVertically { height -> height } + fadeIn()).togetherWith(
                        slideOutVertically { height -> -height } + fadeOut())
                } else {
                    (slideInVertically { height -> -height } + fadeIn()).togetherWith(
                        slideOutVertically { height -> height } + fadeOut())
                }.using(
                    SizeTransform(clip = false)
                )
            }
        ) { targetCount ->
            Text(
                style = MaterialTheme.typography.displaySmall,
                text = "$targetCount"
            )
        }

        Spacer(modifier = Modifier.height(36.dp))

        FilledIconButton(
            onClick = {
                if(value > range.first) onValueChanged(value - 1)

            }
        ) {
            Icon(
                imageVector = Icons.Rounded.KeyboardArrowDown,
                contentDescription = null
            )
        }

    }


}