package com.example.pencilmuse.views.MainActivity.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.navigation.NavHostController
import com.example.pencilmuse.views.MainActivity.MainViewModel
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight.Companion.W700
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.pencilmuse.views.MainActivity.MainActivity
import com.example.pencilmuse.views.theme.ButtonPurple
import com.example.pencilmuse.views.theme.TextFieldGray

@Composable
fun auth(navHost: NavHostController) {

    val viewModel = MainViewModel()
    val email = remember { mutableStateOf("") }
    val password = remember { mutableStateOf("") }

    Column(        Modifier.padding(top = 30.dp, start = 15.dp, end = 15.dp).fillMaxSize(1f),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Aвторизация",
            fontSize = 32.sp,
        )

        OutlinedTextField(
            
            email.value,
            {email.value = it},
            modifier = Modifier
                .fillMaxWidth(1f)
                .padding(top = 10.dp, start = 27.dp, end = 27.dp)
                .size(50.dp),
            textStyle = TextStyle(fontSize =  14.sp),
            shape = RoundedCornerShape(7.dp),
            placeholder = { Text("Введите email") }
        )



        var passwordVisibility: Boolean by remember { mutableStateOf(false) }

        OutlinedTextField(

            password.value,
            {password.value = it},
            modifier = Modifier
                .fillMaxWidth(1f)
                .padding(top = 10.dp, start = 27.dp, end = 27.dp)
                .size(50.dp),
            textStyle = TextStyle(fontSize =  14.sp),
            shape = RoundedCornerShape(7.dp),
            visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
            placeholder = { Text("Введите пароль") }
        )




        Button(onClick = {
            viewModel.onSignInEmailPassword(emailUser = email.value, passwordUser = password.value)
            if(password.value.isNotEmpty() && email.value.isNotEmpty()) {
                navHost.navigate("MainPage")

            }

        },
            shape = RoundedCornerShape(10.dp),
            colors = ButtonDefaults.buttonColors(ButtonPurple),
            modifier = Modifier
                .padding(top = 20.dp, start=27.dp,end=27.dp)
                .fillMaxWidth(1f)
                .size(50.dp)){
            Text("Войти", fontSize = 20.sp)
        }

    }
}


