package com.example.wechat.ui

import androidx.compose.Composable
import androidx.ui.core.Alignment
import androidx.ui.core.Modifier
import androidx.ui.foundation.*
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.*
import androidx.ui.res.imageResource
import androidx.ui.text.font.FontStyle
import androidx.ui.text.style.TextAlign
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.TextUnit
import androidx.ui.unit.dp
import com.example.wechat.R

class PersonalPage {
    companion object{

        @Composable
        fun TopBar(title:String){
            TopAppBar(
                    title = { Text(
                            text = title,
                            color = Color.White
                    )},
                    backgroundColor = wechat_blue
            )
        }
        @Composable
        fun AppContent(){
            Surface(color = back_gray,modifier = Modifier.fillMaxHeight().fillMaxWidth()) {
                Column {
                    IdCard()
                    Spacer(modifier = Modifier.height(20.dp))
                    UtilList(imgRes = R.drawable.item_icon_collection, title = "收藏")
                    UtilList(imgRes = R.drawable.item_icon_card_wall, title = "名片")
                    UtilList(imgRes = R.drawable.item_icon_redenv, title = "红包")
                    Spacer(modifier = Modifier.preferredHeight(10.dp))
                    UtilList(imgRes = R.drawable.item_icon_setting, title = "设置")
                }
            }
        }
        @Composable
        fun bottomBox(id:Int,title:String){
            val my = imageResource(id = id)
            Column(modifier = Modifier.preferredSize(90.dp,44.dp),horizontalGravity = Alignment.CenterHorizontally) {
                Image(my,modifier = Modifier.preferredSize(30.dp,30.dp))
                Text(title,fontSize = TextUnit.Sp(12),color = text_gray)
            }
        }
        @Composable
        fun BottomBar(){
            BottomAppBar(backgroundColor = Color.White) {
                bottomBox(id = R.drawable.relax_mode_off_duty, title = "消息")
                bottomBox(id = R.drawable.relax_mode_off_duty, title = "通讯录")
                bottomBox(id = R.drawable.relax_mode_off_duty, title = "工作台")
                bottomBox(id = R.drawable.relax_mode_off_duty, title = "我")
            }
        }
        @Composable
        fun myDivider(){
            Divider(color = back_gray)
        }
        @Composable
        fun IdCard(){
            Box(backgroundColor =  text_gray,modifier = Modifier.padding(15.dp,15.dp,15.dp,0.dp)){
                Column(modifier = Modifier.drawBackground(Color.White).padding(20.dp,20.dp,20.dp,0.dp)) {
                        Row {
                            val img = imageResource(id = R.drawable.enterprise_verifyed_icon_ss)
                            Text(text = "腾讯", modifier = Modifier.wrapContentWidth().preferredHeight(22.dp), textAlign = TextAlign.End)
                            Image(img, modifier = Modifier.preferredSize(22.dp, 22.dp))
                            Spacer(modifier = Modifier.preferredWidth(200.dp))
                            val myImage = imageResource(id = R.drawable.my_img)
                            Image(myImage, modifier = Modifier.preferredSize(54.dp, 54.dp))
                        }

                        Column(modifier = Modifier.preferredSize(163.dp, 96.dp)) {
                            Text(text = "tsinghualei", fontSize = TextUnit.Companion.Sp(25), fontStyle = FontStyle.Normal)
                            Spacer(modifier = Modifier.height(5.dp))
                            Text(text = "雷清桦", color = text_gray, fontSize = TextUnit.Companion.Sp(15))
                            Text(text = "Android开发组员工", color = text_gray, fontSize = TextUnit.Sp(15))
                        }
                        myDivider()
                        Row(modifier = Modifier.preferredHeight(45.dp),
                                verticalGravity = Alignment.CenterVertically) {
                            Text(text = "请加我的企业微信", color = text_gray, fontSize = TextUnit.Sp(15))
                            val qrImg = imageResource(id = R.drawable.qrcode_small_black)
                            val next = imageResource(id = R.drawable.next_dark_gary)
                            Spacer(modifier = Modifier.preferredWidth(160.dp))
                            Image(qrImg, modifier = Modifier.preferredSize(15.dp, 15.dp))
                            Image(next, modifier = Modifier.height(15.dp).width(15.dp))
                        }
                    }
            }
        }
        @Composable
        fun UtilList(imgRes:Int,title: String){
            val img = imageResource(id = imgRes)
            val next = imageResource(id = R.drawable.next_dark_gary)
            myDivider()
            Row(modifier = Modifier.drawBackground(Color.White)
                    .fillMaxWidth()
                    .height(50.dp),
                    verticalGravity = Alignment.CenterVertically
                    ) {
                Spacer(modifier = Modifier.preferredWidth(14.dp))
                Image(img,modifier = Modifier.preferredSize(26.dp))
                Spacer(modifier = Modifier.preferredWidth(14.dp))
                Text(
                       text = title,
                        textAlign = TextAlign.Center
                )
                Spacer(modifier = Modifier.preferredWidth(250.dp))
                Image(next,
                        modifier = Modifier.preferredSize(15.dp,15.dp)
                )
            }
        }
    }
    @Preview
    @Composable
    fun defaultPreview(){
        AppContent()
    }
}