package com.aiosman.riderpro.ui.index.tabs.profile

import android.app.Activity
import android.content.Intent
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.contract.ActivityResultContracts
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.paging.compose.collectAsLazyPagingItems
import com.aiosman.riderpro.AppState
import com.aiosman.riderpro.LocalNavController
import com.aiosman.riderpro.R
import com.aiosman.riderpro.entity.AccountProfileEntity
import com.aiosman.riderpro.entity.MomentEntity
import com.aiosman.riderpro.exp.formatPostTime2
import com.aiosman.riderpro.ui.NavigationRoute
import com.aiosman.riderpro.ui.composables.CustomAsyncImage
import com.aiosman.riderpro.ui.composables.MenuItem
import com.aiosman.riderpro.ui.modifiers.noRippleClickable
import com.aiosman.riderpro.ui.post.PostViewModel
import kotlinx.coroutines.launch


@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ProfilePage() {
    val model = MyProfileViewModel
    var expanded by remember { mutableStateOf(false) }
    LaunchedEffect(Unit) {
        model.loadProfile()
    }
    val moments = model.momentsFlow.collectAsLazyPagingItems()
    val navController: NavController = LocalNavController.current
    val scope = rememberCoroutineScope()
    val state = rememberPullRefreshState(model.refreshing, onRefresh = {
        model.loadProfile(pullRefresh = true)
    })
    val context = LocalContext.current
    val statusBarPaddingValues = WindowInsets.systemBars.asPaddingValues()
    val pickBannerImageLauncher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.StartActivityForResult()
    ) { result ->
        if (result.resultCode == Activity.RESULT_OK) {
            val uri = result.data?.data
            uri?.let {
                model.updateUserProfileBanner(it, context = context)
            }
        }
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF5F5F5))
            .padding(bottom = with(LocalDensity.current) {
                val da = WindowInsets.navigationBars
                    .getBottom(this)
                    .toDp() + 48.dp
                da
            })
            .pullRefresh(state)
    ) {

        LazyColumn(
            modifier = Modifier.fillMaxSize()
        ) {
            item {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()

                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(400.dp)
                            .noRippleClickable {
                                Intent(Intent.ACTION_PICK).apply {
                                    type = "image/*"
                                    pickBannerImageLauncher.launch(this)
                                }
                            }
                    ) {
                        val banner = model.profile?.banner

                        if (banner != null) {
                            CustomAsyncImage(
                                LocalContext.current,
                                banner,
                                modifier = Modifier
                                    .fillMaxSize(),
                                contentDescription = "",
                                contentScale = ContentScale.Crop
                            )
                        } else {
                            Image(
                                painter = painterResource(id = R.drawable.rider_pro_moment_demo_2),
                                modifier = Modifier
                                    .fillMaxSize(),
                                contentDescription = "",
                                contentScale = ContentScale.Crop
                            )
                        }
                    }
                    Box(
                        modifier = Modifier
                            .align(Alignment.TopEnd)
                            .padding(
                                top = statusBarPaddingValues.calculateTopPadding(),
                                start = 8.dp,
                                end = 8.dp
                            )
                    ) {
                        Box(
                            modifier = Modifier
                                .padding(16.dp)
                                .clip(RoundedCornerShape(8.dp))
                                .shadow(
                                    elevation = 20.dp
                                )
                                .background(Color.White.copy(alpha = 0.7f))
                        ) {
                            Icon(
                                painter = painterResource(id = R.drawable.rider_pro_more_horizon),
                                contentDescription = "",
                                modifier = Modifier.noRippleClickable {
                                    expanded = true
                                },
                                tint = Color.Black
                            )
                        }

                        com.aiosman.riderpro.ui.composables.DropdownMenu(
                            expanded = expanded,
                            onDismissRequest = { expanded = false },
                            width = 250,
                            menuItems = listOf(
                                MenuItem(
                                    stringResource(R.string.logout),
                                    R.mipmap.rider_pro_logout
                                ) {
                                    expanded = false
                                    scope.launch {
                                        model.logout()
                                        navController.navigate(NavigationRoute.Login.route) {
                                            popUpTo(NavigationRoute.Index.route) {
                                                inclusive = true
                                            }
                                        }
                                    }
                                },
                                MenuItem(
                                    stringResource(R.string.change_password),
                                    R.mipmap.rider_pro_change_password
                                ) {
                                    expanded = false
                                    scope.launch {
                                        navController.navigate(NavigationRoute.ChangePasswordScreen.route)
                                    }
                                },
                                MenuItem(
                                    stringResource(R.string.favourites),
                                    R.drawable.rider_pro_favourite
                                ) {
                                    expanded = false
                                    scope.launch {
                                        navController.navigate(NavigationRoute.FavouriteList.route)
                                    }
                                }
                            ),

                            )
                    }
                }
                Spacer(modifier = Modifier.height(32.dp))
                model.profile?.let {
                    UserInformation(
                        accountProfileEntity = it,
                        onEditProfileClick = {
                            navController.navigate(NavigationRoute.AccountEdit.route)
                        }
                    )
                }
                if (moments.itemCount == 0) {
                    EmptyMomentPostUnit()
                }
            }

            items(moments.itemCount) { idx ->
                val momentItem = moments[idx] ?: return@items
                MomentPostUnit(momentItem)
            }
            item {
                Spacer(modifier = Modifier.height(48.dp))
            }


        }
        PullRefreshIndicator(model.refreshing, state, Modifier.align(Alignment.TopCenter))
    }


}

@Composable
fun CarGroup() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 54.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        CarTopInformation()
        CarTopPicture()
    }
}

@Composable
fun CarTopInformation() {
    Row {
        Text(
            text = "BMW",
            color = Color.Black,
            fontSize = 12.sp,
            style = TextStyle(fontWeight = FontWeight.Bold)
        )
        Text(
            modifier = Modifier.padding(start = 4.dp),
            text = "/",
            color = Color.Gray,
            fontSize = 12.sp
        )
        Text(
            modifier = Modifier.padding(start = 4.dp),
            text = "M1000RR",
            color = Color.Gray,
            fontSize = 12.sp
        )
    }
}

@Composable
fun CarTopPicture() {
    Image(
        modifier = Modifier
            .size(width = 336.dp, height = 224.dp)
            .padding(top = 42.dp),
        painter = painterResource(id = R.drawable.default_profile_moto), contentDescription = ""
    )
}

@Composable
fun UserInformation(
    isSelf: Boolean = true,
    accountProfileEntity: AccountProfileEntity,
    onFollowClick: () -> Unit = {},
    onEditProfileClick: () -> Unit = {}
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 8.dp, start = 33.dp, end = 33.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            val userInfoModifier = Modifier.weight(1f)
            UserInformationFollowers(userInfoModifier, accountProfileEntity)
            UserInformationBasic(userInfoModifier, accountProfileEntity)
            UserInformationFollowing(userInfoModifier, accountProfileEntity)
        }
        UserInformationSlogan(accountProfileEntity)
        CommunicationOperatorGroup(
            isSelf = isSelf,
            isFollowing = accountProfileEntity.isFollowing,
            onFollowClick = onFollowClick,
            onEditProfileClick = onEditProfileClick,
            accountProfileEntity = accountProfileEntity
        )
    }
}

@Composable
fun UserInformationFollowers(modifier: Modifier, accountProfileEntity: AccountProfileEntity) {
    val navController = LocalNavController.current
    Column(modifier = modifier.padding(top = 31.dp)) {
        Text(
            modifier = Modifier
                .padding(bottom = 5.dp)
                .noRippleClickable {
                    navController.navigate(
                        NavigationRoute.FollowerList.route.replace(
                            "{id}",
                            accountProfileEntity.id.toString()
                        )
                    )
                },
            text = accountProfileEntity.followerCount.toString(),
            fontSize = 24.sp,
            color = Color.Black,
            style = TextStyle(fontStyle = FontStyle.Italic, fontWeight = FontWeight.Bold)
        )
        Canvas(
            modifier = Modifier
                .size(width = 88.83.dp, height = 1.dp)
                .padding(top = 2.dp, bottom = 5.dp)
        ) {
            drawLine(
                color = Color(0xFFCCCCCC),
                start = Offset(0f, 0f),
                end = Offset(size.width, 0f),
                strokeWidth = 1f,
                pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f)
            )
        }
        Text(
            modifier = Modifier.padding(top = 5.dp),
            text = stringResource(R.string.followers_upper),
            fontSize = 12.sp,
            color = Color.Black,
            style = TextStyle(fontWeight = FontWeight.Bold)
        )
    }
}

@Composable
fun UserInformationBasic(modifier: Modifier, accountProfileEntity: AccountProfileEntity) {
    val context = LocalContext.current
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier.size(width = 112.dp, height = 112.dp),
            contentAlignment = Alignment.Center
        ) {
            Image(
                modifier = Modifier.fillMaxSize(),
                painter = painterResource(id = R.drawable.avatar_bold), contentDescription = ""
            )
            CustomAsyncImage(
                context,
                accountProfileEntity.avatar,
                modifier = Modifier
                    .size(width = 88.dp, height = 88.dp)
                    .clip(
                        RoundedCornerShape(88.dp)
                    ),
                contentDescription = "",
                contentScale = ContentScale.Crop
            )

        }
        Text(
            modifier = Modifier
                .widthIn(max = 220.dp)
                .padding(top = 8.dp),
            text = accountProfileEntity.nickName,
            fontSize = 32.sp,
            color = Color.Black,
            style = TextStyle(fontWeight = FontWeight.Bold),
            textAlign = TextAlign.Center
        )
        Text(
            modifier = Modifier.padding(top = 4.dp),
            text = accountProfileEntity.country,
            fontSize = 12.sp,
            color = Color.Gray
        )
    }
}

@Composable
fun UserInformationFollowing(modifier: Modifier, accountProfileEntity: AccountProfileEntity) {
    val navController = LocalNavController.current
    Column(
        modifier = modifier.padding(top = 6.dp),
        horizontalAlignment = Alignment.End
    ) {
        Text(
            modifier = Modifier
                .padding(bottom = 5.dp)
                .noRippleClickable {
                    navController.navigate(
                        NavigationRoute.FollowingList.route.replace(
                            "{id}",
                            accountProfileEntity.id.toString()
                        )
                    )
                },
            text = accountProfileEntity.followingCount.toString(),
            fontSize = 24.sp,
            color = Color.Black,
            style = TextStyle(fontStyle = FontStyle.Italic, fontWeight = FontWeight.Bold)
        )
        Canvas(
            modifier = Modifier
                .size(width = 88.83.dp, height = 1.dp)
                .padding(top = 2.dp, bottom = 5.dp)
        ) {
            drawLine(
                color = Color(0xFFCCCCCC),
                start = Offset(0f, 0f),
                end = Offset(size.width, 0f),
                strokeWidth = 1f,
                pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f)
            )
        }
        Text(
            modifier = Modifier.padding(top = 5.dp),
            text = stringResource(R.string.following_upper),
            fontSize = 12.sp,
            color = Color.Black,
            style = TextStyle(fontWeight = FontWeight.Bold)
        )
    }
}

@Composable
fun UserInformationSlogan(accountProfileEntity: AccountProfileEntity) {
    Text(
        modifier = Modifier.padding(top = 23.dp),
        text = accountProfileEntity.bio,
        fontSize = 13.sp,
        color = Color.Black,
        style = TextStyle(fontWeight = FontWeight.Bold)
    )
}

@Composable
fun CommunicationOperatorGroup(
    accountProfileEntity: AccountProfileEntity,
    isSelf: Boolean = true,
    isFollowing: Boolean = false,
    onFollowClick: () -> Unit = {},
    onEditProfileClick: () -> Unit = {}
) {
    val navController = LocalNavController.current
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 16.dp), horizontalArrangement = Arrangement.Center
    ) {
        if (!isSelf && AppState.UserId != accountProfileEntity.id) {
            Box(
                modifier = Modifier
                    .size(width = 142.dp, height = 40.dp)
                    .noRippleClickable {
                        onFollowClick()
                    },
                contentAlignment = Alignment.Center
            ) {
                Image(
                    modifier = Modifier.fillMaxSize(),
                    painter = if (isFollowing) painterResource(id = R.mipmap.rider_pro_follow_grey) else painterResource(
                        id = R.mipmap.rider_pro_follow_red
                    ),
                    contentDescription = ""
                )
                Text(
                    text = if (isFollowing) stringResource(R.string.following_upper) else stringResource(
                        R.string.follow_upper
                    ),
                    fontSize = 14.sp,
                    color = if (isFollowing) Color.Black else Color.White,
                    style = TextStyle(fontWeight = FontWeight.W600, fontStyle = FontStyle.Italic),
                )
            }
        }

        if (isSelf) {
            Box(
                modifier = Modifier
                    .size(width = 142.dp, height = 40.dp)
                    .noRippleClickable {
                        onEditProfileClick()
                    },
                contentAlignment = Alignment.Center
            ) {
                Image(
                    modifier = Modifier.fillMaxSize(),
                    painter = painterResource(id = R.mipmap.rider_pro_btn_bg_grey),
                    contentDescription = ""
                )
                Text(
                    text = stringResource(R.string.edit_profile),
                    fontSize = 14.sp,
                    color = Color.Black,
                    fontWeight = FontWeight.Bold,
                    style = TextStyle(fontWeight = FontWeight.Bold, fontStyle = FontStyle.Italic)
                )
            }
        }
    }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun RidingStyle() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 24.dp, top = 40.dp, end = 24.dp),
        horizontalAlignment = Alignment.Start
    ) {
        Text(
            text = "RIDING STYLES",
            fontSize = 18.sp,
            color = Color.Black,
            style = TextStyle(fontWeight = FontWeight.Bold)
        )
        Image(
            modifier = Modifier
                .padding(top = 4.dp)
                .height(8.dp),
            painter = painterResource(id = R.drawable.rider_pro_profile_line),
            contentDescription = ""
        )
        FlowRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 24.dp)
        ) {
            RidingStyleItem(styleContent = "Cruiser")
            RidingStyleItem(styleContent = "Bobber")
            RidingStyleItem(styleContent = "Cafe")
            RidingStyleItem(styleContent = "Chopper")
            RidingStyleItem(styleContent = "Sport")
            RidingStyleItem(styleContent = "Vintage")
            RidingStyleItem(styleContent = "Trike")
            RidingStyleItem(styleContent = "Touring")
        }
    }
}

@Composable
fun RidingStyleItem(styleContent: String) {
    Box(
        modifier = Modifier.padding(bottom = 8.dp, end = 8.dp),
        contentAlignment = Alignment.Center
    ) {
        Image(
            modifier = Modifier.shadow(
                ambientColor = Color.Gray,
                spotColor = Color(0f, 0f, 0f, 0.2f),
                elevation = 20.dp,
            ),
            painter = painterResource(id = R.drawable.rider_pro_style_wrapper),
            contentDescription = ""
        )
        Text(
            modifier = Modifier.padding(start = 5.dp, end = 5.dp),
            text = styleContent,
            fontSize = 12.sp,
            color = Color.Gray,
            style = TextStyle(fontWeight = FontWeight.Bold)
        )
    }
}

@Composable
fun EmptyMomentPostUnit() {
    TimeGroup(stringResource(R.string.empty_my_post_title))
    ProfileEmptyMomentCard()
}

@Composable
fun ProfileEmptyMomentCard(

) {
    var columnHeight by remember { mutableStateOf(0) }
    val navController = LocalNavController.current

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 24.dp, top = 18.dp, end = 24.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Canvas(
                modifier = Modifier
                    .height(with(LocalDensity.current) { columnHeight.toDp() })
                    .width(14.dp)
            ) {
                drawLine(
                    color = Color(0xff899DA9),
                    start = Offset(0f, 0f),
                    end = Offset(0f, size.height),
                    strokeWidth = 4f,
                    pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f)
                )
            }
            Spacer(modifier = Modifier.width(10.dp))
            Column(
                modifier = Modifier
                    .weight(1f)
                    .onGloballyPositioned { coordinates ->
                        columnHeight = coordinates.size.height
                    }
            ) {
                Text(stringResource(R.string.empty_my_post_content), fontSize = 16.sp)
                Spacer(modifier = Modifier.height(24.dp))
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .aspectRatio(3f / 2f)
                        .background(Color.White)
                        .padding(16.dp)
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color(0xFFF5F5F5))
                            .noRippleClickable {
                                navController.navigate(NavigationRoute.NewPost.route)
                            }

                    ) {
                        Icon(
                            Icons.Default.Add,
                            tint = Color(0xFFD8D8D8),
                            contentDescription = "New post",
                            modifier = Modifier
                                .size(32.dp)
                                .align(Alignment.Center)
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun MomentPostUnit(momentEntity: MomentEntity) {
    TimeGroup(momentEntity.time.formatPostTime2())
    ProfileMomentCard(
        momentEntity.momentTextContent,
        momentEntity.images[0].thumbnail,
        momentEntity.likeCount.toString(),
        momentEntity.commentCount.toString(),
        momentEntity = momentEntity
    )
}

@Composable
fun TimeGroup(time: String = "2024.06.08 12:23") {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 24.dp, top = 40.dp, end = 24.dp),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .height(16.dp)
                .width(14.dp),
            painter = painterResource(id = R.drawable.rider_pro_moment_time_flag),
            contentDescription = ""
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = time,
            fontSize = 16.sp,
            color = Color.Black,
            style = TextStyle(fontWeight = FontWeight.W600)
        )
    }
}

@Composable
fun ProfileMomentCard(
    content: String,
    imageUrl: String,
    like: String,
    comment: String,
    momentEntity: MomentEntity
) {
    var columnHeight by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 24.dp, top = 18.dp, end = 24.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Canvas(
                modifier = Modifier
                    .height(with(LocalDensity.current) { columnHeight.toDp() })
                    .width(14.dp)
            ) {
                drawLine(
                    color = Color(0xff899DA9),
                    start = Offset(0f, 0f),
                    end = Offset(0f, size.height),
                    strokeWidth = 4f,
                    pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 20f), 0f)
                )
            }
            Spacer(modifier = Modifier.width(10.dp))
            Column(
                modifier = Modifier
                    .background(Color.White)
                    .weight(1f)
                    .onGloballyPositioned { coordinates ->
                        columnHeight = coordinates.size.height
                    }
            ) {
                if (content.isNotEmpty()) {
                    MomentCardTopContent(content)
                }
                MomentCardPicture(imageUrl, momentEntity = momentEntity)
                MomentCardOperation(like, comment)
            }
        }
    }
}

@Composable
fun MomentCardTopContent(content: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier.padding(top = 16.dp, bottom = 0.dp, start = 16.dp, end = 16.dp),
            text = content, fontSize = 16.sp, color = Color.Black
        )
    }
}

@Composable
fun MomentCardPicture(imageUrl: String, momentEntity: MomentEntity) {
    val navController = LocalNavController.current
    val context = LocalContext.current
    CustomAsyncImage(
        context,
        imageUrl,
        modifier = Modifier
            .fillMaxSize()
            .aspectRatio(3f / 2f)
            .padding(top = 16.dp)
            .noRippleClickable {
//                PostViewModel.preTransit(momentEntity)
                navController.navigate(
                    NavigationRoute.Post.route.replace(
                        "{id}",
                        momentEntity.id.toString()
                    )
                )
            },
        contentDescription = "",
        contentScale = ContentScale.Crop
    )


}

@Composable
fun MomentCardOperation(like: String, comment: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(48.dp),
        horizontalArrangement = Arrangement.End,
        verticalAlignment = Alignment.CenterVertically
    ) {
//        Spacer(modifier = Modifier.weight(1f))
        MomentCardOperationItem(
            drawable = R.drawable.rider_pro_like,
            number = like,
            modifier = Modifier.padding(end = 32.dp)
        )
        MomentCardOperationItem(
            drawable = R.drawable.rider_pro_moment_comment,
            number = comment,
            modifier = Modifier.padding(end = 32.dp)
        )
    }
}

@Composable
fun MomentCardOperationItem(@DrawableRes drawable: Int, number: String, modifier: Modifier) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier.padding(start = 16.dp, end = 8.dp),
            painter = painterResource(id = drawable), contentDescription = ""
        )
        Text(text = number)
    }
}