UserProfileScreen.kt

package com.example.multimodal

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.Person
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

/**
 * Composable function to create a user profile screen.
 *
 * This screen displays a user's profile picture, name, job title, and other details.
 * It also includes an "Edit Profile" button and a top app bar with navigation icons.
 *
 * Material Design 3 is used for styling and theming.
 *
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun UserProfileScreen(widthSizeClass: WindowWidthSizeClass) {
    Scaffold(
        //Top bar of the screen
        topBar = {
            TopAppBar(
                title = { },
                navigationIcon = {
                    IconButton(onClick = { /*TODO: Navigate back*/ }) {
                        Icon(
                            imageVector = Icons.Outlined.Person,
                            contentDescription = "Navigate back"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /*TODO: Open more menu*/ }) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert,
                            contentDescription = "More menu"
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.background
                )
            )
        },
        modifier = Modifier.fillMaxSize()
    ) { innerPadding ->
        Surface(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
                    .verticalScroll(rememberScrollState()), // Enable vertical scrolling
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                // Profile Image
                Image(
                    painter = painterResource(id = R.drawable.profile_picture),
                    contentDescription = "Profile picture of Ali Connors",
                    modifier = Modifier
                        .size(200.dp)
                        .clip(CircleShape),
                    contentScale = ContentScale.Crop
                )

                Spacer(modifier = Modifier.height(16.dp))

                // User Details
                Text(
                    text = "Ali Connors",
                    style = MaterialTheme.typography.headlineLarge,
                    fontWeight = FontWeight.Bold
                )
                Text(
                    text = "Senior Android Dev at Yearin",
                    style = MaterialTheme.typography.bodyMedium
                )
                Text(text = "Google Developer Expert", style = MaterialTheme.typography.bodyMedium)

                Spacer(modifier = Modifier.height(24.dp))

                // Divider
                Divider(modifier = Modifier.fillMaxWidth())

                Spacer(modifier = Modifier.height(16.dp))

                // Display Name
                ProfileDetailRow(label = "Display name", value = "aliconors")

                Spacer(modifier = Modifier.height(16.dp))

                // Status
                ProfileDetailRow(label = "Status", value = "Online")

                Spacer(modifier = Modifier.height(16.dp))

                // Twitter
                ProfileDetailRow(label = "Twitter", value = "twitter.com/aliconors")

                Spacer(modifier = Modifier.height(16.dp))

                // Timezone
                ProfileDetailRow(label = "Timezone", value = "In your timezone")

                Spacer(modifier = Modifier.weight(1f)) // Push the button to the bottom

                // Edit Profile Button
                Button(
                    onClick = { /*TODO: Navigate to edit profile*/ },
                    modifier = Modifier
                        .then(if (widthSizeClass == WindowWidthSizeClass.Expanded) {
                            Modifier.widthIn(max = 300.dp) // Limit the maximum width
                        } else {
                            Modifier.fillMaxWidth()
                        }),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = MaterialTheme.colorScheme.surfaceVariant
                    ),
                    shape = RoundedCornerShape(10.dp),
                    contentPadding = PaddingValues(16.dp)
                ) {
                    Icon(
                        imageVector = Icons.Filled.Edit,
                        contentDescription = "Edit Profile",
                        tint = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                    Spacer(modifier = Modifier.width(8.dp))
                    Text(text = "Edit Profile", color = MaterialTheme.colorScheme.onSurfaceVariant)
                }
            }
        }
    }
}

/**
 * Composable function to display a single row of profile detail.
 *
 * This function is used to display a label and a corresponding value in a row format.
 * It's used for details like "Display name", "Status", etc.
 *
 * @param label The label text (e.g., "Display name").
 * @param value The value text (e.g., "aliconors").
 */
@Composable
fun ProfileDetailRow(label: String, value: String) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(text = label, style = MaterialTheme.typography.bodyMedium)
        Text(text = value, style = MaterialTheme.typography.bodyLarge, fontWeight = FontWeight.Bold)
    }
}

/**
 * Preview function to display UserProfileScreen in the IDE.
 */
@Preview(showBackground = true, device = "spec:width=411dp,height=891dp")
@Composable
fun UserProfileScreenPhonePreview() {
    //Example image
    MaterialTheme {
        UserProfileScreen(WindowWidthSizeClass.Compact)
    }
}

@Preview(showBackground = true, device = "spec:width=1280dp,height=800dp,dpi=240")
@Composable
fun UserProfileScreenTabletPreview() {
    //Example image
    MaterialTheme {
        UserProfileScreen(WindowWidthSizeClass.Expanded)
    }
}