package com.lanyun.wanglaotou.public

import android.graphics.Paint.Align
import android.view.MenuItem
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.lanyun.wanglaotou.R
import com.lanyun.wanglaotou.ui.theme.red
import com.lanyun.wanglaotou.viewModel.LoginViewAction
import rx.internal.operators.OnSubscribeSwitchIfEmpty

/**
 * 标题栏
 */
@Composable
fun AppBar(
    title: String = "",
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    leftIcon: ImageVector? = null,
    rightIcon: ImageVector? = null,
    onLeftClick: () -> Unit = {},
    onRightClick: () -> Unit = {}
) {

    TopAppBar(
        backgroundColor = MaterialTheme.colors.primary,
        modifier = Modifier.height(54.dp),
        elevation = elevation,
    ) {

        Box(
            contentAlignment = Alignment.Center
        ) {

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                //左边图标
                if (leftIcon == null)
                    Spacer(modifier = Modifier.size(10.dp))
                else
                    Icon(leftIcon, contentDescription = null, modifier = Modifier
                        .clickable {
                            onLeftClick()
                        }
                        .padding(start = 10.dp), tint = MaterialTheme.colors.background)

                //右边图标
                rightIcon?.let {
                    Icon(rightIcon, contentDescription = null,
                        Modifier
                            .clickable {
                                onRightClick()
                            }
                            .padding(end = 10.dp), tint = MaterialTheme.colors.background)
                }
            }

            //标题文字
            Text(
                text = title,
                textAlign = TextAlign.Center,
                fontSize = 18.sp,
                color = MaterialTheme.colors.background
            )
        }
    }
}



/**
 * 标题栏
 */
@Composable
fun AppBarDropDown(
    title: String = "",
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    menuIsRight: Boolean = false,
    items: List<String>,
    leftIcon: ImageVector? = null,
    rightIcon: ImageVector? = null,
    onLeftClick: () -> Unit = {},
    onRightClick: () -> Unit = {},
    onItemSelected: (Int) -> Unit= {}
) {

    TopAppBar(
        backgroundColor = MaterialTheme.colors.primary,
        modifier = Modifier.height(54.dp),
        elevation = elevation,
    ) {

        Box(
            contentAlignment = Alignment.Center
        ) {

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                if (!menuIsRight){
                    if (items.isNotEmpty()){
                        FollowMouseDropdownMenu(items = items, onItemSelected = onItemSelected)
                    }
                }
                //左边图标
                if (leftIcon == null)
                    Spacer(modifier = Modifier.size(10.dp))
                else
                    Icon(leftIcon, contentDescription = null, modifier = Modifier
                        .clickable {
                            onLeftClick()
                        }
                        .padding(start = 10.dp), tint = MaterialTheme.colors.background)

                //右边图标
                rightIcon?.let {
                    Icon(rightIcon, contentDescription = null,
                        Modifier
                            .clickable {
                                onRightClick()
                            }
                            .padding(end = 10.dp), tint = MaterialTheme.colors.background)
                }

                if (menuIsRight){
                    if (items.isNotEmpty()){
                        FollowMouseDropdownMenu(items = items, onItemSelected = onItemSelected)
                    }
                }
            }

            //标题文字
            Text(
                text = title,
                textAlign = TextAlign.Center,
                fontSize = 18.sp,
                color = MaterialTheme.colors.background
            )
        }
    }
}

/**
 * 带输入框的标题栏
 */
@Composable
fun AppBar(
    textFieldValue: TextFieldValue,
    onValueChange: (changeValue: TextFieldValue) -> Unit,
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    leftIcon: ImageVector? = null,
    rightIcon: ImageVector? = null,
    onLeftClick: () -> Unit = {},
    onRightClick: () -> Unit = {}
) {

    TopAppBar(
        backgroundColor = MaterialTheme.colors.primary,
        modifier = Modifier.height(54.dp),
        elevation = elevation,
    ) {

        Box(
            contentAlignment = Alignment.Center
        ) {

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                //左边图标
                if (leftIcon == null)
                    Spacer(modifier = Modifier.size(10.dp))
                else
                    Icon(leftIcon, contentDescription = null, modifier = Modifier.clickable {
                        onLeftClick()
                    }.padding(start = 10.dp), tint = MaterialTheme.colors.background)

                //右边图标
                rightIcon?.let {
                    Icon(rightIcon, contentDescription = null, Modifier.clickable {
                        onRightClick()
                    }.padding(end = 10.dp), tint = MaterialTheme.colors.background)
                }
            }

            //标题文字
            TextField(
                value = textFieldValue,
                onValueChange = { changeValue ->
                    onValueChange(changeValue)
                },
                //单行
                singleLine = true,
                colors = TextFieldDefaults.textFieldColors(
                    //文字
                    textColor = MaterialTheme.colors.background,
                    //背景
                    backgroundColor = MaterialTheme.colors.primary,
                    //光标
                    cursorColor = MaterialTheme.colors.background,
                    //当输入框处于/不处于焦点时，底部指示器的颜色
                    focusedIndicatorColor = MaterialTheme.colors.primary,
                    unfocusedIndicatorColor = MaterialTheme.colors.primary
                ),
                label = {
                    Text("输入关键字搜索", color = Color.Gray)
                },
                keyboardOptions = KeyboardOptions(
                    //图标
                    imeAction = ImeAction.Search,
                ),
                keyboardActions = KeyboardActions(
                    onSearch = {
                        onRightClick()
                    }
                )
            )
        }
    }

}

@Composable
fun AppSearchViewBar(
    textFieldValue: TextFieldValue,
    title: String = "",
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    leftIcon: ImageVector? = null,
    rightIcon: ImageVector? = null,
    onLeftClick: () -> Unit = {},
    onRightClick: () -> Unit = {},
    onValueChange:(changeValue: TextFieldValue) -> Unit = {}
) {
    var isSearchView by remember {
        mutableStateOf(false)
    }


    TopAppBar(
        backgroundColor = MaterialTheme.colors.primary,
        modifier = Modifier.height(54.dp),
        elevation = elevation,
    ) {

        Box(
            contentAlignment = Alignment.Center
        ) {

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                //左边图标
                if (leftIcon == null)
                    Spacer(modifier = Modifier.size(10.dp))
                else
                    Icon(leftIcon, contentDescription = null, modifier = Modifier
                        .clickable {
                            onLeftClick()
                        }
                        .padding(start = 10.dp), tint = MaterialTheme.colors.background)

                if (isSearchView){
                    Icon(
                        Icons.Default.Delete, contentDescription = null, modifier = Modifier
                        .clickable {
                            isSearchView = !isSearchView
                            onRightClick()
                        }
                        .padding(start = 10.dp), tint = MaterialTheme.colors.background)
                } else {
                    //右边图标
                    rightIcon?.let {
                        Icon(rightIcon, contentDescription = null,
                            Modifier
                                .clickable {
                                    isSearchView = !isSearchView
                                    onRightClick()
                                }
                                .padding(end = 10.dp), tint = MaterialTheme.colors.background)
                }

                }
            }
            if (isSearchView){
                TextField(
                    value = textFieldValue,
                    onValueChange = { changeValue ->
                        onValueChange(changeValue)
                    },
                    //单行
                    singleLine = true,
                    colors = TextFieldDefaults.textFieldColors(
                        //文字
                        textColor = MaterialTheme.colors.background,
                        //背景
                        backgroundColor = MaterialTheme.colors.primary,
                        //光标
                        cursorColor = MaterialTheme.colors.background,
                        //当输入框处于/不处于焦点时，底部指示器的颜色
                        focusedIndicatorColor = MaterialTheme.colors.primary,
                        unfocusedIndicatorColor = MaterialTheme.colors.primary
                    ),
                    label = {
                        Text("输入关键字搜索", color = Color.Gray)
                    },
                    keyboardOptions = KeyboardOptions(
                        //图标
                        imeAction = ImeAction.Search,
                    ),
                    keyboardActions = KeyboardActions(
                        onSearch = {
                            onRightClick()
                        }
                    )
                )
            }
            else {
                //标题文字
                Text(
                    text = title,
                    textAlign = TextAlign.Center,
                    fontSize = 18.sp,
                    color = MaterialTheme.colors.background
                )
            }
        }
    }
}