package com.example.wabi.view.components.textFields

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import com.example.wabi.R
import com.example.wabi.ui.theme.WabiTheme
import com.example.wabi.view.components.texts.AccentText

//поле ввода для пароля
@Composable
fun PasswordTextField(
    value: String,
    input: (String) -> Unit,
    lable: String = "",
    placeholder: String = "",
) {
    val visible = remember {
        mutableStateOf(false)
    }
    AccentText(
        text = lable, isUnderline = true, modifier = Modifier.padding(50.dp, 0.dp, 0.dp, 5.dp)
    )
    OutlinedTextField(value = value, onValueChange = { input(it) }, placeholder = {
        if (visible.value) {
            Text(
                text = placeholder,
                color = WabiTheme.colors.translucentColor,
                style = WabiTheme.fonts.forTextField,
            )
        } else {
            Text(
                text = "*************",
                color = WabiTheme.colors.translucentColor,
                style = WabiTheme.fonts.forTextField
            )
        }
    }, singleLine = true, shape = RoundedCornerShape(
        40.dp
    ), modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(30.dp, 0.dp)
        .border(
            width = 2.dp, color = WabiTheme.colors.mainColor, shape = RoundedCornerShape(
                40.dp
            )
        ), textStyle = WabiTheme.fonts.forTextField, colors = TextFieldDefaults.colors(
        unfocusedContainerColor = WabiTheme.colors.backgroundColor,
        focusedContainerColor = WabiTheme.colors.backgroundColor,
        unfocusedTextColor = WabiTheme.colors.mainColor,
        focusedTextColor = WabiTheme.colors.mainColor,
        cursorColor = WabiTheme.colors.mainColor
    ), trailingIcon = {
        IconButton(
            onClick = { visible.value = !visible.value },
        ) {
            if (visible.value) {
                Icon(
                    imageVector = ImageVector.vectorResource(
                        R.drawable.eye_vector
                    ),
                    contentDescription = "open",
                    tint = WabiTheme.colors.mainColor,
                    modifier = Modifier.size(30.dp)
                )
            } else {
                Icon(
                    imageVector = ImageVector.vectorResource(
                        R.drawable.eye_close_vector
                    ),
                    contentDescription = "open",
                    tint = WabiTheme.colors.mainColor,
                    modifier = Modifier.size(30.dp)
                )
            }
        }
        Spacer(modifier = Modifier.width(60.dp))
    }, visualTransformation = if (visible.value) {
        VisualTransformation.None
    } else {
        PasswordVisualTransformation()
    }
    )
}