@Composable
fun SearchResult() {
   Row {
      Image(
         // ...
      )
      Column {
         Text(
            // ...
         )
         Text(
            // ...
         )
      }
   }
}

Column(
   Modifier
      .clickable(onClick = /*...*/)
      .padding(/*...*/)
      .fillMaxWidth()
) {
   /*...*/
}

@Composable
fun WithConstraintsComposable() {
   BoxWithConstraints {
      /*...*/
   }
}

@Composable
fun HomeScreen(/*...*/) {
    ModalNavigationDrawer(drawerContent = { /* ... */ }) {
        Scaffold(
            topBar = { /*...*/ }
        ) { contentPadding ->
            // ...
        }
    }
}

val reusableModifier = Modifier
   .fillMaxWidth()
   .background(Color.Red)
   .padding(12.dp)

@Composable
fun LoadingWheelAnimation() {
   val animatedState = animateFloatAsState(/*...*/)

   LoadingWheel(
      // 이 Modifier의 생성/할당은 애니메이션의 모든 프레임에서 발생
      modifier = Modifier
         .padding(12.dp)
         .background(Color.Gray),
      animatedState = animatedState
   )
}

val reusableItemModifier = Modifier
   .padding(bottom = 12.dp)
   .size(216.dp)
   .clip(CircleShape)

@Composable
private fun AuthorList(authors: List<Author>) {
   LazyColumn {
      items(authors) {
         AsyncImage(
            // ...
            modifier = reusableItemModifier,
         )
      }
   }
}

Column(modifier = Modifier.fillMaxWidth()) {
   // Weight Modifier는 Composable ColumnScope로 지정
   val reusableItemModifier = Modifier.weight(1f)

   // Column의 직계 하위 항목
   Text1(
      modifier = reusableItemModifier
      // ...
   )

   Box {
      Text2(
         // Text Composable은 Column의 직접적인 자식이 아니다.
         // Weight는 여기서 아무 작업도 수행하지 않는다.
         modifier = reusableItemModifier
         // ...
      )
   }
}

val reusableModifier = Modifier
   .fillMaxWidth()
   .background(Color.Red)
   .padding(12.dp)

// reusableModifier에 추가
reusableModifier.clickable { /*...*/ }

// otherModifier에 reusableModifier를 추가
otherModifier.then(reusableModifier)

// Modifier#clip의 구현
fun Modifier.clip(shape: Shape) = graphicsLayer(shape = shape, clip = true)

// 반복 사용되는 경우
fun Modifier.myBackground(color: Color) = padding(16.dp)
   .clip(RoundedCornerShape(8.dp))
   .background(color)

@Composable
fun Modifier.fade(enable: Boolean): Modifier {
   val alpha by animateFloatAsState(if (enable) 0.5f else 1.0f)
   return this then Modifier.graphicsLayer { this.alpha = alpha }
}

@Composable
fun Modifier.myBackground(): Modifier {
   val color = LocalContentColor.current
   return this then Modifier.background(color.copy(alpha = 0.5f))
}

@Composable
fun MyScreen() {
   CompositionLocalProvider(LocalContentColor provides Color.Green) {
      // Background modifier 생성 (Background는 Green)
      val backgroundModifier = Modifier.myBackground()

      // LocalContentColor를 Red로 업데이트
      CompositionLocalProvider(LocalContentColor provides Color.Red) {

         // Red가 아닌 Green이 background로 적용
         Box(modifier = backgroundModifier)
      }
   }
}

private class CircleNode(var color: Color) : DrawModifierNode, Modifier.Node() {
   override fun ContentDrawScope.draw() {
      drawCircle(color)
   }
}

private data class CircleElement(val color: Color) : ModifierNodeElement<CircleNode>() {
   override fun create() = CircleNode(color)

   override fun update(node: CircleNode) {
      node.color = color
   }
}

fun Modifier.circle(color: Color) = this then CircleElement(color)

fun Modifier.fixedPadding() = this then FixedPaddingElement

data object FixedPaddingElement : ModifierNodeElement<FixedPaddingNode>() {
   override fun create() = FixedPaddingNode()
   override fun update(node: FixedPaddingNode) {}
}

class FixedPaddingNode : LayoutModifierNode, Modifier.Node() {
   private val PADDING = 16.dp

   override fun MeasureScope.measure(
      measurable: Measurable,
      constraints: Constraints
   ): MeasureResult {
      val paddingPx = PADDING.roundToPx()
      val horizontal = paddingPx * 2
      val vertical = paddingPx * 2

      val placeable = measurable.measure(constraints.offset(-horizontal, -vertical))

      val width = constraints.constrainWidth(placeable.width + horizontal)
      val height = constraints.constrainHeight(placeable.height + vertical)
      return layout(width, height) {
         placeable.place(paddingPx, paddingPx)
      }
   }
}

class BackgroundColorConsumerNode :
   Modifier.Node(),
   DrawModifierNode,
   CompositionLocalConsumerModifierNode {
   override fun ContentDrawScope.draw() {
      val currentColor = currentValueOf(LocalContentColor)
      drawRect(color = currentColor)
      drawContent()
   }
}

class ScrollableNode :
   Modifier.Node(),
   ObserverModifierNode,
   CompositionLocalConsumerModifierNode {

   // Place holder Behavior는 작은 밀도를 사용할 수 있을 때 초기화
   val defaultFlingBehavior = DefaultFlingBehavior(splineBasedDecay(UnityDensity))

   override fun onAttach() {
      updateDefaultFlingBehavior()
      observeReads { currentValueOf(LocalDensity) } // Density 변경 모니터링
   }

   override fun onObservedReadsChanged() {
      // Density가 변경되면 defaultFlingBehavior를 업데이트
      updateDefaultFlingBehavior()
   }

   private fun updateDefaultFlingBehavior() {
      val density = currentValueOf(LocalDensity)
      defaultFlingBehavior.flingDecay = splineBasedDecay(density)
   }
}

class CircleNode(var color: Color) : Modifier.Node(), DrawModifierNode {
   private val alpha = Animatable(1f)

   override fun ContentDrawScope.draw() {
      drawCircle(color = color, alpha = alpha.value)
      drawContent()
   }

   override fun onAttach() {
      coroutineScope.launch {
         alpha.animateTo(
            0f,
            infiniteRepeatable(tween(1000), RepeatMode.Reverse)
         ) {
         }
      }
   }
}

class ClickableNode : DelegatingNode() {
   val interactionData = InteractionData()
   val focusableNode = delegate(
      FocusableNode(interactionData)
   )
   val indicationNode = delegate(
      IndicationNode(interactionData)
    )
}

class SampleInvalidatingNode(
   var color: Color,
   var size: IntSize,
   var onClick: () -> Unit
) : DelegatingNode(), LayoutModifierNode, DrawModifierNode {
   override val shouldAutoInvalidate: Boolean
      get() = false

   private val clickableNode = delegate(
      ClickablePointerInputNode(onClick)
   )

   fun update(color: Color, size: IntSize, onClick: () -> Unit) {
      if (this.color != color) {
         this.color = color
         // 색상이 변결될 때 Draw를 무효화
         invalidateDraw()
      }

      if (this.size != size) {
         this.size = size
         // 사이즈가 변경될 때 Layout을 무효화 
         invalidateMeasurement()
      }

      // onClick만 변경되면 아무 것도 무효화하지 않음
      clickableNode.update(onClick)
   }

   override fun ContentDrawScope.draw() {
      drawRect(color)
   }

   override fun MeasureScope.measure(
      measurable: Measurable,
      constraints: Constraints
   ): MeasureResult {
      val size = constraints.constrain(size)
      val placeable = measurable.measure(constraints)
      return layout(size.width, size.height) {
         placeable.place(0, 0)
      }
   }
}

val pagerState = rememberPagerState(pageCount = {
   10
})
HorizontalPager(state = pagerState) { page ->
   Text(
      text = "Page: $page",
      modifier = Modifier.fillMaxWidth()
   )
}

val pagerState = rememberPagerState(pageCount = {
   10
})
VerticalPager(state = pagerState) { page ->
   Text(
      text = "Page: $page",
      modifier = Modifier.fillMaxWidth()
   )
}

val pagerState = rememberPagerState(pageCount = {
   10
})
HorizontalPager(state = pagerState) { page ->
   Text(
      text = "Page: $page",
      modifier = Modifier
         .fillMaxWidth()
         .height(100.dp)
   )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
   coroutineScope.launch {
      // Call scroll to on pagerState
      pagerState.scrollToPage(5)
   }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
   Text("Jump to Page 5")
}

val pagerState = rememberPagerState(pageCount = {
   10
})

LaunchedEffect(pagerState) {
   // currentPage를 읽는 snapshotFlow에서 수집
   snapshotFlow { pagerState.currentPage }.collect { page ->
      // 페이지시 특정 작업을 실행
      Log.d("Page change", "Page changed to $page")
   }
}

VerticalPager(
   state = pagerState,
) { page ->
   Text(text = "Page: $page")
}

val pagerState = rememberPagerState(pageCount = {
   4
})
/** HorizontalPager */

// 커스텀 page indicator
Row(...) {
   repeat(pagerState.pageCount) { iteration ->
      val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
      Box(...)
   }
}

val pagerState = rememberPagerState(pageCount = {
   4
})
HorizontalPager(state = pagerState) { page ->
   Card(
      Modifier
         .size(200.dp)
         .graphicsLayer {
            // 스크롤 위치에서 현재 페이지의 절대 오프셋을 계산
            // 양방향의 모든 효과를 미러링 할 수 있는 절대값을 사용
            val pageOffset = (
               (pagerState.currentPage - page) + pagerState.currentPageOffsetFraction
            ).absoluteValue

            // 알파를 50% ~ 100% 사이로 애니메이션 처리
            alpha = lerp(
               start = 0.5f,
               stop = 1f,
               fraction = 1f - pageOffset.coerceIn(0f, 1f)
            )
         }
   ) {
      // Card content
   }
}

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    pageSize = PageSize.Fixed(100.dp)
) { page ->
    // page content
}

private val threePagesPerViewport = object : PageSize {
   override fun Density.calculateMainAxisPageSize(
      availableSpace: Int,
      pageSpacing: Int
   ): Int {
      return (availableSpace - 2 * pageSpacing) / 3
   }
}

val pagerState = rememberPagerState(pageCount = {
   4
})
HorizontalPager(
   state = pagerState,
   contentPadding = PaddingValues(horizontal = 32.dp),
) { page ->
   // page content
}

val pagerState = rememberPagerState(pageCount = { 10 })

val fling = PagerDefaults.flingBehavior(
   state = pagerState,
   pagerSnapDistance = PagerSnapDistance.atMost(10)
)

Column(modifier = Modifier.fillMaxSize()) {
   HorizontalPager(
      state = pagerState,
      pageSize = PageSize.Fixed(200.dp),
      beyondBoundsPageCount = 10,
      flingBehavior = fling
   ) {
      PagerSampleItem(page = it)
   }
}

@Composable
private fun FlowRowSimpleUsageExample() {
   FlowRow(modifier = Modifier.padding(8.dp)) {
      ChipItem("Price: High to Low")
      ChipItem("Avg rating: 4+")
      ChipItem("Free breakfast")
      ChipItem("Free cancellation")
      ChipItem("£50 pn")
   }
}

val totalCount = 40
var maxLines by remember {
   mutableStateOf(2)
}

val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope ->
   val remainingItems = totalCount - scope.shownItemCount
   ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = {
      if (remainingItems == 0) {
         maxLines = 2
      } else {
         maxLines += 5
      }
   })
}
ContextualFlowRow(
   ...
   maxLines = maxLines,
   overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
      minRowsToShowCollapse = 4,
      expandIndicator = moreOrCollapseIndicator,
      collapseIndicator = moreOrCollapseIndicator
   ),
   itemCount = totalCount
) { index ->
   ChipItem("Item $index")
}

val rows = 3
val columns = 3
FlowRow(
   ...
   maxItemsInEachRow = rows
) {
   val itemModifier = Modifier
      .padding(4.dp)
      .height(80.dp)
      .weight(1f)
      .clip(RoundedCornerShape(8.dp))
      .background(MaterialColors.Blue200)
   repeat(rows * columns) {
      Spacer(modifier = itemModifier)
   }
}

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(modifier = itemModifier.height(200.dp).width(60.dp).background(Color.Red))
    Box(modifier = itemModifier.height(200.dp).fillMaxWidth(0.7f).background(Color.Blue))
    Box(modifier = itemModifier.height(200.dp).weight(1f).background(Color.Magenta))
}

fun Modifier.customLayoutModifier() =
   layout { measurable, constraints ->
      // ...
   }

fun Modifier.firstBaselineToTop(
   firstBaselineToTop: Dp
) = layout { measurable, constraints ->
   // composable 측정
   val placeable = measurable.measure(constraints)

   // composable에 FirstBaseline이 있는지 체크
   check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
   val firstBaseline = placeable[FirstBaseline]

   // padding이 포함된 composable의 높이 - firstBaseline
   val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
   val height = placeable.height + placeableY
   layout(placeable.width, height) {
      // composable이 배치되는 위치
      placeable.placeRelative(0, placeableY)
   }
}

// 다음과 같이 Modifier를 사용
@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
   MyApplicationTheme {
      Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
   }
}

// 예) 기본적인 버전의 Column
@Composable
fun MyBasicColumn(
   modifier: Modifier = Modifier,
   content: @Composable () -> Unit
) {
   Layout(
      modifier = modifier,
      content = content
   ) { measurables, constraints ->
      // 여기에서 제약 조건 로직이 주어진 하위 element를 측정하고 배치
      // 측정된 하위 element 목록
      val placeables = measurables.map { measurable ->
         // 하위 element 측정
         measurable.measure(constraints)
      }

      // 레이아웃의 크기를 최대한 크게 설정
      layout(constraints.maxWidth, constraints.maxHeight) {
         // 하위 element를 최대로 배치한 Y 좌표를 추적
         var yPosition = 0

         // 부모 layout에 하위 element 배치
         placeables.forEach { placeable ->
            // 화면에서 item 위치 지정
            placeable.placeRelative(x = 0, y = yPosition)

            // 배치된 Y 좌표를 업데이트
            yPosition += placeable.height
         }
      }
   }
}

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
   MyBasicColumn(modifier.padding(8.dp)) {
      Text("MyBasicColumn")
      Text("places items")
      Text("vertically.")
      Text("We've done it by hand!")
   }
}

/** BarChart의 최대 값으로 정의된 AlignmentLine */
private val MaxChartValue = HorizontalAlignmentLine(merger = { old, new ->
   min(old, new)
})

/** BarChart의 최소 값으로 정의된 AlignmentLine */
private val MinChartValue = HorizontalAlignmentLine(merger = { old, new ->
   max(old, new)
})

@Composable
private fun BarChart(
   dataPoints: List<Int>,
   modifier: Modifier = Modifier,
) {
   val maxValue: Float = remember(dataPoints) { dataPoints.maxOrNull()!! * 1.2f }

   BoxWithConstraints(modifier = modifier) {
      val density = LocalDensity.current
      with(density) {
         // ...
         // Calculate baselines
         val maxYBaseline = // ...
         val minYBaseline = // ...
         Layout(
            content = {},
            modifier = Modifier.drawBehind {
               // ...
            }
         ) { _, constraints ->
            with(constraints) {
               layout(
                  width = if (hasBoundedWidth) maxWidth else minWidth,
                  height = if (hasBoundedHeight) maxHeight else minHeight,
                  // 커스텀 AlignmentLines이 설정.
                  // 직간접 부모 Composable에 전파된다
                  alignmentLines = mapOf(
                     MinChartValue to minYBaseline.roundToInt(),
                     MaxChartValue to maxYBaseline.roundToInt()
                  )
               ) {}
            }
         }
      }
   }
}

@Composable
private fun BarChartMinMax(
   dataPoints: List<Int>,
   maxText: @Composable () -> Unit,
   minText: @Composable () -> Unit,
   modifier: Modifier = Modifier,
) {
   Layout(
      content = {
         maxText()
         minText()
         // BarChart 고정 크기 설정
         BarChart(dataPoints, Modifier.size(200.dp))
      },
      modifier = modifier
   ) { measurables, constraints ->
      check(measurables.size == 3)
      val placeables = measurables.map {
         it.measure(constraints.copy(minWidth = 0, minHeight = 0))
      }

      val maxTextPlaceable = placeables[0]
      val minTextPlaceable = placeables[1]
      val barChartPlaceable = placeables[2]

      // BarChart에서 alignment lines을 가져와 텍스트의 위치를 지정
      val minValueBaseline = barChartPlaceable[MinChartValue]
      val maxValueBaseline = barChartPlaceable[MaxChartValue]
      layout(constraints.maxWidth, constraints.maxHeight) {
         maxTextPlaceable.placeRelative(
            x = 0,
            y = maxValueBaseline - (maxTextPlaceable.height / 2)
         )
         minTextPlaceable.placeRelative(
            x = 0,
            y = minValueBaseline - (minTextPlaceable.height / 2)
         )
         barChartPlaceable.placeRelative(
            x = max(maxTextPlaceable.width, minTextPlaceable.width) + 20,
            y = 0
         )
      }
   }
}
@Preview
@Composable
private fun ChartDataPreview() {
   MaterialTheme {
      BarChartMinMax(
         dataPoints = listOf(4, 24, 15),
         maxText = { Text("Max") },
         minText = { Text("Min") },
         modifier = Modifier.padding(24.dp)
      )
   }
}

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
   // IntrinsicSize.Min : 최소 고유 높이만큼 하위 element들의 크기를 강제로 조절
   Row(modifier = modifier.height(IntrinsicSize.Min)) {
      Text(
         modifier = Modifier
            .weight(1f)
            .padding(start = 4.dp)
            .wrapContentWidth(Alignment.Start),
         text = text1
      )
      Divider(
         color = Color.Black,
         modifier = Modifier.fillMaxHeight().width(1.dp)
      )
      Text(
         modifier = Modifier
            .weight(1f)
            .padding(end = 4.dp)
            .wrapContentWidth(Alignment.End),
         text = text2
      )
   }
}

// @Preview
@Composable
fun TwoTextsPreview() {
   MaterialTheme {
      Surface {
         TwoTexts(text1 = "Hi", text2 = "there")
      }
   }
}

@Composable
fun ConstraintLayoutContent() {
   ConstraintLayout {
      // 제약할 composable에 대한 레퍼런스를 생성
      val (button, text) = createRefs()

      Button(
         onClick = { /* Do something */ },
         // Button composable에 참조 "button"을 할당,
         // ConstraintLayout의 상단으로 제약 추가
         modifier = Modifier.constrainAs(button) {
            top.linkTo(parent.top, margin = 16.dp)
         }
      ) {
         Text("Button")
      }

      // Text composable에 참조 "text"를 할당,
      // Buton composable의 하단에 제약 추가
      Text(
         "Text",
         Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
         }
      )
   }
}

@Composable
fun DecoupledConstraintLayout() {
   BoxWithConstraints {
      val constraints = if (minWidth < 600.dp) {
         decoupledConstraints(margin = 16.dp) // 세로 제약
      } else {
         decoupledConstraints(margin = 32.dp) // 가로 제약
      }

      ConstraintLayout(constraints) {
         Button(
            onClick = { /* Do something */ },
            modifier = Modifier.layoutId("button")
         ) {
            Text("Button")
         }

         Text("Text", Modifier.layoutId("text"))
      }
   }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
   return ConstraintSet {
      val button = createRefFor("button")
      val text = createRefFor("text")

      constrain(button) {
         top.linkTo(parent.top, margin = margin)
      }
      constrain(text) {
         top.linkTo(button.bottom, margin)
      }
   }
}

ConstraintLayout {
   // Composable width의 10%에서 parent start부터 가이드라인 생성
   val startGuideline = createGuidelineFromStart(0.1f)
   // parent end에서 Composable width의 10%에 가이드라인 생성
   val endGuideline = createGuidelineFromEnd(0.1f)
   // parent top의 16dp에서 가이드라인 생성
   val topGuideline = createGuidelineFromTop(16.dp)
   // parent bottom에서 16dp에서 가이드라인 생성
   val bottomGuideline = createGuidelineFromBottom(16.dp)
}

ConstraintLayout {
   val constraintSet = ConstraintSet {
      val button = createRefFor("button")
      val text = createRefFor("text")

      val topBarrier = createTopBarrier(button, text)
   }
}

ConstraintLayout {
   val constraintSet = ConstraintSet {
      val button = createRefFor("button")
      val text = createRefFor("text")

      val verticalChain = createVerticalChain(button, text, chainStyle = ChainStyle.Spread)
      val horizontalChain = createHorizontalChain(button, text)
   }
}