package com.ys.bdtp.adm.mvvm.ui.compose

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight.Companion.Bold
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.ys.bdtp.adm.R


@Composable
fun HeadRight(
    role: () -> String,
    click: () -> Unit
) {
    Row(
        modifier = Modifier.height(56.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Box(
            modifier = Modifier.size(56.dp).padding(12.dp)
        ) {
            Image(
                painter = painterResource(R.drawable.bell),
                contentDescription = "",
                modifier = Modifier.fillMaxSize()
            )

            Box(
                modifier = Modifier.size(16.dp).align(Alignment.TopEnd)
            ) {
                Image(
                    painter = painterResource(R.drawable.red_circle),
                    contentDescription = "",
                    modifier = Modifier.align(Alignment.Center)
                )
                Text(
                    text = "2",
                    fontSize = 10.sp,
                    color = Color.White,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }

        Spacer(modifier = Modifier.width(4.dp))
        Spacer(
            modifier = Modifier.width(1.dp).height(24.dp).background(Color(0xFFD8D8D8))
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = role(), fontSize = 16.sp, fontWeight = Bold, color = Color(0xFF1F2329), maxLines = 1)
        Spacer(modifier = Modifier.width(4.dp))

        Row(
            modifier = Modifier
                .height(56.dp)
                .clickable {
                    click()
                }
                .padding(12.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = "",
                Modifier.size(32.dp)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Image(
                painter = painterResource(R.drawable.arrow_down),
                contentDescription = "",
                modifier = Modifier.size(16.dp)
            )
        }
        Spacer(modifier = Modifier.width(20.dp))
    }
}


@Preview
@Composable
fun PreviewTopRight() {
    HeadRight(
        role = { "管家" },
        click = { println("heiheihei") }
    )
}