// Proj4Ex2 Example
// Source code file: MainActivity.kt
// Enter, display, and clear grocery items.
// A grocery item is stored like this:
// Bananas;35456;2.75

package it372.ssmith.proj4ex2
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

@Composable
fun MainLayout( ) {

    // State variables for TextField elements
    var desc = remember { mutableStateOf("") }
    var code = remember { mutableStateOf("") }
    var price = remember { mutableStateOf("") }

    // State variable for Text element
    var groceries = remember { mutableStateOf("") }

    // Groceries MutableList collection
    var groceryList = remember { mutableStateListOf<String> ( )}

    // Scroll state
    var scrollState = rememberScrollState( )

    Column(modifier = Modifier
        .padding(25.dp)
        .verticalScroll(scrollState)) {
        TextField(
            value = desc.value,
            label = { Text("Enter Description:") },
            onValueChange = {
                desc.value = it
            },
            modifier = Modifier
                .padding(
                    bottom = 20.dp, top = 20.dp,
                    start = 20.dp, end = 20.dp
                )
                .size(width = 200.dp, height = 65.dp)
                .fillMaxWidth(),
            textStyle = TextStyle.Default.copy(fontSize = 20.sp)
        )

        TextField(
            value = code.value,
            label = { Text("Enter Code:") },
            onValueChange = {
                code.value = it
            },
            modifier = Modifier
                .padding(
                    bottom = 20.dp, top = 20.dp,
                    start = 20.dp, end = 20.dp
                )
                .size(width = 200.dp, height = 65.dp)
                .fillMaxWidth(),
            textStyle = TextStyle.Default.copy(fontSize = 20.sp)
        )

        TextField(
            value = price.value,
            label = { Text("Enter Price:") },
            onValueChange = {
                price.value = it
            },
            modifier = Modifier
                .padding(
                    bottom = 20.dp, top = 20.dp,
                    start = 20.dp, end = 20.dp
                )
                .size(width = 200.dp, height = 65.dp)
                .fillMaxWidth(),
            textStyle = TextStyle.Default.copy(fontSize = 20.sp)
        )

        // Button with caption Enter Item
        Button(onClick = {
            var item = "${desc.value};${code.value};${price.value}"
            groceryList.add(item)
        }) {
            Text(text = "Enter Item", fontSize = 20.sp)
        }

        // Button with caption Show Groceries
        Button(onClick = {
            var display = ""
            for(item in groceryList) {
                val itemArray = item.split(";")
                val d = itemArray[0]
                val c = itemArray[1]
                val p = itemArray[2]
                display += "Description: $d\n" +
                    "Code: $c\n" +
                    "Price: $p\n\n"
            }
            groceries.value = display
        }) {
            Text(text = "Show Groceries", fontSize = 20.sp)
        }

        // Button with Caption Clear List
        Button(onClick = {
            groceryList.clear( )
        }) {
            Text(text = "Clear List", fontSize = 20.sp)
        }

        // Text element displays list of groceries.
        Text(text = groceries.value,
            modifier = Modifier
                .padding(bottom = 50.dp, top = 50.dp,
                    start = 20.dp,  end = 20.dp)
                .background(Color(0xFFE0E0FF))
                .fillMaxWidth( ),
            fontSize = 25.sp,
            textAlign = TextAlign.Start
        )
    }
}

@Preview(showBackground = true)
@Composable
fun MainLayoutPreview() {
    MainLayout( )
}