Fastestvpn_JetpackCompose/app/src/main/java/com/vpn/fastestvpnservice/screensTV/SettingsScreenTV.kt

package com.vpn.fastestvpnservice.screensTV

import android.app.Activity
import android.content.Context
import android.content.Intent
import android.os.Build
import android.os.Bundle
import android.os.Handler
import android.util.Log
import androidx.activity.compose.BackHandler
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.LocalOverscrollConfiguration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DockedSearchBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.content.ContextCompat
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import androidx.navigation.compose.currentBackStackEntryAsState
import com.vpn.fastestvpnservice.R
import com.vpn.fastestvpnservice.beans.isDarkTheme
import com.vpn.fastestvpnservice.beans.themesList
import com.vpn.fastestvpnservice.constants.smartConnect
import com.vpn.fastestvpnservice.customItems.ServerSpecificItem
import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
import com.vpn.fastestvpnservice.navigation.customNavigation
import com.vpn.fastestvpnservice.navigation.isFirstItemPressed
import com.vpn.fastestvpnservice.navigation.isSecondItemFocused
import com.vpn.fastestvpnservice.navigation.isSecondItemPressed
import com.vpn.fastestvpnservice.navigation.isSettingsScreenPressed
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettings
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.getAvailableProtocols
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.vpnConnectionsUtil
import com.vpn.fastestvpnservice.screens.searchListViewModelSplash
import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
import com.vpn.fastestvpnservice.sealedClass.Screen
import com.vpn.fastestvpnservice.utils.isTablet
import com.vpn.fastestvpnservice.viewmodels.HomeViewModel
import de.blinkt.openvpn.core.App
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SettingsTV(navHostController: NavHostController) {
    val context = LocalContext.current
    val focusRequester1 = remember { FocusRequester() }
    val focusRequester2 = remember { FocusRequester() }
    val focusRequester3 = remember { FocusRequester() }
    val focusRequester4 = remember { FocusRequester() }
    val focusRequester5 = remember { FocusRequester() }

    if (isSettingsScreenPressed.value) {
        LaunchedEffect(Unit) {
            focusRequester1.requestFocus()
        }
        isSettingsScreenPressed.value = false
    }
    val navBackStackEntry = navHostController.currentBackStackEntryAsState()

    BackHandler {
//        Toast.makeText(
//            context, "BackHandler Settings TV - ${isSecondItemFocused.value}", Toast.LENGTH_SHORT
//        ).show()
        if (isSecondItemFocused.value) {
            navHostController.popBackStack()
            isFirstItemPressed.value = true
//            customNavigation(navHostController, BottomBarScreen.Home)
        } else {
            isSecondItemPressed.value = true
        }
    }

    CompositionLocalProvider(
        LocalOverscrollConfiguration provides null
    ) {
        Box(
            modifier = Modifier
//            .background(MaterialTheme.colorScheme.background)
                .background(colorResource(id = R.color.background_color_gray))
                .fillMaxSize()
                .padding(vertical = 10.dp),
        ) {
            val view = LocalView.current
            val window = (view.context as Activity).window
            window.statusBarColor = Color.Transparent.toArgb()
            window.navigationBarColor = Color.Transparent.toArgb()



            Column(
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.Start,
                modifier = Modifier
                    .padding(start = 16.dp, end = 0.dp)
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState())
                    .background(Color.Transparent)
            ) {
//                if (BottomBarScreen.Settings.isTrue) {
//                    AddRowSettingsSmart(
//                        icon = R.drawable.smart_connect3x,
//                        text = "Smart Connect",
//                        isRowShown = false,
//                        isSheetShown = true,
//                        navHostController
//                    )
//                }

                Spacer(modifier = Modifier.height(50.dp))
                AddTextSettingsTV(
                    text = "Settings",
                    size = 28.sp,
                    color = MaterialTheme.colorScheme.inversePrimary,
                    style = MaterialTheme.typography.headlineLarge
                )
                Spacer(modifier = Modifier.height(22.dp))

                AddRowSettingsColumnTV(
                    icon = R.drawable.vpn_protocols3x,
                    text = "VPN Protocols",
                    focusRequester1,
                    focusRequester2,
                    navHostController
                )
                AddRowSettingsSmartTV(
                    icon = R.drawable.smart_connect3x,
                    text = "Smart Connect",
                    isRowShown = true,
                    isSheetShown = false,
                    navHostController,
                    focusRequester2,
                    focusRequester3
                )
                AddRowSwitchTV(
                    icon = R.drawable.adblock3x,
                    text = "AdBlock",
                    focusRequester3
                )
                AddRowSettingsTV(
                    icon = R.drawable.kill_switch3x,
                    text = "Kill Switch",
                    topPadding = 40.dp,
                    onClick = {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                            gotoVPNSettingsTV(context)
                        }
                    }
                )
                AddRowSettingsTV(
                    icon = R.drawable.split_tunneling3x,
                    text = "Split Tunneling",
                    onClick = { navHostController.navigate(Screen.SplitTunneling.route) }
                )
                AddRowSettingsTV(
                    icon = R.drawable.notification3x,
                    text = "Notifications",
                    onClick = { navHostController.navigate(Screen.Notifications.route) },
                    isLastRow = true
                )
//                AddRowDarkLightThemeTV(
//                    icon = Icons.Default.DarkMode,
//                    text = "Theme")
            }
        }
    }

}

private fun gotoVPNSettingsTV(context: Context) {
    try {
        val intent = Intent("android.net.vpn.SETTINGS")
        intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK
        ContextCompat.startActivity(context, intent, Bundle())
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

@Composable
fun ColumnScope.AddRowSettingsTV(
    icon: Int,
    text: String,
    topPadding: Dp = 40.dp,
    onClick: () -> Unit,
    isLastRow: Boolean = false
) {
    var isRowFocused by remember { mutableStateOf(false) }
    val context = LocalContext.current
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 5.dp, end = 27.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(if (isRowFocused) Color.LightGray else Color.White)
            .onKeyEvent {
                if (isLastRow) {
                    if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
//                        Toast
//                            .makeText(
//                                context, "KeyDown & DirectionDown Notify", Toast.LENGTH_SHORT
//                            )
//                            .show()
                        isSecondItemPressed.value = true
                    }
                    false
                } else { false }
            }
            .onFocusChanged {
                isRowFocused = it.isFocused
            }
            .height(61.dp)
            .pointerInput(Unit) {
                detectTapGestures {
                    onClick()
                }
            }
            .clickable {
                onClick()
            },
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 20.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.colorScheme.inversePrimary,
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 18.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(end = 20.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 0.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary
                )
            )
        }

    }
}

@Composable
fun ColumnScope.AddTextSettingsTV(
    text: String,
    size: TextUnit,
    color: Color,
    bottomPadding: Dp = 0.dp,
    startPadding: Dp = 0.dp,
    style: TextStyle
) {
    Text(
        text = text,
        style = style,
        color = color,
        modifier = Modifier.padding(bottom = bottomPadding, start = startPadding)
    )
}

@Composable
fun ColumnScope.AddRowSwitchTV(icon: Int, text: String, focusRequester3: FocusRequester) {
    val context = LocalContext.current
    val basePreferenceHelper = BasePreferenceHelper(context)
    var isRowFocused by remember { mutableStateOf(false) }
    var isSwitch by remember { mutableStateOf(basePreferenceHelper.getAdBlockState()) }
    val scope = rememberCoroutineScope()
    val homeViewModel: HomeViewModel = viewModel{
        HomeViewModel(context, scope)
    }
    val isConnect: Int? = homeViewModel.isConnect.observeAsState().value

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 5.dp, end = 27.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(if (isRowFocused) Color.LightGray else Color.White)
//            .focusRequester(focusRequester3)
            .onFocusChanged {
                isRowFocused = it.isFocused
            }
            .clickable {
                isSwitch = !isSwitch
                basePreferenceHelper.saveAdBlockState(isSwitch)
                if (isConnect == App.CONNECTED || isConnect == App.CONNECTING) {
                    Log.d("isConnect_State_vpn", "stopVPN")
                    vpnConnectionsUtil.stopVpn()
                    Handler().postDelayed(Runnable {
                        vpnConnectionsUtil.startVpn()
                    }, 500)
                }
            }
            .height(61.dp),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 20.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.colorScheme.inversePrimary,
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 18.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

//        val vpnConnectionsUtil = VPNConnectionsUtil(context, act, homeViewModel)

        Surface(
            modifier = Modifier
                .padding(start = 0.dp, end = 13.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent
        ) {
            Switch(
                checked = isSwitch,
                onCheckedChange = {
                    isSwitch = it
                    basePreferenceHelper.saveAdBlockState(it)
                    if (isConnect == App.CONNECTED || isConnect == App.CONNECTING) {
                        Log.d("isConnect_State_vpn", "stopVPN")
                        vpnConnectionsUtil.stopVpn()
                        Handler().postDelayed(Runnable {
                            vpnConnectionsUtil.startVpn()
                        }, 500)
                    }                },
                modifier = Modifier.scale(0.8F),
                colors = SwitchDefaults.colors(
                    checkedThumbColor = Color.White,
//                    checkedTrackColor = MaterialTheme.colorScheme.surfaceContainerLowest,
                    checkedTrackColor = colorResource(id = R.color.switch_green),
//                    uncheckedThumbColor = MaterialTheme.colorScheme.onSecondaryContainer,
                    uncheckedThumbColor = colorResource(id = R.color.white),
//                    uncheckedTrackColor = MaterialTheme.colorScheme.surfaceContainerHighest,
                    uncheckedTrackColor = colorResource(id = R.color.switch_gray),
//                    uncheckedBorderColor = MaterialTheme.colorScheme.surfaceContainerHighest
                    uncheckedBorderColor = colorResource(id = R.color.switch_gray)
                ),
                thumbContent = {}
            )
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColumnScope.AddRowSettingsColumnTV(
    icon: Int,
    text: String,
    focusRequester1: FocusRequester,
    focusRequester2: FocusRequester,
    navHostController: NavHostController
) {
    val context = LocalContext.current
    val basePreferenceHelper = BasePreferenceHelper(context = context)
    val availableProtocols = getAvailableProtocols(basePreferenceHelper)
    var isSheetOpen by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    val protocols = listOf(
        "Auto", "WireGuard", "IKEv2", "OpenVPN TCP", "OpenVPN UDP"
    )
    var selectedProtocol by remember { mutableStateOf(basePreferenceHelper.getProtocol().full_name) }
    var isFirstRowFocused by remember { mutableStateOf(false) }


//    val serverListViewModel = serverListViewModelSplash
//    val serverListViewModel: ServerListViewModel = viewModel{
//        ServerListViewModel(context)
//    }
//    val configuration = LocalConfiguration.current
//    val isTablet = configuration.screenWidthDp > 840


    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 5.dp, end = 27.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(if (isFirstRowFocused) Color.LightGray else Color.White)
            .height(61.dp)
            .onKeyEvent {
                when (it.key) {
                    Key.DirectionDown -> {
                        Log.d("test_settings_keys", "DirectionDown")
//                        Toast
//                            .makeText(
//                                context, "DirectionDown", Toast.LENGTH_SHORT
//                            )
//                            .show()
                        focusRequester2.requestFocus()
                        true
                    }
                    Key.DirectionLeft -> {
                        Log.d("test_settings_keys", "DirectionLeft")
//                        Toast
//                            .makeText(
//                                context, "DirectionLeft", Toast.LENGTH_SHORT
//                            )
//                            .show()
                        customNavigation(navHostController = navHostController, screen = BottomBarScreen.Settings)
                        true
                    }
//
//                    Key.DirectionRight -> {
//                        Log.d("test_settings_keys", "DirectionRight")
//                        Toast
//                            .makeText(
//                                context, "DirectionRight", Toast.LENGTH_SHORT
//                            )
//                            .show()
//                        customNavigation(navHostController = navHostController, screen = BottomBarScreen.Help)
//                        true
//                    }

                    else -> {
                        false
                    }
                }
            }
            .focusRequester(focusRequester1)
            .onFocusChanged {
                isFirstRowFocused = it.isFocused
//                if (!it.isFocused) focusRequester2.requestFocus()

            }
            .focusable()
//            .pointerInput(Unit) {
//                detectTapGestures {
//                    isSheetOpen = true
//                }
//            }
            .clickable { isSheetOpen = true }
        ,
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 20.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)
            )
        }

        Surface(
            modifier = Modifier
                .padding(start = 0.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent
        ) {
            Column(
                modifier = Modifier.background(Color.Transparent),
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = text,
                    color = MaterialTheme.colorScheme.inversePrimary,
                    style = MaterialTheme.typography.titleSmall,
                    maxLines = 1,
                    modifier = Modifier
                        .padding(start = 18.dp, end = 0.dp)
//                        .weight(1f)
                )
                Spacer(modifier = Modifier.height(2.dp))
                Text(text = selectedProtocol,
                    style = MaterialTheme.typography.headlineSmall.copy(
                        fontSize = if (isTablet()) 14.sp else 12.sp
                    ),
                    color = MaterialTheme.colorScheme.inversePrimary,
                    maxLines = 1,
                    modifier = Modifier
                        .padding(start = 18.dp, end = 0.dp)
//                        .weight(1f)
                        .alpha(0.6F),
                )
            }
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(end = 20.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 0.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary
                )
            )
        }

        if (isSheetOpen) {

            ModalBottomSheet(
                onDismissRequest = { isSheetOpen = false },
                sheetState = sheetState,
//                containerColor = MaterialTheme.colorScheme.onBackground
                containerColor = Color.White,
            ) {
                Box(modifier = Modifier
                    .background(Color.Transparent)
                    .fillMaxWidth()
                    .height(340.dp)
                    .padding(start = 0.dp, top = 5.dp),
                ) {
                    Column(
                        verticalArrangement = Arrangement.Top,
                        horizontalAlignment = Alignment.Start
                    ) {
                        AddTextSettings(
                            text = "VPN Protocols",
                            size = 18.sp,
                            color = MaterialTheme.colorScheme.inversePrimary,
                            bottomPadding = 15.dp,
                            startPadding = 16.dp,
                            style = MaterialTheme.typography.titleMedium
                        )
                        availableProtocols.forEach { protocol ->
                            Row(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .background(Color.Transparent)
                                    .padding(start = 2.dp)
                                    .selectable(
                                        selected = selectedProtocol == protocol,
                                        onClick = {
                                            selectedProtocol = protocol
                                            isSheetOpen = false
//                                            selectProtocolCallback(
//                                                protocol = protocol,
//                                                context,
//                                                serverListViewModel
//                                            )
                                        },
                                    )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                                ,
                                verticalAlignment = Alignment.CenterVertically
                            ) {
                                RadioButton(selected = protocol == selectedProtocol,
                                    onClick = {
                                        selectedProtocol = protocol
                                        isSheetOpen = false
//                                        selectProtocolCallback(protocol = protocol, context, serverListViewModel)
                                    },
                                    colors = RadioButtonDefaults.colors(
                                        selectedColor = colorResource(id = R.color.radio_button_blue),
                                        unselectedColor = colorResource(id = R.color.gray_icon),)
                                )
                                Text(text = protocol,
                                    modifier = Modifier.padding(start = 12.dp),
                                    color = MaterialTheme.colorScheme.inversePrimary,
                                    style = MaterialTheme.typography.bodySmall
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun ColumnScope.AddRowSettingsSmartTV(
    icon: Int,
    text: String,
    isRowShown: Boolean,
    isSheetShown: Boolean,
    navHostController: NavHostController,
    focusRequester2: FocusRequester,
    focusRequester3: FocusRequester
) {
    var isSmartSheetOpen by remember { mutableStateOf(false) }
    var isAnySpecificSheetOpen by remember { mutableStateOf(false) }
    val context = LocalContext.current
    val basePreferenceHelper = BasePreferenceHelper(context)
    var isRowFocused by remember { mutableStateOf(false) }

//    if (isRowShown) { }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 5.dp, end = 27.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(if (isRowFocused) Color.LightGray else Color.White)
//            .onKeyEvent {
//                when (it.key) {
//                    Key.DirectionLeft -> {
//                        Log.d("test_settings_keys", "DirectionLeft")
//                        Toast
//                            .makeText(
//                                context, "DirectionUp", Toast.LENGTH_SHORT
//                            )
//                            .show()
//                        customNavigation(navHostController = navHostController, screen = BottomBarScreen.Home)
//                        true
//                    }
//                    Key.DirectionRight -> {
//                        Log.d("test_settings_keys", "DirectionRight")
//                        Toast
//                            .makeText(
//                                context, "DirectionRight", Toast.LENGTH_SHORT
//                            )
//                            .show()
//                        customNavigation(navHostController = navHostController, screen = BottomBarScreen.Help)
//                        true
//                    }
//                    else -> {
//                        false
//                    }
//                }
//            }
            .focusRequester(focusRequester2)
            .onFocusChanged {
                isRowFocused = it.isFocused
//                if (!it.isFocused) focusRequester3.requestFocus()
            }
            .height(61.dp)
            .focusable()
            .clickable { isSmartSheetOpen = true },
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 20.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)
            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.colorScheme.inversePrimary,
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 18.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))
        Surface(
            modifier = Modifier
                .padding(end = 20.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 3.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary
                )
            )
        }
    }

    if (isSmartSheetOpen) {
        val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
        var selectedSmartConnect by remember {
            mutableStateOf(basePreferenceHelper.getSmartList()) }

        ModalBottomSheet(
            onDismissRequest = { isSmartSheetOpen = false
                BottomBarScreen.Settings.isTrue = false
            },
            sheetState = sheetState,
            containerColor = Color.White
        ) {
            Box(modifier = Modifier
                .background(Color.Transparent)
                .fillMaxWidth()
                .height(250.dp)
                .padding(start = 0.dp, top = 10.dp),
            ) {
                val selectedSmartList = basePreferenceHelper.getSmartList()
                val smartServer = basePreferenceHelper.getSmartServerObject() ?: basePreferenceHelper.getRecommendedServerObject()
                Column(
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.Start
                ) {
                    AddTextSettings(
                        text = "Smart Connect",
                        size = 18.sp,
                        color = MaterialTheme.colorScheme.inversePrimary,
                        bottomPadding = 20.dp,
                        startPadding = 16.dp,
                        style = MaterialTheme.typography.titleMedium
                    )
                    smartConnect.forEach { smart ->
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Transparent)
                                .padding(start = 2.dp)
                                .selectable(
                                    selected = selectedSmartConnect == smart,
                                    onClick = {
                                        selectedSmartConnect = smart
                                        basePreferenceHelper.saveSmartList(smart)
                                        isSmartSheetOpen = false

                                        if (smart == smartConnect[2]) {
                                            Log.d("smartLocationList Row", smart)
                                            isAnySpecificSheetOpen = true
                                        }

                                    },
                                )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                            ,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            RadioButton(selected = smart == selectedSmartConnect,
                                onClick = {
                                    selectedSmartConnect = smart
                                    basePreferenceHelper.saveSmartList(smart)
                                    isSmartSheetOpen = false

                                    if (smart == smartConnect[2]) {
                                        Log.d("smartLocationList RB", smart)
                                        isAnySpecificSheetOpen = true
                                    }
                                },
                                colors = RadioButtonDefaults.colors(
                                    selectedColor = colorResource(id = R.color.radio_button_blue),
                                    unselectedColor = colorResource(id = R.color.gray_icon),)
                            )
                            Column {
                                Text(text = smart,
                                    modifier = Modifier.padding(start = 12.dp),
                                    color = MaterialTheme.colorScheme.inversePrimary,
                                    style = MaterialTheme.typography.bodySmall
                                )
                                if (smart == smartConnect[2]) {
                                    if (selectedSmartList == smartConnect[2]) {
                                        Log.d("smartLocationList Row", smart)
                                        Text(text = "${smartServer?.server_name}",
                                            modifier = Modifier.padding(start = 12.dp),
//                                            color = MaterialTheme.colorScheme.inversePrimary,
                                            style = MaterialTheme.typography.labelLarge.copy(
                                                fontSize = 12.sp,
                                                color = colorResource(id = R.color.gray_icon)
                                            )
                                        )
                                    }
                                }
                            }
                        }
                    }

                }

            }
        }
    }

    if (isAnySpecificSheetOpen) {
        val sheetStateAny = rememberModalBottomSheetState(skipPartiallyExpanded = true)
        val searchListViewModel = searchListViewModelSplash
//        val searchText = searchListViewModel.searchText.observeAsState().value
        var searchText1 by remember { mutableStateOf("") }
        val isActive = searchListViewModel.isActive.observeAsState().value
        val scope = rememberCoroutineScope()

        ModalBottomSheet(
            onDismissRequest = { isAnySpecificSheetOpen = false
                BottomBarScreen.Settings.isTrue = false
            },
            sheetState = sheetStateAny,
            containerColor = Color.White,
            modifier = Modifier
                .padding(top = 15.dp)
                .fillMaxSize()
        ) {
            Box(modifier = Modifier
                .background(Color.Transparent)
//                .fillMaxWidth()
//                .fillMaxHeight()
                .padding(start = 0.dp, top = 10.dp)
                .fillMaxSize(),
            ) {
                Column(
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.Start
                ) {
                    CompositionLocalProvider(
                        LocalOverscrollConfiguration provides null
                    ) {
                        LaunchedEffect(key1 = searchText1) {
                            Log.d("test_search_logic", "LaunchedEffect $searchText1")
                            val delay = if (searchText1.isEmpty()) 0L else 300L
                            delay(delay)
                            val query = searchText1.ifEmpty { "settings_screen" }
                            searchListViewModel.getCountries(query, true)
                        }
//                        if (isActive == false) {
//                            searchText1 = ""
//                        }
                        DockedSearchBar(
                            query = searchText1,
                            onQueryChange = {
                                searchText1 = it
//                                scope.launch {
//                                    searchListViewModel.searchTextChange(it)
//                                }
                            },
                            onSearch = {
                                scope.launch {
                                    searchListViewModel.isActiveChange(state = false, true)
                                }
//                                keyboardController?.hide()
                            },
                            active = isActive!!,
                            onActiveChange = {
                                scope.launch {
                                    searchListViewModel.isActiveChange(it, isFromSettings = true)
                                }
                            },
                            placeholder = {
                                Text(
                                    text = "Search Location",
                                    style = MaterialTheme.typography.displaySmall,
                                    color = colorResource(id = R.color.dark_blue_gray_text)
                                )
                            },
                            leadingIcon = {
                                Icon(
                                    painter = painterResource(id = R.drawable.search3x),
                                    contentDescription = "Search Icon",

                                    modifier = Modifier
                                        .size(21.dp)
                                )
                            },
                            colors = SearchBarDefaults.colors(
                                containerColor = colorResource(id = R.color.white),
                                dividerColor = Color.Transparent,
                                inputFieldColors = TextFieldDefaults.colors(
                                    focusedTextColor = colorResource(id = R.color.dark_blue_gray_text),
                                    unfocusedTextColor = colorResource(id = R.color.dark_blue_gray_text),
                                    unfocusedIndicatorColor = colorResource(id = R.color.dark_blue_gray_text),
                                    focusedIndicatorColor = colorResource(id = R.color.dark_blue_gray_text),
                                    disabledIndicatorColor = colorResource(id = R.color.dark_blue_gray_text),
                                    cursorColor = colorResource(id = R.color.dark_blue_gray_text),
                                )
                            ),
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(50.dp)
                                .padding(horizontal = 10.dp)
                                .background(Color.Transparent)
                        ) {}

                        val searchServersList = searchListViewModel.countriesListSettings.observeAsState().value
                        LazyColumn(
                            modifier = Modifier
                                .padding(top = 20.dp, bottom = 40.dp)
                        ) {
                            items(items = searchServersList!!) { server ->
                                ServerSpecificItem(
                                    server, navHostController = navHostController,
                                    onServerDisable = { isAnySpecificSheetOpen = false }
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AddRowDarkLightThemeTV(
    icon: ImageVector,
    text: String,
) {
    var isThemeSheetOpen by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState()
    val context = LocalContext.current
    val basePreferenceHelper = BasePreferenceHelper(context)
    val selectedtheme = remember { mutableStateOf(basePreferenceHelper.getTheme()) }
    val isSystemInDarkTheme = isSystemInDarkTheme()
    val systemTheme by remember { mutableStateOf(isSystemInDarkTheme) }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 40.dp, end = 27.dp)
            .background(Color.Transparent)
            .pointerInput(Unit) {
                detectTapGestures {
                    isThemeSheetOpen = true
                }
            }
            .height(24.dp),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Image(
                imageVector = icon,
                contentDescription = "Select Theme",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary)                )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.inversePrimary,
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 18.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(start = 15.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 0.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.inversePrimary
                )
            )
        }

    }

    if (isThemeSheetOpen) {
        ModalBottomSheet(
            onDismissRequest = { isThemeSheetOpen = false
            },
            sheetState = sheetState,
            containerColor = Color.White,
        ) {
            Box(modifier = Modifier
                .background(Color.Transparent)
                .fillMaxWidth()
                .height(250.dp)
                .padding(start = 0.dp, top = 10.dp),
            ) {

                Log.d("test_theme", "systemTheme -> $systemTheme")

                Column(
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.Start
                ) {
                    AddTextSettings(
                        text = "Theme",
                        size = 18.sp,
                        color = MaterialTheme.colorScheme.inversePrimary,
                        bottomPadding = 20.dp,
                        startPadding = 16.dp,
                        style = MaterialTheme.typography.titleSmall
                    )
                    themesList.forEach { theme ->

                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Transparent)
                                .padding(start = 2.dp)
                                .selectable(
                                    selected = theme == selectedtheme.value,
                                    onClick = {
                                        selectedtheme.value = theme
                                        basePreferenceHelper.saveTheme(selectedtheme.value)

                                        if (selectedtheme.value == themesList[0]) {
                                            Log.d("test_theme", "true: -> $systemTheme")
                                            isDarkTheme.value = systemTheme
                                        } else {
                                            Log.d("test_theme", "false: -> $systemTheme")
                                            isDarkTheme.value = selectedtheme.value == themesList[2]
                                        }
                                        isThemeSheetOpen = false
                                    },
                                )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                            ,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
//                            val themeState = isSystemInDarkTheme()
//                            val isSystemInDarkTheme by remember { mutableStateOf(themeState) }
                            RadioButton(selected = theme == selectedtheme.value,
                                onClick = {
                                    selectedtheme.value = theme
                                    basePreferenceHelper.saveTheme(selectedtheme.value)

                                    if (selectedtheme.value == themesList[0])
                                    {
                                        Log.d("test_theme", "true: -> $systemTheme")
                                        isDarkTheme.value = systemTheme
                                    }
                                    else {
                                        Log.d("test_theme", "false: -> $systemTheme")
                                        isDarkTheme.value = selectedtheme.value == themesList[2]
                                    }
                                    isThemeSheetOpen = false
                                },
                                colors = RadioButtonDefaults.colors(
                                    selectedColor = colorResource(id = R.color.radio_button_blue),
                                    unselectedColor = colorResource(id = R.color.gray_icon),)
                            )
                            Text(text = theme,
                                modifier = Modifier.padding(start = 12.dp),
                                style = MaterialTheme.typography.bodySmall,
                                color = MaterialTheme.colorScheme.inversePrimary
                            )
                        }
                    }
                }
            }
        }
    }
}