package com.example.kmptpc_compose_sample.demos.foundation

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

/**
 * Demo 用于测试 TextFieldScroll 实现（OHOS 参考 iOS）。
 * 使用 BasicTextField(value, onValueChange) 以走 CoreTextField 路径，才会应用 textFieldScroll。
 *
 * - 垂直滚动：固定高度多行，内容超出时内部滚动，光标移动时自动滚到「光标上一行」。
 * - 水平滚动：单行 + singleLine=true，长文本不换行，左右滑动查看。
 */
@Composable
internal fun FoundationTextFieldScrollDemo() {
    val scrollState = rememberScrollState()
    var verticalText by remember {
        mutableStateOf(
            "第一行\n" +
            "第二行\n" +
            "第三行\n" +
            "第四行\n" +
            "第五行\n" +
            "第六行\n" +
            "第七行\n" +
            "第八行\n" +
            "第九行\n" +
            "第十行\n" +
            "继续输入或移动光标，观察内容是否自动滚动以保持光标可见。\n" +
            "在 OHOS 上应表现为：滚动到「光标上一行」可见（与 iOS 一致）。"
        )
    }
    var horizontalText by remember {
        mutableStateOf(
            "这是一行很长的占位文字，用于测试水平滚动。继续往右输入或移动光标到末尾，应能左右滑动查看。" +
            "我们再多写一些内容以延长这一行，确保能够触发滚动行为：这里是一些补充的句子，使用更多汉字和标点符号，让这一行尽可能变得更长。" +
            "可以尝试在此基础上添加英文 mixed with English words to further increase the line length. 滚动条应当能够正确响应这一超长内容。输入光标也应该能自动滚动到可见区域。" +
            "最后，再加上一些重复的短语：测试滚动，测试滚动，测试滚动，测试滚动。"
        )
    }

    Column(
        modifier = Modifier
            .verticalScroll(scrollState)
            .padding(16.dp)
    ) {
        Text(
            "TextFieldScroll 测试",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.padding(bottom = 8.dp)
        )
        Text(
            "单点 tap 与多击选词/选段共用同一 PointerInput、竞争同一 down，且没有把“第一次 down 留给选词/选段以统计点击次数”的约定；在可滚动文本框上，这种竞争对选词/选段更不利，所以表现为“有滚动时没有双击/三击选中”。",
            style = MaterialTheme.typography.caption,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Text(
            "下方使用 BasicTextField(value/onValueChange) 以走 CoreTextField，才会应用 textFieldScroll。垂直：多行+固定高度；水平：singleLine 不换行。",
            style = MaterialTheme.typography.caption,
            modifier = Modifier.padding(bottom = 16.dp)
        )

        // 垂直滚动：固定高度多行（CoreTextField 路径 → textFieldScroll）
        Text(
            "1. 垂直滚动（多行）",
            style = MaterialTheme.typography.subtitle1,
            modifier = Modifier.padding(bottom = 8.dp)
        )
        BasicTextField(
            value = verticalText,
            onValueChange = { verticalText = it },
            modifier = Modifier
                .fillMaxWidth()
                .height(140.dp)
                .border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
                .padding(8.dp),
            singleLine = false,
            maxLines = Int.MAX_VALUE
        )

        Spacer(Modifier.height(24.dp))

        // 水平滚动：单行不换行，窄宽度，长文本左右滑动
        Text(
            "2. 水平滚动（单行）",
            style = MaterialTheme.typography.subtitle1,
            modifier = Modifier.padding(bottom = 8.dp)
        )
        BasicTextField(
            value = horizontalText,
            onValueChange = { horizontalText = it },
            modifier = Modifier
                .fillMaxWidth()
                .widthIn(max = 280.dp)
                .height(48.dp)
                .border(1.dp, Color.Blue, RoundedCornerShape(4.dp))
                .padding(horizontal = 8.dp, vertical = 12.dp),
            singleLine = true
        )
    }
}
