package com.ys.bdtp.adm.mvvm.ui.screen.login

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.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.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.TextFieldDefaults
import androidx.compose.runtime.Composable
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.Modifier
import androidx.compose.ui.focus.FocusState
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
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 com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.insets.statusBarsHeight
import com.ys.bdtp.adm.R

@Composable
fun LoginScreen() {
    // val vm by rememberViewModel<LoginViewModel>()
    val insets = LocalWindowInsets.current
    println("insets: ${insets.statusBars.layoutInsets.left}")
    println("insets: ${insets.statusBars.layoutInsets.bottom}")
    val imeBottom = with(LocalDensity.current) { insets.ime.bottom.toDp() }
    println("insets: $imeBottom")

    var isShowPassword by remember { mutableStateOf(false) }
    var isLoginBtnEnable by remember { mutableStateOf(false) }

    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    var visualState: VisualTransformation by remember { mutableStateOf(PasswordVisualTransformation()) }

    var usernameLeadingIconColor by remember { mutableStateOf(Color(0xFFC3C7CB)) }
    var passwordLeadingIconColor by remember { mutableStateOf(Color(0xFFC3C7CB)) }

    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)

    ) {
        ConstraintLayout(modifier = Modifier.weight(3.0f).fillMaxHeight()) {
            val (statusBar, logo, background, title) = createRefs()

            Image(
                painter = painterResource(R.drawable.login_background),
                contentDescription = "",
                modifier = Modifier.fillMaxSize().constrainAs(background) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
                contentScale = ContentScale.Crop
            )

            Spacer(Modifier.statusBarsHeight().fillMaxWidth().constrainAs(statusBar) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            })

            Image(
                painter = painterResource(R.drawable.logo),
                contentDescription = "",
                modifier = Modifier.size(112.dp, 48.dp).constrainAs(logo) {
                    top.linkTo(statusBar.bottom, margin = 12.dp)
                    start.linkTo(parent.start, margin = 32.dp)
                }
            )
            val guideline = createGuidelineFromBottom(0.1f)
            Column(modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top, margin = 32.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
                bottom.linkTo(guideline)
            }) {
                Text(text = "Yushu", fontSize = 36.sp, color = Color(0XFF1F2429))
                Text("智慧建筑运维平台", fontSize = 48.sp, color = Color(0XFF1F2429))
                Text("为您提供什么服务，能够用一句话概括出来吧。", fontSize = 16.sp, color = Color(0XFF8D9399))
            }
        }
        Column(
            modifier = Modifier.weight(2.0f)
                .fillMaxHeight()
                .padding(start = 56.dp, end = 96.dp),
            verticalArrangement = Arrangement.Center
        ) {
            Column(modifier = Modifier.wrapContentHeight()) {
                Text(text = "登录", fontSize = 30.sp, color = Color(0XFF1F2429))
                Spacer(modifier = Modifier.height(32.dp))

                OutlinedTextField(
                    value = username,
                    modifier = Modifier.fillMaxWidth().onFocusChanged { focusState: FocusState ->
                        if (focusState.isFocused)
                            usernameLeadingIconColor = Color(0xFF0091FF)
                        else
                            usernameLeadingIconColor = Color(0xFFC3C7CB)
                    },
                    onValueChange = {
                        username = it
                        isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()

                    },
                    label = {
                        Text(text = "请输入账号")
                    },
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        textColor = Color(0xFF1F2429),
                        cursorColor = Color(0xFF0091FF),
                        focusedBorderColor = Color(0xFF0091FF),
                        unfocusedBorderColor = Color(0xFFC3C7CB),
                        focusedLabelColor = Color(0xFF0091FF),
                        unfocusedLabelColor = Color(0xFFC3C7CB),
                        backgroundColor = Color.Transparent
                    ),
                    leadingIcon = {
                        Icon(
                            painter = painterResource(R.drawable.login_user),
                            contentDescription = "",
                            tint = usernameLeadingIconColor
                        )
                    },
                    trailingIcon = {
                        if (username.isNotBlank()) {
                            IconButton(
                                onClick = { username = "" },
                                enabled = username.isNotEmpty()
                            ) {

                                Icon(
                                    painter = painterResource(R.drawable.login_delete),
                                    contentDescription = "",
                                    modifier = Modifier.size(16.dp),
                                    tint = Color(0xFFC3C6CB)
                                )
                            }
                        }
                    },
                    shape = RoundedCornerShape(4.dp)
                )

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

                OutlinedTextField(
                    value = password,
                    modifier = Modifier.fillMaxWidth()
                        .onFocusChanged { focusState ->
                            if (focusState.isFocused)
                                passwordLeadingIconColor = Color(0xFF0091FF)
                            else
                                passwordLeadingIconColor = Color(0xFFC3C7CB)
                        },
                    onValueChange = {
                        password = it
                        isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
                    },
                    label = { Text(text = "请输入密码") },
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        textColor = Color(0xFF1F2429),
                        cursorColor = Color(0xFF0091FF),
                        focusedBorderColor = Color(0xFF0091FF),
                        unfocusedBorderColor = Color(0xFFC3C7CB),
                        focusedLabelColor = Color(0xFF0091FF),
                        unfocusedLabelColor = Color(0xFFC3C7CB),
                        backgroundColor = Color.Transparent
                    ),
                    visualTransformation = visualState,
                    leadingIcon = {
                        Icon(
                            painter = painterResource(R.drawable.login_lock),
                            contentDescription = "",
                            tint = passwordLeadingIconColor
                        )
                    },
                    trailingIcon = {
                        Row(
                            horizontalArrangement = Arrangement.End,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            if (password.isNotBlank()) {
                                IconButton(
                                    onClick = { isShowPassword = !isShowPassword }
                                ) {
                                    val icon =
                                        if (isShowPassword) R.drawable.login_eye_open else R.drawable.login_eye_close
                                    visualState =
                                        if (isShowPassword) VisualTransformation.None else PasswordVisualTransformation()
                                    val description = if (isShowPassword) "Show password" else "Hide password"
                                    Icon(
                                        painter = painterResource(icon),
                                        contentDescription = description,
                                        modifier = Modifier.size(18.dp).padding(0.dp),
                                        tint = Color(0xFFC3C6CB)
                                    )
                                }

                                IconButton(
                                    onClick = {
                                        password = ""
                                        isShowPassword = false
                                    },
                                    enabled = password.isNotEmpty()
                                ) {
                                    Icon(
                                        painter = painterResource(R.drawable.login_delete),
                                        contentDescription = "",
                                        modifier = Modifier.size(18.dp),
                                        tint = Color(0xFFC3C6CB)
                                    )
                                }
                            }
                        }
                    }
                )
            }

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

            Button(
                onClick = {
                    // TODO
                    // 处理完后清空数据
                    isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
                    // TODO
                    // 返回登录结果进行处理
                },
                enabled = isLoginBtnEnable,
                modifier = Modifier.fillMaxWidth().height(48.dp),
                shape = RoundedCornerShape(4),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = Color(0xFF0091FF),
                    disabledBackgroundColor = Color(0xFFEFF0F1)
                )
            ) {
                Text(
                    text = "立即登录",
                    color = if (isLoginBtnEnable) Color(0xFFFFFFFF) else Color(0XFFC3C7CB),
                    fontSize = 16.sp
                )
            }
        }
    }
}

@Preview(widthDp = 1280, heightDp = 800)
@Composable
fun PreviewLoginScreen() {
    LoginScreen()
}