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

import android.content.SharedPreferences
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
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.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.core.content.edit
import com.ys.bdtp.adm.R
import com.ys.bdtp.adm.app.Token
import com.ys.bdtp.adm.app.theme.blueColor
import com.ys.bdtp.adm.app.theme.grayColor
import com.ys.bdtp.adm.app.theme.textBlackColor
import com.ys.bdtp.adm.mvvm.model.vo.request.Login
import com.ys.bdtp.adm.mvvm.vm.login.LoginViewModel
import kotlinx.coroutines.launch
import org.kodein.di.compose.rememberInstance
import org.kodein.di.compose.rememberViewModel

@Composable
fun LoginContent() {
    val vm by rememberViewModel<LoginViewModel>()
    val sp by rememberInstance<SharedPreferences>()

    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)) }

    val snackbarHostState by remember { mutableStateOf(SnackbarHostState()) }
    val scope = rememberCoroutineScope()

    Column(
        modifier = Modifier.fillMaxSize()
            .padding(start = 56.dp, end = 96.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Column(modifier = Modifier.wrapContentHeight()) {
            Text(text = "登录", fontSize = 30.sp, color = textBlackColor)

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

            OutlinedTextField(
                value = username,
                modifier = Modifier.fillMaxWidth().onFocusChanged { focusState: FocusState ->
                    usernameLeadingIconColor = if (focusState.isFocused)
                        blueColor
                    else
                        grayColor
                },
                onValueChange = {
                    username = it
                    isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
                },
                label = {
                    Text(text = "请输入账号")
                },
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    textColor = textBlackColor,
                    cursorColor = blueColor,
                    focusedBorderColor = blueColor,
                    unfocusedBorderColor = grayColor,
                    focusedLabelColor = blueColor,
                    unfocusedLabelColor = grayColor,
                    backgroundColor = Color.Transparent
                ),
                leadingIcon = {
                    Icon(
                        painter = painterResource(R.drawable.login_user),
                        contentDescription = "",
                        tint = usernameLeadingIconColor
                    )
                },
                trailingIcon = {
                    if (username.isNotBlank()) {
                        IconButton(
                            onClick = {
                                username = ""
                                isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
                            },
                            enabled = username.isNotEmpty(),
                        ) {
                            Icon(
                                painter = painterResource(R.drawable.login_delete),
                                contentDescription = "",
                                modifier = Modifier.size(16.dp),
                                tint = grayColor
                            )
                        }
                    }
                },
                shape = RoundedCornerShape(4.dp)
            )

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

            OutlinedTextField(
                value = password,
                modifier = Modifier.fillMaxWidth()
                    .onFocusChanged { focusState ->
                        passwordLeadingIconColor = if (focusState.isFocused)
                            blueColor
                        else
                            grayColor
                    },
                onValueChange = {
                    password = it
                    isLoginBtnEnable = username.isNotEmpty() && password.isNotEmpty()
                },
                label = { Text(text = "请输入密码") },
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    textColor = textBlackColor,
                    cursorColor = blueColor,
                    focusedBorderColor = blueColor,
                    unfocusedBorderColor = grayColor,
                    focusedLabelColor = blueColor,
                    unfocusedLabelColor = grayColor,
                    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 = grayColor
                                )
                            }

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

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

        Button(
            onClick = {
                vm.login(
                    login = Login(
                        phone = username,
                        passWord = password,
                    ),
                    success = { token ->
                        sp.edit {
                            putString(Token, token)
                        }
                    },
                    failure = { message ->
                        scope.launch {
                            snackbarHostState
                                .showSnackbar(message = message)
                        }
                        println("failure::::$message")
                    }
                )
            },
            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
            )
        }

        Spacer(modifier = Modifier.fillMaxWidth().height(24.dp))

        SnackbarHost(
            hostState = snackbarHostState
        ) { data ->
            Snackbar(
                snackbarData = data,
                shape = RoundedCornerShape(8.dp),
                elevation = 0.dp
            )
        }
    }
}

@Preview
@Composable
fun PreviewLoginContent() {
    LoginContent()
}
