// 8-0 어떤 것을 만들지 살펴보기(이미지포함)

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

@Composable
fun PocketCard(){

    var cardFront by remember {
        mutableStateOf(true)
    }

    val animationDegree by animateFloatAsState(
        targetValue = if(cardFront) 0f else 180f,
        animationSpec = tween(500)
    )

    Log.d("cardFront", cardFront.toString())
    Log.d("animationDegree", animationDegree.toString())

    Box(modifier = Modifier
        .fillMaxSize()
        .padding(top = 50.dp, bottom = 50.dp, start = 20.dp, end = 20.dp)
        .clickable {
            cardFront = !cardFront
        }
        .graphicsLayer {
            rotationY = animationDegree
        }
        //.background(Color.Gray)
    ) {
        if(animationDegree <= 90) {
            PocketFront()
        } else {
            PocketBack()
        }
    }

}

@Composable
fun PocketFront(){

    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color(0xffffd700), shape = RoundedCornerShape(30.dp))
    ) {

        Box(modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
            .background(Color.Black, shape = RoundedCornerShape(30.dp)),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.card),
                contentDescription = null
            )
        }

    }

}

@Composable
fun PocketBack(){

    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color(0xffffd700), shape = RoundedCornerShape(30.dp))
    ) {

    }

}