@Composable
fun Text(
    text: String, // 需要顯示的文本
    modifier: Modifier = Modifier,// 修飾符
    color: Color = Color.Unspecified, // 文字顏色
    fontSize: TextUnit = TextUnit.Unspecified,// 文字大小
    fontStyle: FontStyle? = null, // 繪制文本時(shí)使用的字體變換，如斜體
    fontWeight: FontWeight? = null, // 文字的粗細(xì)
    fontFamily: FontFamily? = null,// 文字的字體
    letterSpacing: TextUnit = TextUnit.Unspecified, // 文本間距
    textDecoration: TextDecoration? = null, // 文字裝飾，如下劃線，刪除線等
    textAlign: TextAlign? = null, // 文本的對(duì)齊方式
    lineHeight: TextUnit = TextUnit.Unspecified, // 文本行間距
    overflow: TextOverflow = TextOverflow.Clip,// 文本溢出時(shí)的視覺(jué)效果，比如超出的文字用三個(gè)點(diǎn)表示
    softWrap: Boolean = true,// 控制文本是否能夠換行，如果為false，則會(huì)定位
    maxLines: Int = Int.MAX_VALUE,// 文本最多的展示行數(shù)
    onTextLayout: (TextLayoutResult) -> Unit = {},// 在文本發(fā)生變化之后，會(huì)回調(diào)一個(gè)TextLayoutResult,包含此文本的各種信息
    style: TextStyle = LocalTextStyle.current // 文本的風(fēng)格配置，如顏色，字體，行高等
)

        // 指定字符串
        Text(text = "Hello World")
        // 指定文字資源
        Text(text = stringResource(id = R.string.app_name))

@Composable
fun TextStyleDemo() {
    Column {
        Text(
            text = "Zhongxj",
            style = TextStyle(
                fontSize = 25.sp,
                fontWeight = FontWeight.Bold,
                background = Color.Cyan,
                lineHeight = 35.sp
            )
        )
        Text(
            text = stringResource(id = R.string.app_name), style = TextStyle(
                color = Color.Cyan,
                letterSpacing = 4.sp
            )
        )
        Text(
            text = "Hello world", style = TextStyle(
                textDecoration = TextDecoration.LineThrough
            )
        )
        Text(
            text = "Walt-zhong",
            style = MaterialTheme.typography.h6.copy(fontStyle = FontStyle.Italic)
        )
    }
}

@Composable
fun MaxLinesDemo() {
    Column {
        Text(
            text = "在Compose中，每一個(gè)組件都是帶有@Compose注解的函數(shù)，被稱為Composable。" +
                    "Compose已經(jīng)預(yù)置了很多的Compose UI組件，這些組件都是基于Material Design規(guī)范設(shè)計(jì)的",
            style = MaterialTheme.typography.body1,
            color = Color.Red
        )
        Spacer(modifier = Modifier.size(10.dp))
        Text(
            text = "在Compose中，每一個(gè)組件都是帶有@Compose注解的函數(shù)，被稱為Composable。" +
                    "Compose已經(jīng)預(yù)置了很多的Compose UI組件，這些組件都是基于Material Design規(guī)范設(shè)計(jì)的",
            style = MaterialTheme.typography.body1,
            maxLines = 1,
            color = Color.Green
        )
        Spacer(modifier = Modifier.size(10.dp))
        Text(
            text = "在Compose中，每一個(gè)組件都是帶有@Compose注解的函數(shù)，被稱為Composable。" +
                    "Compose已經(jīng)預(yù)置了很多的Compose UI組件，這些組件都是基于Material Design規(guī)范設(shè)計(jì)的",
            style = MaterialTheme.typography.body1,
            maxLines = 1,
            color = Color.Blue,
            overflow = TextOverflow.Ellipsis
        )
    }
}

@Composable
fun FontFamilyDemo() {
    Column {
        Text(text = "Hello World", color = Color.Red)
        Spacer(modifier = Modifier.size(10.dp))
        Text(text = "Hello World", color = Color.Green, fontFamily = FontFamily.Monospace)
        Spacer(modifier = Modifier.size(10.dp))
        Text(text = "Hello World", color = Color.Blue, fontFamily = FontFamily.Cursive)
    }
}

@Composable
fun AnnotatedStringDemo() {
    Text(text = buildAnnotatedString {
        withStyle(style = SpanStyle(fontSize = 24.sp)) {
            append("I am Iron man,我是鋼鐵俠")
        }
        withStyle(style = SpanStyle(fontWeight = FontWeight.W900, fontSize = 24.sp)) {
            append("zhongxj")
        }
        append("\n")
        withStyle(style = ParagraphStyle(lineHeight = 25.sp)) {
            append(
                "在Compose中，每一個(gè)組件都是帶有@Compose注解的函數(shù)，被稱為Composable。" +
                        "Compose已經(jīng)預(yù)置了很多的Compose UI組件，這些組件都是基于Material Design規(guī)范設(shè)計(jì)的"
            )
        }
        append("\n")
        append("Now,We are working hard")
        append(annotatedText)
    })
}

@Composable
fun ClickTextDemo() {
    ClickableText(text = annotatedText, onClick = { offset ->
        annotatedText.getStringAnnotations(
            tag = "URL",
            start = offset,
            end = offset
        ).firstOrNull()?.let {
            Log.d("zhongxj", "click me, content: $it")
        }
    })
}
val annotatedText = buildAnnotatedString {
    withStyle(style = ParagraphStyle(lineHeight = 25.sp)) {
        append(
            "在Compose中，每一個(gè)組件都是帶有@Compose注解的函數(shù)，被稱為Composable。" +
                    "Compose已經(jīng)預(yù)置了很多的Compose UI組件，這些組件都是基于Material Design規(guī)范設(shè)計(jì)的"
        )
    }
    append("\n")
    pushStringAnnotation(tag = "URL", annotation = "http://xxxxx")
    withStyle(
        style = SpanStyle(
            fontWeight = FontWeight.W900,
            textDecoration = TextDecoration.Underline,
            color = Color(0xFF59A869)
        )
    ) {
        append("點(diǎn)擊我，了解更多")
    }
}

@Composable
fun SelectionContainerDemo() {
    SelectionContainer {
        Text(text = "我是可以被復(fù)制的文字")
    }
}

@Composable
fun TextField(
    value: String, // 輸入框顯示的文本
    onValueChange: (String) -> Unit, // 當(dāng)輸入框內(nèi)的文字發(fā)生改變時(shí)的回調(diào)，其中帶有最新的文本參數(shù)
    modifier: Modifier = Modifier,// 修飾符
    enabled: Boolean = true,// 是否啟用
    readOnly: Boolean = false, // 控制輸入框的可編輯狀態(tài)
    textStyle: TextStyle = LocalTextStyle.current, // 輸入框內(nèi)文字樣式
    label: @Composable (() -> Unit)? = null, // 可選的標(biāo)簽，將顯示在輸入框內(nèi)
    placeholder: @Composable (() -> Unit)? = null, // 占位符，當(dāng)輸入框處于焦點(diǎn)位置且輸入框文本為空時(shí)顯示
    leadingIcon: @Composable (() -> Unit)? = null, // 輸入框開(kāi)頭的前置圖標(biāo)
    trailingIcon: @Composable (() -> Unit)? = null,// 輸入框末尾的后置圖標(biāo)
    isError: Boolean = false, // 指示輸入框當(dāng)前值是否有錯(cuò)，當(dāng)值為true時(shí)，標(biāo)簽底部指示器和尾部圖標(biāo)將以錯(cuò)誤的顏色顯示
    visualTransformation: VisualTransformation = VisualTransformation.None,// 輸入框內(nèi)的文字視覺(jué)
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, // 軟鍵盤選項(xiàng)，包含鍵盤類型和ImeAction等配置
    keyboardActions: KeyboardActions = KeyboardActions(), // 當(dāng)輸入服務(wù)發(fā)出一個(gè)IME動(dòng)作時(shí)，相應(yīng)的回調(diào)被調(diào)用
    singleLine: Boolean = false,// 輸入框是否只能輸入一行
    maxLines: Int = Int.MAX_VALUE, // 輸入框能輸入的最大行數(shù)
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 監(jiān)聽(tīng)組件的狀態(tài)便于自定義
    // 組件不同狀態(tài)下的樣式
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),// 輸入框的外觀形狀
    colors: TextFieldColors = TextFieldDefaults.textFieldColors() // 輸入框的顏色組
) 

@Composable
fun TextFieldDemo() {
    var text by remember {
        mutableStateOf("")
    }
    TextField(value = text, onValueChange = {
        text = it
    },
        label = { Text(text = "用戶名") })
}

@Composable
fun TextFieldWithDec() {
    var username by remember {
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }
    Column {
        TextField(value = username, onValueChange = {
            username = it
        }, label = { Text(text = "用戶名") }, leadingIcon = {
            Icon(imageVector = Icons.Filled.AccountBox, contentDescription = "用戶名")
        })
        TextField(value = password, onValueChange = {
            password = it
        }, label = { Text(text = "密碼") }, trailingIcon = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    painter = painterResource(id = R.drawable.password),
                    modifier = Modifier.size(16.dp),
                    contentDescription = "password"
                )
            }
        })
    }
}

@Composable
fun OutlineTextFieldDemo()
{
    var text by remember {
        mutableStateOf("")
    }
    OutlinedTextField(value = text, onValueChange = {text = it},
        label = { Text(text = "用戶名")})
}

@Composable
fun BasicTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = TextStyle.Default,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {}, // 當(dāng)輸入框文本更新時(shí)的回調(diào)包括當(dāng)前文本的各種信息
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    cursorBrush: Brush = SolidColor(Color.Black), // 輸入框光標(biāo)的顏色
    decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
        @Composable { innerTextField -> innerTextField() } // 允許在TextField周圍添加修飾的Composable lambda,需要在布局中
        // 中調(diào)用innerTextField()才能完成TextField的創(chuàng)建
)

@Composable
fun SearchBar() {
    var text by remember {
        mutableStateOf("")
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFD3D3D3)),
        contentAlignment = Alignment.Center
    )
    {
        BasicTextField(value = text, onValueChange = {
            text = it
        }, decorationBox = { innerTextField ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)
            ) {
                Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                Box(
                    modifier = Modifier.padding(horizontal = 10.dp),
                    contentAlignment = Alignment.CenterStart
                ) {
                    if (text.isEmpty()) {
                        Text(
                            text = "請(qǐng)輸入", style = TextStyle(
                                color = Color(0, 0, 0, 128)
                            )
                        )
                    }
                    innerTextField()
                }
                Box(
                    modifier = Modifier.fillMaxWidth(),
                    contentAlignment = Alignment.CenterEnd
                ) {
                    if (text.isNotEmpty()) {
                        IconButton(onClick = { text = "" }, modifier = Modifier.size(16.dp)) {
                            Icon(
                                imageVector = Icons.Filled.Close, contentDescription = null
                            )
                        }
                    }
                }
            }
        }, modifier = Modifier
            .padding(horizontal = 10.dp)
            .background(Color.White, CircleShape)
            .height(30.dp)
            .fillMaxWidth()
        )
    }
}