// TempConv5 Example
// Source Code File: MainActivity.kt
// Enter Celsius temperature into TextField element
// and click button to convert to Fahrenheit

package it372.ssmith.tempconv6
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MainActivityContent()
        }
    }

    @Composable
    fun PreviewMainActivity() {
        MainActivityContent()
    }

    @Preview(showBackground = true)
    @Composable
    fun MainActivityContent() {

        // Save Celsius values so they can be used by the
        // button and the temperature text.
        val celsius = remember { mutableStateOf(0) }
        val newCelsius = remember { mutableStateOf("") }

        Column(
            modifier = Modifier.padding(25.dp).fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
            ) {

            // ImageHeader displaying an ocean sunset
            ImageHeader(
                R.drawable.sunset,
                "Ocean Sunset"
            )

            // Textfield for entering Celsius value.
            EnterTemperature(newCelsius.value) {
                newCelsius.value = it
            }

            // Temperature is converted to Fahrenheit
            // when button is clicked.
            ConvertButton {
                // Anonymous event listener
                // for convert button
                newCelsius.value.toIntOrNull()?.let {
                    celsius.value = it
                }
            }

            // Display Celsius and Fahrenheit values.
            TemperatureText(celsius.value)
        }
    }

    @Composable
    fun ImageHeader(image: Int, description: String) {
        Image(
            painter = painterResource(image),
            contentDescription = description,
            modifier = Modifier.height(180.dp).fillMaxWidth(),
            contentScale = ContentScale.Crop
        )
    }

    @Composable
    fun EnterTemperature(
        temperature: String,
        changed: (String) -> Unit
    ) {
        TextField(
            value = temperature,
            label = { Text("Enter a temperature in Celsius") },
            onValueChange = changed,
            modifier = Modifier.fillMaxWidth()
        )
    }

    @Composable
    fun ConvertButton(clicked: () -> Unit) {
        Button(onClick = clicked) {
            Text("Convert")
        }
    }

    @Composable
    fun TemperatureText(celsius: Int) {
        val fahrenheit = (celsius * 9) / 5 + 32
        Text("$celsius Celsius = $fahrenheit Fahrenheit")
    }
}