package dev.lonami.talaria

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import dev.lonami.talaria.ui.theme.TalariaTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TalariaTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Login()
                }
            }
        }
    }
}

fun isPhoneValid(phone: String): Boolean {
    return phone.trim('+', ' ').isNotEmpty()
}

@Composable
fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) {
    Text(stringResource(R.string.enter_phone))
    TextField(
        phone,
        label = { Text(stringResource(R.string.phone_international)) },
        placeholder = { Text(stringResource(R.string.phone_example)) },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone,
            imeAction = ImeAction.Done
        ),
        modifier = Modifier.fillMaxWidth(),
        onValueChange = onPhoneChanged
    )
    Spacer(Modifier.height(16.dp))
    Button(enabled = isPhoneValid(phone), modifier = Modifier.fillMaxWidth(), onClick = {

    }) {
        Text(stringResource(R.string.send_otp))
    }
}

@Composable
fun Login() {
    var phone by remember { mutableStateOf("") }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            stringResource(R.string.welcome_to, stringResource(R.string.app_name)),
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.CenterHorizontally)
                .padding(16.dp)
        )
        PhoneInput(phone, onPhoneChanged = { phone = it })
    }
}

@Preview(showBackground = true)
@Composable
fun LoginPreview() {
    TalariaTheme {
        Login()
    }
}