Shopping Cart

data class ShoppingCartItem(
    val title: String,
    val variant: String,
    val price: String,
    val quanity: Int,
    val imageSrc: String
)

val items = remember {
    listOf(
        ShoppingCartItem(
            title = "Stay Hydrated Bottle",
            variant = "Green",
            price = "$52.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1602143407151-7111542de6e8?q=80&w=120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
        ShoppingCartItem(
            title = "Aloe plant in pot",
            variant = "Teal",
            price = "$70.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
        ShoppingCartItem(
            title = "Perfume eau de parfum",
            variant = "100ml",
            price = "170.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1597317628840-d3472f7aa7fc?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
    )
}

Column {
    BasicText(
        text = "Shopping Cart",
        modifier = Modifier.padding(16.dp),
        style = ComposeTheme.textStyles.lg.copy(fontWeight = FontWeight.Medium)
    )
    LazyColumn(Modifier.height(420.dp)) {
        itemsIndexed(items) { i, item ->
            Row(
                modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min).padding(16.dp),
                horizontalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                AsyncImage(
                    model = item.imageSrc,
                    modifier = Modifier.clip(RoundedCornerShape(4.dp))
                        .border(1.dp, Color(0xFFE0E0E0), RoundedCornerShape(4.dp))
                        .size(96.dp),
                    contentDescription = null,
                    contentScale = ContentScale.Crop
                )
                Column {
                    Column {
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            BasicText(
                                text = item.title,
                                modifier = Modifier.weight(1f),
                                style = ComposeTheme.textStyles.base.copy(fontWeight = FontWeight.Medium)
                            )
                            BasicText(
                                text = item.price,
                                maxLines = 1,
                                modifier = Modifier.padding(start = 16.dp),
                                style = ComposeTheme.textStyles.base.copy(fontWeight = FontWeight.Medium)
                            )
                        }
                        Spacer(Modifier.height(4.dp))
                        BasicText(
                            text = item.variant,
                            style = ComposeTheme.textStyles.sm.copy(color = Color(0xFF757575))
                        )
                    }
                    Spacer(Modifier.weight(1f))
                    Row(
                        modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.Bottom
                    ) {
                        BasicText(
                            text = "Quantity ${item.quanity}",
                            style = ComposeTheme.textStyles.sm.copy(color = Color(0xFF757575))
                        )
                        BasicText(
                            text = "Remove",
                            style = ComposeTheme.textStyles.base.copy(color = Color(0xFF3F51B5)),
                            modifier = Modifier
                                .offset(x = 8.dp, y = 4.dp)
                                .clip(RoundedCornerShape(4.dp))
                                .clickable { /* TODO */ }
                                .padding(horizontal = 8.dp, vertical = 4.dp)
                        )
                    }
                }
            }
        }
    }
    Box(Modifier.fillMaxWidth().height(1.dp).background(Color(0xFFE0E0E0)))
    Column(modifier = Modifier.fillMaxWidth().padding(16.dp), verticalArrangement = Arrangement.spacedBy(12.dp)) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            BasicText("Subtotal", style = ComposeTheme.textStyles.base)
            BasicText("$217.00", style = ComposeTheme.textStyles.base)
        }

        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(4.dp))
                .clickable(role = Role.Button) { /* TODO */ }
                .background(Color(0xFF3F51B5))
                .fillMaxWidth()
                .padding(vertical = 12.dp, horizontal = 16.dp), contentAlignment = Alignment.Center) {
            BasicText("Go to checkout", style = ComposeTheme.textStyles.base.copy(color = Color.White))
        }
    }
}

data class ShoppingCartItem(
    val title: String,
    val variant: String,
    val price: String,
    val quanity: Int,
    val imageSrc: String
)

val items = remember {
    listOf(
        ShoppingCartItem(
            title = "Stay Hydrated Bottle",
            variant = "Green",
            price = "$52.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1602143407151-7111542de6e8?q=80&w=120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
        ShoppingCartItem(
            title = "Aloe plant in pot",
            variant = "Teal",
            price = "$70.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
        ShoppingCartItem(
            title = "Perfume eau de parfum",
            variant = "100ml",
            price = "170.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1597317628840-d3472f7aa7fc?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
    )
}

val state = rememberModalBottomSheetState(
    initialDetent = SheetDetent.FullyExpanded
)

LaunchedEffect(state.isIdle) {
    if (state.targetDetent == SheetDetent.Hidden) {
        delay(500)
        state.currentDetent = SheetDetent.FullyExpanded
    }
}

BoxWithConstraints {
    ModalBottomSheet(state) {
        Scrim(enter = fadeIn(), exit = fadeOut(), scrimColor = Color.Black.copy(0.3f))
        Sheet(
            Modifier
                .padding(top = 12.dp)
                .shadow(4.dp, RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                .background(Color.White)
                .widthIn(max = 640.dp)
                .fillMaxWidth()
        ) {
            Column {
                DragIndication(
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .padding(top = 22.dp)
                        .background(Color.Black.copy(0.4f), RoundedCornerShape(100))
                        .width(32.dp)
                        .height(4.dp)
                )
                BasicText(
                    text = "Shopping Cart",
                    modifier = Modifier.padding(16.dp),
                    style = ComposeTheme.textStyles.lg.copy(fontWeight = FontWeight.Medium)
                )
                LazyColumn(Modifier.height(420.dp)) {
                    itemsIndexed(items) { i, item ->
                        Row(
                            modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min).padding(16.dp),
                            horizontalArrangement = Arrangement.spacedBy(16.dp)
                        ) {
                            AsyncImage(
                                model = item.imageSrc,
                                modifier = Modifier.clip(RoundedCornerShape(4.dp))
                                    .border(1.dp, Color(0xFFE0E0E0), RoundedCornerShape(4.dp))
                                    .size(96.dp),
                                contentDescription = null,
                                contentScale = ContentScale.Crop
                            )
                            Column {
                                Column {
                                    Row(
                                        modifier = Modifier.fillMaxWidth(),
                                        horizontalArrangement = Arrangement.SpaceBetween
                                    ) {
                                        BasicText(
                                            text = item.title,
                                            modifier = Modifier.weight(1f),
                                            style = ComposeTheme.textStyles.base.copy(fontWeight = FontWeight.Medium)
                                        )
                                        BasicText(
                                            text = item.price,
                                            maxLines = 1,
                                            modifier = Modifier.padding(start = 16.dp),
                                            style = ComposeTheme.textStyles.base.copy(fontWeight = FontWeight.Medium)
                                        )
                                    }
                                    Spacer(Modifier.height(4.dp))
                                    BasicText(
                                        text = item.variant,
                                        style = ComposeTheme.textStyles.sm.copy(color = Color(0xFF757575))
                                    )
                                }
                                Spacer(Modifier.weight(1f))
                                Row(
                                    modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp),
                                    horizontalArrangement = Arrangement.SpaceBetween,
                                    verticalAlignment = Alignment.Bottom
                                ) {
                                    BasicText(
                                        text = "Quantity ${item.quanity}",
                                        style = ComposeTheme.textStyles.sm.copy(color = Color(0xFF757575))
                                    )
                                    BasicText(
                                        text = "Remove",
                                        style = ComposeTheme.textStyles.base.copy(color = Color(0xFF3F51B5)),
                                        modifier = Modifier
                                            .offset(x = 8.dp, y = 4.dp)
                                            .clip(RoundedCornerShape(4.dp))
                                            .clickable { /* TODO */ }
                                            .padding(horizontal = 8.dp, vertical = 4.dp)
                                    )
                                }
                            }
                        }
                    }
                }

                Box(Modifier.fillMaxWidth().height(1.dp).background(Color(0xFFE0E0E0)))
                Column(
                    modifier = Modifier.fillMaxWidth().padding(16.dp),
                    verticalArrangement = Arrangement.spacedBy(12.dp)
                ) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        BasicText("Subtotal", style = ComposeTheme.textStyles.base)
                        BasicText("$217.00", style = ComposeTheme.textStyles.base)
                    }

                    Box(
                        modifier = Modifier
                            .clip(RoundedCornerShape(4.dp))
                            .clickable(role = Role.Button) { /* TODO */ }
                            .background(Color(0xFF3F51B5))
                            .fillMaxWidth()
                            .padding(vertical = 12.dp, horizontal = 16.dp), contentAlignment = Alignment.Center) {
                        BasicText("Go to checkout", style = ComposeTheme.textStyles.base.copy(color = Color.White))
                    }
                }
            }
        }
    }
}

data class ShoppingCartItem(
    val title: String,
    val variant: String,
    val price: String,
    val quanity: Int,
    val imageSrc: String
)

val items = remember {
    listOf(
        ShoppingCartItem(
            title = "Stay Hydrated Bottle",
            variant = "Green",
            price = "$52.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1602143407151-7111542de6e8?q=80&w=120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
        ShoppingCartItem(
            title = "Aloe plant in pot",
            variant = "Teal",
            price = "$70.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1485955900006-10f4d324d411?q=80&w=120&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
        ShoppingCartItem(
            title = "Perfume eau de parfum",
            variant = "100ml",
            price = "170.00",
            quanity = 1,
            imageSrc = "https://images.unsplash.com/photo-1597317628840-d3472f7aa7fc?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        ),
    )
}

val state = rememberDialogState(visible = true)

LaunchedEffect(state.visible) {
    if (state.visible.not()) {
        delay(1000)
        state.visible = true
    }
}

Dialog(state = state) {
    Scrim(enter = fadeIn(), exit = fadeOut())
    DialogPanel(
        modifier = Modifier.systemBarsPadding()
            .widthIn(min = 280.dp, max = 520.dp)
            .shadow(8.dp, ComposeTheme.shapes.roundL)
            .background(Color.White, ComposeTheme.shapes.round)
            .padding(8.dp),
        enter = slideInVertically { it / 2 } + fadeIn(tween(durationMillis = 250)),
        exit = slideOutVertically { it } + fadeOut(tween(durationMillis = 150))
    ) {
        Column {
            Row(
                modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                Box(
                    modifier = Modifier.clip(CircleShape)
                        .clickable(role = Role.Button, onClickLabel = "Close Cart") { state.visible = false }
                        .padding(4.dp)
                ) {
                    Icon(Icons.Rounded.Close, contentDescription = null, tint = Color(0xFF212121))
                }

                BasicText(
                    text = "Shopping Cart",
                    modifier = Modifier.padding(16.dp),
                    style = ComposeTheme.textStyles.lg.copy(fontWeight = FontWeight.Medium)
                )
            }
            LazyColumn(Modifier.height(420.dp)) {
                itemsIndexed(items) { i, item ->
                    Row(
                        modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min).padding(16.dp),
                        horizontalArrangement = Arrangement.spacedBy(16.dp)
                    ) {
                        AsyncImage(
                            model = item.imageSrc,
                            modifier = Modifier.clip(RoundedCornerShape(4.dp))
                                .border(1.dp, Color(0xFFE0E0E0), RoundedCornerShape(4.dp))
                                .size(96.dp),
                            contentDescription = null,
                            contentScale = ContentScale.Crop
                        )
                        Column {
                            Column {
                                Row(
                                    modifier = Modifier.fillMaxWidth(),
                                    horizontalArrangement = Arrangement.SpaceBetween
                                ) {
                                    BasicText(
                                        text = item.title,
                                        modifier = Modifier.weight(1f),
                                        style = ComposeTheme.textStyles.base.copy(fontWeight = FontWeight.Medium)
                                    )
                                    BasicText(
                                        text = item.price,
                                        maxLines = 1,
                                        modifier = Modifier.padding(start = 16.dp),
                                        style = ComposeTheme.textStyles.base.copy(fontWeight = FontWeight.Medium)
                                    )
                                }
                                Spacer(Modifier.height(4.dp))
                                BasicText(
                                    text = item.variant,
                                    style = ComposeTheme.textStyles.sm.copy(color = Color(0xFF757575))
                                )
                            }
                            Spacer(Modifier.weight(1f))
                            Row(
                                modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp),
                                horizontalArrangement = Arrangement.SpaceBetween,
                                verticalAlignment = Alignment.Bottom
                            ) {
                                BasicText(
                                    text = "Quantity ${item.quanity}",
                                    style = ComposeTheme.textStyles.sm.copy(color = Color(0xFF757575))
                                )
                                BasicText(
                                    text = "Remove",
                                    style = ComposeTheme.textStyles.base.copy(color = Color(0xFF3F51B5)),
                                    modifier = Modifier
                                        .offset(x = 8.dp, y = 4.dp)
                                        .clip(RoundedCornerShape(4.dp))
                                        .clickable { /* TODO */ }
                                        .padding(horizontal = 8.dp, vertical = 4.dp)
                                )
                            }
                        }
                    }
                }
            }
            Box(Modifier.fillMaxWidth().height(1.dp).background(Color(0xFFE0E0E0)))
            Column(
                modifier = Modifier.fillMaxWidth().padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    BasicText("Subtotal", style = ComposeTheme.textStyles.base)
                    BasicText("$217.00", style = ComposeTheme.textStyles.base)
                }

                Box(
                    modifier = Modifier
                        .clip(RoundedCornerShape(4.dp))
                        .clickable(role = Role.Button) { /* TODO */ }
                        .background(Color(0xFF3F51B5))
                        .fillMaxWidth()
                        .padding(vertical = 12.dp, horizontal = 16.dp), contentAlignment = Alignment.Center) {
                    BasicText("Go to checkout", style = ComposeTheme.textStyles.base.copy(color = Color.White))
                }
            }
        }
    }
}