package com.aiosman.riderpro.ui.account

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
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.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewModelScope
import com.aiosman.riderpro.AppColors
import com.aiosman.riderpro.LocalNavController
import com.aiosman.riderpro.R
import com.aiosman.riderpro.ui.NavigationRoute
import com.aiosman.riderpro.ui.comment.NoticeScreenHeader
import com.aiosman.riderpro.ui.composables.CustomAsyncImage
import com.aiosman.riderpro.ui.composables.StatusBarSpacer
import com.aiosman.riderpro.ui.composables.form.FormTextInput
import com.aiosman.riderpro.ui.modifiers.noRippleClickable
import kotlinx.coroutines.launch

/**
 * 编辑用户资料界面
 */
@Composable
fun AccountEditScreen2() {
    val model = AccountEditViewModel
    val navController = LocalNavController.current
    val context = LocalContext.current
    var usernameError by remember { mutableStateOf<String?>(null) }
    var bioError by remember { mutableStateOf<String?>(null) }
    fun onNicknameChange(value: String) {
        model.name = value
        usernameError = when {
            value.isEmpty() -> "昵称不能为空"
            value.length < 3 -> "昵称长度不能小于3"
            value.length > 20 -> "昵称长度不能大于20"
            else -> null
        }
    }

    fun onBioChange(value: String) {
        model.bio = value
        bioError = when {
            value.length > 100 -> "个人简介长度不能大于24"
            else -> null
        }
    }

    fun validate(): Boolean {
        return usernameError == null && bioError == null
    }

    LaunchedEffect(Unit) {
        if (model.profile == null){
            model.reloadProfile()
        }

    }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        StatusBarSpacer()
        Box(
            modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
        ) {
            NoticeScreenHeader(
                title = stringResource(R.string.edit_profile),
                moreIcon = false
            ) {

                Icon(
                    modifier = Modifier
                        .size(24.dp)
                        .noRippleClickable {
                            model.viewModelScope.launch {
                                model.updateUserProfile(context)
                                navController.popBackStack()
                            }
                        },
                    imageVector = Icons.Default.Check,
                    contentDescription = "保存",
                    tint = if (validate()) Color.Black else Color.Gray
                )
            }
        }
        Spacer(modifier = Modifier.height(44.dp))
        model.profile?.let {
            Box(
                modifier = Modifier.size(88.dp),
                contentAlignment = Alignment.Center
            ) {
                CustomAsyncImage(
                    context,
                    model.croppedBitmap ?: it.avatar,
                    modifier = Modifier
                        .size(88.dp)
                        .clip(
                            RoundedCornerShape(88.dp)
                        ),
                    contentDescription = "",
                    contentScale = ContentScale.Crop
                )
                Box(
                    modifier = Modifier
                        .size(32.dp)
                        .clip(CircleShape)
                        .background(AppColors.mainColor)
                        .align(Alignment.BottomEnd)
                        .noRippleClickable {
                            navController.navigate(NavigationRoute.ImageCrop.route)
                        },
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        Icons.Default.Add,
                        contentDescription = "Add",
                        tint = Color.White,
                    )
                }

            }
            Spacer(modifier = Modifier.height(58.dp))
            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(horizontal = 16.dp)
            ) {
                FormTextInput(
                    value = model.name,
                    label = stringResource(R.string.nickname),
                    hint = "Input nickname",
                    modifier = Modifier.fillMaxWidth(),
                    error = usernameError
                ) { value ->
                    onNicknameChange(value)
                }
//                Spacer(modifier = Modifier.height(16.dp))
                FormTextInput(
                    value = model.bio,
                    label = stringResource(R.string.bio),
                    hint = "Input bio",
                    modifier = Modifier.fillMaxWidth(),
                    error = bioError
                ) { value ->
                    onBioChange(value)
                }
            }
        }

    }


}