package com.ys.bdtp.adm.mvvm.ui.screen.offline

import androidx.compose.foundation.BorderStroke
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.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.material.TextButton
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.ys.bdtp.adm.R
import com.ys.bdtp.adm.app.theme.bgBlueColor

@Composable
fun OfflineHeadSyncMiddle() {
    Box(
        modifier = Modifier
            .width(300.dp)
            .height(52.dp)
    ) {
        Row(modifier = Modifier.align(Alignment.Center)) {
            TextButton(
                onClick = {},
                modifier = Modifier
                    .width(139.dp)
                    .height(32.dp),
                colors = ButtonDefaults.textButtonColors(
                    backgroundColor = bgBlueColor,
                    contentColor = Color.White
                ),
                shape = RoundedCornerShape(
                    topStart = 4.dp,
                    bottomStart = 4.dp,
                    topEnd = 0.dp,
                    bottomEnd = 0.dp
                ),
                contentPadding = PaddingValues()
            ) {
                Text(text = "全部同步")
            }
            Box {
                TextButton(
                    onClick = {},
                    modifier = Modifier
                        .width(140.dp)
                        .height(32.dp),
                    colors = ButtonDefaults
                        .textButtonColors(
                            backgroundColor = Color.White,
                            contentColor = Color(0xFFD5D5D5)
                        ),
                    shape = RoundedCornerShape(
                        topStart = 0.dp,
                        bottomStart = 0.dp,
                        topEnd = 4.dp,
                        bottomEnd = 4.dp
                    ),
                    border = BorderStroke(width = 1.dp, color = Color(0xFFC3C7CB)),
                    contentPadding = PaddingValues()
                ) {
                    Text(text = "停止同步", fontSize = 14.sp)
                }
                Spacer(modifier = Modifier.width(1.dp).height(32.dp).background(Color(0xFF0091FF)))
            }
        }

        Box(
            modifier = Modifier
                .width(18.dp)
                .height(18.dp),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(R.drawable.red_circle),
                contentDescription = "",
                modifier = Modifier.fillMaxSize()
            )
            Text(text = "3", color = Color.White, fontSize = 12.sp)
        }
    }
}

@Composable
fun OfflineHeadSyncingMiddle() {
    Box(
        modifier = Modifier
            .width(300.dp)
            .height(52.dp)
    ) {
        Row(
            modifier = Modifier
                .align(Alignment.Center)
                .background(
                    color = Color.White, shape = RoundedCornerShape(
                        topStart = 4.dp,
                        bottomStart = 4.dp,
                        topEnd = 4.dp,
                        bottomEnd = 4.dp
                    )
                )
                .border(
                    width = 1.dp,
                    color = Color(0xFFC3C7CB),
                    shape = RoundedCornerShape(
                        topStart = 4.dp,
                        bottomStart = 4.dp,
                        topEnd = 4.dp,
                        bottomEnd = 4.dp
                    )
                )
        ) {
            TextButton(
                onClick = {},
                modifier = Modifier
                    .width(139.dp)
                    .height(32.dp),
                colors = ButtonDefaults
                    .textButtonColors(
                        backgroundColor = Color.White,
                        contentColor = Color(0xFF1F2429)
                    ),
                contentPadding = PaddingValues()
            ) {
                Text(text = "数据下载同步中", fontSize = 14.sp)
            }

            Spacer(modifier = Modifier.width(1.dp).height(32.dp).background(Color(0xFFC3C7CB)))

            TextButton(
                onClick = {},
                modifier = Modifier
                    .width(139.dp)
                    .height(32.dp),
                colors = ButtonDefaults
                    .textButtonColors(
                        backgroundColor = Color.White,
                        contentColor = Color(0xFFD5D5D5)
                    ),
                contentPadding = PaddingValues()
            ) {
                Text(text = "停止同步", fontSize = 14.sp)
            }
        }

        Box(
            modifier = Modifier
                .width(18.dp)
                .height(18.dp),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(R.drawable.red_circle),
                contentDescription = "",
                modifier = Modifier.fillMaxSize()
            )
            Text(text = "3", color = Color.White, fontSize = 12.sp)
        }
    }
}


@Preview
@Composable
fun PreviewOfflineHeadMiddle() {
    OfflineHeadSyncMiddle()
}


@Preview
@Composable
fun PreviewOfflineHeadSyncingMiddle() {
    OfflineHeadSyncingMiddle()
}