package com.img.rabbit.pages.screen.other

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Scaffold
import androidx.compose.material3.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.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.img.rabbit.R
import com.img.rabbit.pages.toolbar.TitleBar

@Composable
fun CameraGuideScreen(navController: NavController) {
    Scaffold {
        Box(
            modifier = Modifier.fillMaxSize().background(Color(0xFFF4F4F4))
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.End
            ) {
                Image(
                    painter = painterResource(id = R.mipmap.ic_camera_mask),
                    contentDescription = null,
                    modifier = Modifier.wrapContentSize(),
                )
            }
            TitleBar(navController = navController, paddingValues = it, title = "", showSave = false)

            Column(
                modifier = Modifier.fillMaxSize().padding(top = 104.dp)
            ){
                Text(
                    text = "如何拍照？",
                    color = Color(0xFF1A1A1A),
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(start = 16.dp)
                )
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentHeight()
                        .padding(start = 16.dp, end = 16.dp, top = 20.dp)
                        .background(Color(0xFFFFFFFF),
                            shape = RoundedCornerShape(16.dp)
                        )
                ) {
                    Row (
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(start = 16.dp, end = 16.dp, bottom = 20.dp)
                    ){
                        Text(
                            text = "1.注意光线均匀\n 2.不能耸肩或斜肩\n 3.正对镜头，双耳露出\n 4.不要佩戴眼镜\n 5.注意纯色墙作背景\n 6.避免衣服与背景色相同",
                            color = Color(0xFF1A1A1A),
                            fontSize = 14.sp,
                            fontWeight = FontWeight.Normal,
                            modifier = Modifier.padding(top = 20.dp)
                        )
                        Column(
                            modifier = Modifier
                                .fillMaxWidth().padding(top = 11.dp),
                            horizontalAlignment = Alignment.End
                        ) {
                            Image(
                                painter = painterResource(id = R.mipmap.ic_photo_sample),
                                contentDescription = null,
                                modifier = Modifier.wrapContentSize().align(Alignment.End)
                            )
                        }
                    }
                }

                Text(
                    text = "证件照背景颜色要求",
                    color = Color(0xFF1A1A1A),
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(top = 24.dp, start = 16.dp)
                )

                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentHeight()
                        .padding(start = 16.dp, end = 16.dp, top = 20.dp)
                        .background(Color(0xFFFFFFFF),
                            shape = RoundedCornerShape(16.dp)
                        )
                ) {
                    Row (
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(start = 16.dp, end = 16.dp, top = 18.dp)
                    ){
                        Box(
                            modifier = Modifier
                                .size(18.dp)
                                .align(Alignment.CenterVertically)
                                .background(Color(0xFFFFFFFF), shape = RoundedCornerShape(56.dp))
                                .border(0.5.dp, Color(0xFFAAAAAA), shape = RoundedCornerShape(56.dp))
                        )
                        Text(
                            text = "白色背景：",
                            color = Color(0xFF1A1A1A),
                            fontSize = 12.sp,
                            fontWeight = FontWeight.Bold,
                            lineHeight = 12.sp,
                            modifier = Modifier.padding(start = 4.dp).align(Alignment.CenterVertically)
                        )
                    }
                    Text(
                        text = "用于护照、签证、驾驶证、身份证、二代身份证、驾驶证、黑白证件、医保卡、港澳通行证、护照等。",
                        color = Color(0xFF1A1A1A),
                        fontSize = 12.sp,
                        fontWeight = FontWeight.Normal,
                        lineHeight = 12.sp,
                        modifier = Modifier.padding(top = 12.dp, start = 16.dp, end = 16.dp)
                    )

                    Row (
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(start = 16.dp, end = 16.dp, top = 24.dp)
                    ){
                        Box(
                            modifier = Modifier
                                .size(18.dp)
                                .align(Alignment.CenterVertically)
                                .background(Color(0xFF438EDB), shape = RoundedCornerShape(56.dp))
                                .border(0.5.dp, Color(0xFFAAAAAA), shape = RoundedCornerShape(56.dp))
                        )
                        Text(
                            text = "蓝色背景：",
                            color = Color(0xFF1A1A1A),
                            fontSize = 12.sp,
                            fontWeight = FontWeight.Bold,
                            lineHeight = 12.sp,
                            modifier = Modifier.padding(start = 4.dp).align(Alignment.CenterVertically)
                        )
                    }
                    Text(
                        text = "用于毕业证、工作证、简历等 (蓝色数值为R:0 G:191 B:243 或 C:67 M:Z Y:0 k:0)",
                        color = Color(0xFF1A1A1A),
                        fontSize = 12.sp,
                        fontWeight = FontWeight.Normal,
                        lineHeight = 12.sp,
                        modifier = Modifier.padding(top = 12.dp, start = 16.dp, end = 16.dp)
                    )

                    Row (
                        modifier = Modifier
                            .fillMaxWidth()
                            .wrapContentHeight()
                            .padding(start = 16.dp, end = 16.dp, top = 24.dp)
                    ){
                        Box(
                            modifier = Modifier
                                .size(18.dp)
                                .align(Alignment.CenterVertically)
                                .background(Color(0xFFFF0000), shape = RoundedCornerShape(56.dp))
                                .border(0.5.dp, Color(0xFFAAAAAA), shape = RoundedCornerShape(56.dp))
                        )
                        Text(
                            text = "红色背景：",
                            color = Color(0xFF1A1A1A),
                            fontSize = 12.sp,
                            fontWeight = FontWeight.Bold,
                            lineHeight = 12.sp,
                            modifier = Modifier.padding(start = 4.dp).align(Alignment.CenterVertically)
                        )
                    }
                    Text(
                        text = "用于保险、医保、IC卡、暂住证、结婚照 (红色数值为R:255 G:0 B:0 或 C:0 M:99 Y:100 K: 0)",
                        color = Color(0xFF1A1A1A),
                        fontSize = 12.sp,
                        fontWeight = FontWeight.Normal,
                        lineHeight = 12.sp,
                        modifier = Modifier.padding(top = 12.dp, start = 16.dp, end = 16.dp)
                    )

                    Box(modifier = Modifier
                        .fillMaxWidth()
                        .height(16.dp))
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun PreviewCameraGuideScreen() {
    CameraGuideScreen(navController = NavController(LocalContext.current))
}
