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

package com.vpn.fastestvpnservice.screensTV

//import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.act
import android.content.Context
import android.os.Build
import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
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.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
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.rememberUpdatedState
import androidx.compose.runtime.saveable.rememberSaveable
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.paint
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.painter.Painter
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.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import androidx.lifecycle.LifecycleOwner
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavHostController
import com.vpn.fastestvpnservice.MainActivity
import com.vpn.fastestvpnservice.R
import com.vpn.fastestvpnservice.beans.Protocol
import com.vpn.fastestvpnservice.beans.Server
import com.vpn.fastestvpnservice.beans.isDarkTheme
import com.vpn.fastestvpnservice.beans.toChangeServer
import com.vpn.fastestvpnservice.constants.smartConnect
import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
import com.vpn.fastestvpnservice.interfaces.ServerCallbacksTV
import com.vpn.fastestvpnservice.navigation.isFirstItemPressed
import com.vpn.fastestvpnservice.navigation.isHomeScreenPressed
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.ShowProtocolDialog
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.ShowServerDialog
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.isServerDialog
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.navHostController1
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.protocolObj
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.serverObj
import com.vpn.fastestvpnservice.screens.serverListViewModelSplash
import com.vpn.fastestvpnservice.sealedClass.ScreenTV
import com.vpn.fastestvpnservice.ui.theme.customTypography
import com.vpn.fastestvpnservice.utils.Utils
import com.vpn.fastestvpnservice.utils.VPNConnectionsUtil
import com.vpn.fastestvpnservice.utils.isTablet
import com.vpn.fastestvpnservice.viewmodels.HomeViewModel
import com.vpn.fastestvpnservice.viewmodels.ServerListViewModel
import de.blinkt.openvpn.core.App

lateinit var vpnConnectionsUtil: VPNConnectionsUtil
var isProtocolDialog: MutableState<Boolean> = mutableStateOf(false)

var isLocationsEnabled: MutableState<Boolean> = mutableStateOf(false)
var isDedicatedIpEnabled: MutableState<Boolean> = mutableStateOf(false)
var isStreamingEnabled: MutableState<Boolean> = mutableStateOf(false)
var isDvpnEnabled: MutableState<Boolean> = mutableStateOf(false)
var isP2pEnabled: MutableState<Boolean> = mutableStateOf(false)

var locations: MutableList<Server> = ArrayList<Server>()
var dedicatedIP: MutableList<Server> = ArrayList<Server>()
var streaming: MutableList<Server> = ArrayList<Server>()
var dvpn: MutableList<Server> = ArrayList<Server>()
var p2p: MutableList<Server> = ArrayList<Server>()

val onServerTV = object : ServerCallbacksTV {

    @Composable
    override fun onServerSelected(
        context: Context, homeViewModel: HomeViewModel,
        onClick: () -> Unit, isServerDialogShown: Boolean, server: Server
    ) {
//        val wg = VPNConnectionsUtil(context, act ,homeViewModel)
        val basePreferenceHelper = BasePreferenceHelper(context)
//         val serverListViewModel: ServerListViewModel = viewModel{
//             ServerListViewModel(context)
//         }

        Log.d("ServerCallbacks", "onServerSelected called!")

        val lastServer = basePreferenceHelper.getConnectedServer()
        val connectState = basePreferenceHelper.getConnectState()
        if (isServerDialogShown) {
            Log.d("ServerCallbacks", "onServerSelected true!")
            if (connectState == 2) {
                Log.d("ServerCallbacks", "onServerSelected isVPNConnected!")
                if (lastServer?.id != server.id) {
                    isServerDialog.value = true
                    serverObj.value = server
                }
                else {
                    basePreferenceHelper.setConnectedServer(server)
                    basePreferenceHelper.setServerObject(server)
                }
            } else {
                serverListViewModelSplash.setRecentlyConnectedServer(server)

//                val recentList = basePreferenceHelper.getRecentlyList()
//                val tempList = ArrayList<Server>()
//                recentList?.let { tempList.addAll(it) }
//
//                if (tempList.size == 0) {
//                    tempList.add(server)
//                }
//                else {
//                        if (!tempList.any {
//                                it.id == server.id
//                            }) {
//                            if (tempList.size != 5 && tempList.size < 5) {
//                                tempList.add(0, server)
//                            }
//                        }
//                }
//
//                basePreferenceHelper.setRecentlyList(tempList)

                basePreferenceHelper.setConnectedServer(server)
                basePreferenceHelper.setServerObject(server)
//                wg.startVpn()
            }
        }
        else {
//            wg.startVpn()
        }
        MainActivity.isSelectedServersShown = true

        onClick()

    }

    override fun onChangeProtocol(
        protocol: Protocol,
        context: Context,
        serverListViewModel: ServerListViewModel
    ) {
        val prefHelper = BasePreferenceHelper(context)
//        val wg = VPNConnectionsUtil(context, act , homeViewModel1)
        protocolObj.value = protocol
        val connectState = prefHelper.getConnectState()

        if (getEnableProtocols(protocol.title, prefHelper)) {
            Log.d("OnChangeProtocol", "getEnableProtocols yes!")

            if (prefHelper.getProtocol().index != protocol.index) {

                if (connectState == 2) {
                    navHostController1.popBackStack()
                    isProtocolDialog.value = true
                }
                else {
                    prefHelper.saveProtocol(protocol = protocol)

                    val lastServer = prefHelper.getConnectedServer()
                    val serverList = prefHelper.getServerData()
//                     val serverList = serverListViewModelSplash.liveDataGetServersGlobal.value

                    if (lastServer != null) {
                        val serverProtocol = serverListViewModel.getFilteredServerByProtocolChanged(serverList, lastServer, protocol)

                        if (serverProtocol.isFound) {
                            prefHelper.setServerObject(serverProtocol.server)
                            val lastServer1 = prefHelper.getServerObject()
                        }
                    }
                    serverListViewModelSplash.setCountryDataTV()
                }
            }

        }
        else {
//             Screen.Subscription.isTrue = true
//            navHostController1.let {
//                it.navigate(Screen.Subscription.route)
//            }
            Toast.makeText(context, "Protocol not enabled", Toast.LENGTH_SHORT).show()
        }
    }

}
@Composable
fun HomeTV(navHostController: NavHostController, settingsNavHostController: NavHostController) {

    val context = LocalContext.current
    val basePreferenceHelper = BasePreferenceHelper(context)
    val prefHelper = BasePreferenceHelper(context)
    val scope = rememberCoroutineScope()
    val homeViewModel: HomeViewModel = viewModel{
        HomeViewModel(context, scope)
    }
    var isConnect: Int? = homeViewModel.isConnect.observeAsState().value
    isConnect = basePreferenceHelper.getConnectState()
    val focusRequester1 = remember { FocusRequester() }
    val focusRequester2 = remember { FocusRequester() }
    val focusRequester3 = remember { FocusRequester() }
    var isButtonFocused by remember { mutableStateOf(false) }

    OnLifecycleEvent { owner, event ->
        when (event) {
            Lifecycle.Event.ON_RESUME -> {
                Log.d("test_home_resume", "ON_RESUME: Home Screen!")

//                try {
//                    App.backend?.runningTunnelNames
//                } catch (e: Exception) {
//                    val back = GoBackend(context)
//                    App.setBackend(back)
//                    App.backend = App.getBackend()
//                }
//                vpnConnectionsUtil.onResumeCallBack()

                homeViewModel.getIp()

//                var filterServerByConnectionCount = Server()
//                if (prefHelper.getServerObject() != null) {
//                    prefHelper.getServerObject()?.let {
//                        filterServerByConnectionCount = it
//                    }
//                } else {
//                    val smartServer = basePreferenceHelper.getSmartServerObject()
//                    smartServer?.let {
//                        filterServerByConnectionCount = it
//                    }
//                }
//
//                server = filterServerByConnectionCount
//
////                splashViewModel.serverDataApi()

                homeViewModel.validatePassword(
                    prefHelper.getUser()?.userinfo?.email.toString(),
                    prefHelper.getPassword().toString(),
                    "TV",
                    Build.VERSION.RELEASE
                )
            }

            Lifecycle.Event.ON_PAUSE -> {
                Log.d("test_home_resume", "ON_PAUSE: Home Screen!")
//                vpnConnectionsUtil.onPauseCallBack()
            }

            Lifecycle.Event.ON_STOP -> {
                Log.d("test_home_resume", "ON_STOP: Home Screen!")
//                vpnConnectionsUtil.onStopCallBack()
            }

            Lifecycle.Event.ON_DESTROY -> {
                Log.d("test_home_resume", "ON_DESTROY: Home Screen!")
//                vpnConnectionsUtil.onPauseCallBack()
            }
            else -> {
                Log.d("test_home_resume", "else: Home Screen!")
            }
        }
    }

    val validateResponse = homeViewModel.liveDataValidate.observeAsState().value
    validateResponse?.let {
        Log.d("test_api_validate", "home => ${it.status} ${it.message}")

        if (!it.status) {
            basePreferenceHelper.setLoggedInState(false)
            basePreferenceHelper.clearAllData()
            settingsNavHostController.popBackStack()
            settingsNavHostController.navigate(ScreenTV.LoginTV.route)
        }

        homeViewModel._mutableLiveDataValidate.value = null
    }

    if (isHomeScreenPressed.value) {
        LaunchedEffect(key1 = Unit) {
            focusRequester1.requestFocus()
        }
        isHomeScreenPressed.value = false
    }

    var isLaunched by rememberSaveable { mutableStateOf(true) }

    if (isLaunched) {
        Log.d("test_launch","liveDataGetServersGlobal")
        val countries = serverListViewModelSplash.liveDataGetServersGlobal.value
        countries?.forEachIndexed { index, serverData ->
            Log.d("test_serverlist_tv","$index ${serverData?.name} ${serverData?.servers?.size}")
            if (serverData?.name?.equals("Servers") == true) {
                serverData.servers?.let { locations = it }
                if (locations.size > 0) isLocationsEnabled.value = true
            }
            else if (serverData?.name?.equals("Dedicated IP") == true) {
                serverData.servers?.let { dedicatedIP = it }
                if (dedicatedIP.size > 0) isDedicatedIpEnabled.value = true
            }
            else if (serverData?.name?.equals("Streaming") == true) {
                serverData.servers?.let { streaming = it }
                if (streaming.size > 0) isStreamingEnabled.value = true
            }
            else if (serverData?.name?.equals("D-VPN") == true) {
                serverData.servers?.let { dvpn = it }
                if (dvpn.size > 0) isDvpnEnabled.value = true
            }
            else if (serverData?.name?.equals("P2P") == true) {
                serverData.servers?.let { p2p = it }
                if (p2p.size > 0) isP2pEnabled.value = true
            }
        }
        isLaunched = false
    }


//    BackHandler {
//        Toast.makeText(
//            context, "BackHandler Home TV", Toast.LENGTH_SHORT
//        ).show()
//    }

    Column(
        modifier = Modifier
            .background(colorResource(id = R.color.background_color_gray))
            .fillMaxSize(),
    ) {
        if (isServerDialog.value) {
            ShowServerDialog(
                basePreferenceHelper,
                com.vpn.fastestvpnservice.screens.bottomNavBarScreens.vpnConnectionsUtil
            )
        }

        if (isProtocolDialog.value) {
            ShowProtocolDialog(
                basePreferenceHelper,
                com.vpn.fastestvpnservice.screens.bottomNavBarScreens.vpnConnectionsUtil,
                serverListViewModelSplash
            )
        }

        // 1st box
        ConstraintLayout(modifier = Modifier
            .fillMaxSize()
            .weight(0.6f)
            .background(Color.Transparent)
        )
        {
            val (firstComposable, secondComposable) = createRefs()
            val guideline = createGuidelineFromTop(0.7f)
            Box(
                modifier = Modifier
                    .constrainAs(firstComposable) {
                        top.linkTo(parent.top)
                        bottom.linkTo(guideline)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        width = Dimension.fillToConstraints
                        height = Dimension.fillToConstraints
                    }
                    .background(Color.Transparent)
            ) {
                Image(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(top = 0.dp),
//                    painter = if (isConnect == App.CONNECTED) blueBackgroundTV() else pinkBackgroundTV(),
                    painter = if (isConnect == App.CONNECTED) painterResource(id = R.drawable.bluebackground3x)
                    else painterResource(id = R.drawable.pinkbackground3x),
                    contentDescription = "Background Color",
                    contentScale = ContentScale.FillBounds,
                )
                Image(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(bottom = 0.dp)
//                        .alpha(if (isDarkTheme.value) 0.1F else 0.6F),
                        .alpha(0.6F),
                    painter = painterResource(id = R.drawable.map_home3x),
                    contentDescription = "Home Map",
                    contentScale = ContentScale.FillWidth,
                )
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(bottom = 85.dp)
//                            .offset(y = -(118).dp)
                        .background(Color.Transparent),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Bottom
                ) {
                    val serverObj = basePreferenceHelper.getConnectedServer()
                    val serverDis = basePreferenceHelper.getIpinfo()

                    var ipInfo = homeViewModel.mutableLiveDataIpInfo.observeAsState().value?.query
                    ipInfo = if (isConnect == App.CONNECTED) serverObj?.ip.toString() else serverDis?.query
                    AddText(
                        text = "IP ${ipInfo ?: ""}",
                        size = 18.sp,
//                        color = MaterialTheme.colorScheme.primary,
                        color = colorResource(id = R.color.dark_blue_gray_text),
                        style = MaterialTheme.typography.customTypography.headlineLarge.copy(
                            fontSize = 18.sp
                        )
                    )
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier
                            .background(Color.Transparent)
                            .padding(top = 5.dp)
                    ) {
                        if (isConnect == App.CONNECTED) {
                            val image = Utils.getDrawable(context, serverObj?.iso)
                            if (image != 0) {
                                Image(
                                    painter = painterResource(id = image),
                                    contentDescription = "Country",
                                    modifier = Modifier
                                        .padding(end = 6.dp)
                                        .size(15.dp)
                                        .clip(CircleShape)
                                        .paint(
                                            painter = painterResource(id = image),
                                            contentScale = ContentScale.FillBounds
                                        )
                                )
                            }
                            AddText(
                                text = "${serverObj?.server_name ?: ""}, ${serverObj?.country ?: ""}",
                                size = 16.sp,
                                color = colorResource(id = R.color.dark_blue_gray_text),
                                isTablet()
                            )
                        } else {
                            val image = Utils.getDrawable(context, serverDis?.countryCode)
                            Log.d("image_logo", "$image ${serverDis?.countryCode}")
                            if (image != 0) {
                                Image(
                                    painter = painterResource(id = image),
                                    contentDescription = "Server",
                                    modifier = Modifier
                                        .padding(end = 6.dp)
                                        .size(15.dp)
                                        .clip(CircleShape)
                                        .paint(
                                            painter = painterResource(id = image),
                                            contentScale = ContentScale.FillBounds
                                        )
                                )
                            }
                            AddText(
                                text = "${serverDis?.city ?: ""}, ${serverDis?.country ?: ""}",
                                size = 16.sp,
                                color = colorResource(id = R.color.dark_blue_gray_text),
                                isTablet()
                            )
                        }
                    }
                    when (isConnect) {
                        App.CONNECTED -> {
                            AddText(
                                text = "Connected",
                                size = 18.sp,
                //                            color = MaterialTheme.colorScheme.surfaceContainerHigh,
                                color = colorResource(id = R.color.light_blue_2),
                                style = MaterialTheme.typography.customTypography.displaySmall.copy(
                                    fontSize = 18.sp
                                )
                            )
                        }
                        App.DISCONNECTED -> {
                            AddText(
                                text = "Disconnected",
                                size = 18.sp,
                //                            color = MaterialTheme.colorScheme.surfaceTint,
                                color = colorResource(id = R.color.maroon_text),
                                style = MaterialTheme.typography.customTypography.displaySmall.copy(
                                    fontSize = 18.sp
                                )
                            )
                        }
                        App.CONNECTING -> {
                            AddText(
                                text = "Connecting...",
                                size = 18.sp,
                //                            color = MaterialTheme.colorScheme.surfaceTint,
                                color = colorResource(id = R.color.maroon_text),
                                style = MaterialTheme.typography.customTypography.displaySmall.copy(
                                    fontSize = 18.sp
                                )
                            )
                        }
                    }
                }
            }
            Box(
                modifier = Modifier
                    .constrainAs(secondComposable) {
                        top.linkTo(guideline)
                        bottom.linkTo(firstComposable.bottom)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        width = Dimension.value(150.dp)
                        height = Dimension.value(150.dp)
                    }
                    .background(Color.Transparent)
            ) {
                val color = if (isButtonFocused && isConnect == App.CONNECTED) colorResource(id = R.color.dark_blue_gray_text)
                else if (isButtonFocused) colorResource(id = R.color.maroon_text)
                else colorResource(id = R.color.transparent)
                IconButton(
                    onClick = {
//                              Toast.makeText(
//                                  context, "Connect onClick{}", Toast.LENGTH_SHORT
//                              ).show()
//                        val connectedServer = basePreferenceHelper.getConnectedServer()
//                        val serverObject = basePreferenceHelper.getServerObject()
//                        Log.d(
//                            "test_conn_ser_obj",
//                            "cs = ${connectedServer?.server_name} so = ${serverObject?.server_name}"
//                        )
//                        Log.d("isConnect_State", "onClick{} -> $isConnect")
//                        Log.d("isConnect_State_vpn", "onClick{} -> $isConnect")
//                        prefHelper.getProduct()?.identifier.let {
//                            val identifier = it
//
//                            if (identifier == AppEnum.FREE.key) {
//                                Log.d("isConnect_State", "identifier -> $identifier")
//                                Screen.Subscription.isTrue = true
//                                navHostController.navigate(
//                                    Screen.Subscription.route
//                                )
//
//                            } else {
//
//                                prefHelper.getServerObject()?.let {
//                                    prefHelper.setConnectedServer(it)
//                                }
//                                Log.d("isConnect_State", "identifier -> $identifier")
//                                if (isConnect == App.CONNECTED || isConnect == App.CONNECTING) {
//                                    Log.d("isConnect_State_vpn", "stopVPN")
//                                    vpnConnectionsUtil.stopVpn()
//                                    homeViewModel.getIp()
//                                } else {
//                                    Log.d("isConnect_State_vpn", "startVPN")
//
//                                    if (basePreferenceHelper.getServerObject() != null) {
//                                        vpnConnectionsUtil.startVpn()
//                                    } else {
//                                        toChangeServer.value = false
//                                        navHostController.navigate(
//                                            Screen.ServerList.route
//                                        )
//                                        Screen.ServerList.isTrue = true
//                                        Log.d("button_click_change", "Pressed")
//                                    }
//                                }
//
//
//                                val widgetIntent = Intent(context, SimpleAppWidget::class.java)
//                                widgetIntent.action = SimpleAppWidget.ACTION_CHANGE_SERVER
//                                context.sendBroadcast(widgetIntent)
//                            }
//                        }
                    },
                    modifier = Modifier
                        .padding(bottom = 0.dp)
                        .size(150.dp)
                        .onKeyEvent {
                            when (it.key) {
                                Key.DirectionDown -> {
                                    Log.d("test_settings_keys", "DirectionDown")
//                                    Toast
//                                        .makeText(
//                                            context, "DirectionDown", Toast.LENGTH_SHORT
//                                        )
//                                        .show()
                                    if (it.type == KeyEventType.KeyDown) {
//                                        Toast
//                                            .makeText(
//                                                context, "KeyDown", Toast.LENGTH_SHORT
//                                            )
//                                            .show()
                                        focusRequester2.requestFocus()
                                    }
                                    true
                                }

                                else -> {
                                    true
                                }
                            }
                        }
                        .focusRequester(focusRequester1)
                        .background(Color.Transparent)
                        .onFocusChanged {
                            isButtonFocused = it.isFocused
                        }
                        .clickable {
                            if (isConnect == App.DISCONNECTED) homeViewModel.setConnectState(App.CONNECTED)
                            else if (isConnect == App.CONNECTED) homeViewModel.setConnectState(App.DISCONNECTED)
                        }
                        .focusable()
                        .border(
                            BorderStroke(
                                2.dp, color
                            ), shape = CircleShape
                        ),
                )
                {
                    if (isConnect == App.CONNECTED) {
                        Image(
//                            painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_connect_dark)
//                            else painterResource(id = R.drawable.iv_connect),
                            painter = painterResource(id = R.drawable.iv_connect),
                            contentDescription = "Home Map",
                            contentScale = ContentScale.FillBounds,
                            modifier = Modifier.fillMaxSize()
                        )
                    } else {
                        Image(
//                            painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_disconnect_dark)
//                            else painterResource(id = R.drawable.iv_disconnect),
                            painter = painterResource(id = R.drawable.iv_disconnect),
                            contentDescription = "Home Map",
                            contentScale = ContentScale.FillBounds,
                            modifier = Modifier.fillMaxSize()
                        )
                    }
                }
            }
        }

        // 2nd box
        Box(
            modifier = Modifier
                .background(colorResource(id = R.color.background_color_gray))
                .fillMaxSize()
                .weight(0.4f)
//                .background(Color.Transparent),
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center
            ) {

                Box(
                    modifier = Modifier
                        .fillMaxWidth(fraction = 0.4f)
                        .padding(horizontal = 0.dp)
                        .padding(vertical = 2.dp)
                        .height(90.dp)
                        .border(
                            border = BorderStroke(2.dp, colorResource(id = R.color.white)),
                            shape = RoundedCornerShape(28.dp)
                        )
                        .background(
                            shape = RoundedCornerShape(28.dp),
                            color = colorResource(id = R.color.white)
                        )
                        .align(Alignment.CenterHorizontally),
                ) {
                    AddRowSmartTV(
                        navHostController,
                        basePreferenceHelper,
                        context,
                        isTablet(),
                        focusRequester2,
                        homeViewModel
                    )
                    var smartServer = basePreferenceHelper.getSmartServerObject()
                    val recommended = basePreferenceHelper.getRecommendedServerObject()
                    val selectedSmartList = basePreferenceHelper.getSmartList()
                    var isSmartButtonFocused by remember { mutableStateOf(false) }
                    when(selectedSmartList) {
                        smartConnect[0] -> {
                            smartServer = basePreferenceHelper.getRecommendedServerObject()
                        }
                        smartConnect[1] -> {
                            smartServer = basePreferenceHelper.getSmartServerObject() ?: recommended
                        }
                        smartConnect[2] -> {
                            smartServer = basePreferenceHelper.getSmartServerObject() ?: recommended
                        }
                        else -> {}
                    }
                    val color = if (isSmartButtonFocused && isConnect == App.CONNECTED) colorResource(id = R.color.dark_blue_gray_text)
                    else if (isSmartButtonFocused) colorResource(id = R.color.maroon_text)
                    else colorResource(id = R.color.blue_text)
                    Button(
                        onClick = {
//                                  Toast.makeText(
//                                      context, "Smart onClick{}", Toast.LENGTH_SHORT
//                                  ).show()
//                            Log.d("test_button", "onClick Smart Connect ${smartServer?.server_name}")
//                            basePreferenceHelper.setSmartServerObject(smartServer)
//                            if (isConnect == App.CONNECTED) {
//                                Log.d("isConnect_State_vpn", "stopVPN")
//                                val lastServer = basePreferenceHelper.getConnectedServer()
//                                Log.d("test_conn_ser_obj", "smart => ${lastServer?.server_name} ${smartServer?.server_name}")
//
//                                if (lastServer?.id != smartServer?.id) {
//                                    isServerDialog.value = true
//                                    if (smartServer != null) {
//                                        serverObj.value = smartServer
//                                    }
////                                    basePreferenceHelper.setConnectedServer(smartServer)
//
//                                }
//                                else {
//                                    vpnConnectionsUtil.stopVpn()
//                                }
//
//
////                                vpnConnectionsUtil.stopVpn()
////                                Handler().postDelayed(Runnable {
////                                    vpnConnectionsUtil.startVpn()
////                                }, 500)
////                                homeViewModel.getIp()
//                            }
//                            else if (isConnect == App.CONNECTING) {
//                                vpnConnectionsUtil.stopVpn()
//                            }
//                            else if (isConnect == App.DISCONNECTED) {
//                                Log.d("isConnect_State_vpn", "startVPN")
//                                basePreferenceHelper.setConnectedServer(smartServer)
//                                if (smartServer != null) {
////                                serverListViewModel.setRecentlyConnectedServer(smartServer)
//                                }
//                                vpnConnectionsUtil.startVpn()
//                            }
                        },
                        modifier = Modifier
                            .padding(start = 14.dp, end = 14.dp, bottom = 6.dp, top = 12.dp)
                            .align(Alignment.BottomCenter)
                            .background(colorResource(id = R.color.transparent))
                            .onFocusChanged {
                                isSmartButtonFocused = it.isFocused
                            }
//                            .focusable()
//                            .clickable {
//                                Toast.makeText(
//                                    context, "Smart clickable{}", Toast.LENGTH_SHORT
//                                ).show()
//                            }
                            .fillMaxWidth()
                            .height(35.dp),
                        shape = RoundedCornerShape(16.dp),
                        colors = ButtonDefaults.buttonColors(
                            contentColor = colorResource(id = R.color.white),
                            containerColor = color,
                        ),
                    ) {
                        Text(
                            text = "Smart Connect",
                            style = MaterialTheme.typography.customTypography.labelLarge.copy(
                                fontSize = 16.sp, lineHeight = 0.sp
                            ),
                            modifier = Modifier.background(Color.Transparent)
                        )
                    }
                }

                /* Select Server Box*/
//                if (isConnect != App.CONNECTED) { }

//                Spacer(modifier = Modifier.weight(1f))

                var isLayoutFocused by remember { mutableStateOf(false) }

                val color = if (isLayoutFocused && isConnect == App.CONNECTED) colorResource(id = R.color.dark_blue_gray_text)
                else if (isLayoutFocused) colorResource(id = R.color.maroon_text)
                else colorResource(id = R.color.white)
                Box(
                    modifier = Modifier
                        .fillMaxWidth(fraction = 0.4f)
                        .padding(horizontal = 0.dp, vertical = 2.dp)
                        .padding(top = 0.dp)
                        .height(50.dp)
                        .onKeyEvent {
                            if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
//                                    Toast
//                                        .makeText(
//                                            context, "KeyDown & DirectionDown", Toast.LENGTH_SHORT
//                                        )
//                                        .show()
                                isFirstItemPressed.value = true
                                true
                            } else {
                                false
                            }
                        }
                        .onFocusChanged {
                            isLayoutFocused = it.isFocused
                        }
                        .focusable()
                        .clickable(
                            indication = null,
                            interactionSource = remember { MutableInteractionSource() }
                        ) {
//                            Toast
//                                .makeText(context, "See All Pressed", Toast.LENGTH_SHORT)
//                                .show()
                            toChangeServer.value = false
                            navHostController.navigate(
                                ScreenTV.ServerListTV.route
                            )
                        }
                        .border(
                            border = BorderStroke(2.dp, color),
                            shape = RoundedCornerShape(28.dp)
                        )
                        .background(
                            shape = RoundedCornerShape(28.dp),
//                            color = MaterialTheme.colorScheme.onBackground
                            color = colorResource(id = R.color.white)
                        )
                        .align(Alignment.CenterHorizontally),
                    contentAlignment = Alignment.CenterStart,
                ) {
                    AddRowSelectServerTV(navHostController, isTablet())
                }
            }
        }
    }
}
@Composable
fun BoxScope.AddRowSmartTV(
    navHostController: NavHostController,
    basePreferenceHelper: BasePreferenceHelper,
    context: Context,
    isTablet: Boolean,
    focusRequester2: FocusRequester,
    homeViewModel: HomeViewModel
) {
    val smart = basePreferenceHelper.getSmartServerObject()
    val recommended = basePreferenceHelper.getRecommendedServerObject()
    val recently = basePreferenceHelper.getConnectedServer()
    val anySpecific = basePreferenceHelper.getSmartServerObject()
    val ipInfo = basePreferenceHelper.getIpinfo()
    val selectedSmartList = basePreferenceHelper.getSmartList()
    var selectedServer = basePreferenceHelper.getRecommendedServerObject()
    var selectedSmartServer = basePreferenceHelper.getSmartServerObject()
    var isButtonFocused by remember { mutableStateOf(false) }

    Log.d("smartLocationList", "Home:: server = ${selectedServer?.server_name}")
    var icon = Utils.getDrawable(context, selectedServer?.iso)

    when(selectedSmartList) {
        smartConnect[0] -> {
            icon = Utils.getDrawable(context, recommended?.iso)
            selectedServer = recommended
            selectedSmartServer = recommended
        }
        smartConnect[1] -> {
            icon = Utils.getDrawable(context, recently?.iso ?: recommended?.iso)
            selectedServer = recently ?: recommended
            selectedSmartServer = recently
        }
        smartConnect[2] -> {
            icon = Utils.getDrawable(context, anySpecific?.iso ?: recommended?.iso)
            selectedServer = anySpecific ?: recommended
            selectedSmartServer = anySpecific
        }
        else -> {}
    }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 15.dp, vertical = 5.dp)
            .background(Color.Transparent),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            if (icon != 0) {
                Icon(
                    painter = painterResource(id = icon),
                    contentDescription = "Country Logo",
                    tint = Color.Unspecified,
                    modifier = Modifier
                        .padding(start = 0.dp)
                        .size(30.dp)
                        .weight(1f)
                        .clip(CircleShape)
                        .border(1.dp, colorResource(id = R.color.gray_opac_04), CircleShape)
                        .paint(
                            painter = painterResource(id = icon),
                            contentScale = ContentScale.FillBounds
                        )
                )
            }
        }
        Column(
            modifier = Modifier
                .padding(start = 12.dp)

        ) {
            ColumnText(
                text = selectedSmartList,
//                color = MaterialTheme.colorScheme.surfaceContainerLow,
                color = colorResource(id = R.color.blue_text),
                size = 12.sp,
                style = MaterialTheme.typography.customTypography.headlineSmall.copy(
                    fontSize = 16.sp
                )
            )
            ColumnText(
                text = "${selectedServer?.server_name}",
//                color = MaterialTheme.colorScheme.primary,
                color = colorResource(id = R.color.dark_blue_gray_text),
                size = 16.sp,
                style = MaterialTheme.typography.labelMedium.copy(
                    fontSize = 16.sp
                )
            )
        }
        Spacer(modifier = Modifier.weight(1F))
        Surface(
            modifier = Modifier
                .padding(start = 15.dp),
            color = Color.Transparent
        ) {
            var isConnect: Int? = homeViewModel.isConnect.observeAsState().value
            isConnect = basePreferenceHelper.getConnectState()

            val color = if (isButtonFocused && isConnect == App.CONNECTED) colorResource(id = R.color.dark_blue_gray_text)
            else if (isButtonFocused) colorResource(id = R.color.maroon_text)
            else colorResource(id = R.color.blue_text)
            ClickableText(
                modifier = Modifier
                    .onKeyEvent {
                        when (it.key) {
                            Key.DirectionLeft -> {
//                                Toast.makeText(
//                                    context, "DirectionLeft Change", Toast.LENGTH_SHORT
//                                ).show()
                                true
                            }

                            else -> {
                                false
                            }
                        }
                    }
                    .focusRequester(focusRequester2)
                    .onFocusChanged {
                        isButtonFocused = it.isFocused
                    }
                    .clickable {
                        toChangeServer.value = true
                        navHostController.navigate(
                            ScreenTV.ServerListTV.route
                        )
                    }
                    .focusable(),
                text = AnnotatedString("Change"),
                style = MaterialTheme.typography.customTypography.headlineMedium.copy(
//                    MaterialTheme.colorScheme.surfaceContainerLow,
                    color = color,
                    fontSize = 18.sp
                ),
                onClick = {},
            )
        }
    }
}

@Composable
fun BoxScope.AddRowSelectServerTV(navHostController: NavHostController, isTablet: Boolean) {

    val context = LocalContext.current
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 15.dp)
            .background(Color.Transparent)

//            .pointerInput(Unit) {
//                detectTapGestures {
//                    toChangeServer.value = false
//                    navHostController.navigate(
//                        Screen.ServerList.route
//                    )
//                    Screen.ServerList.isTrue = true
//                    Log.d("button_click_change", "Pressed")
//                }
//            }

        ,
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = R.drawable.worldmap3x),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(30.dp)
                    .weight(1f)
            )
        }
        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = "See All Locations",
                style = MaterialTheme.typography.labelMedium.copy(
                    fontSize = if (isTablet()) 20.sp else 16.sp
                ),
//                color = MaterialTheme.colorScheme.primary,
                color = colorResource(id = R.color.dark_blue_gray_text),
                maxLines = 2,
                modifier = Modifier
                    .padding(start = 12.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1F))
        Surface(
            modifier = Modifier.padding(start = 15.dp),
            color = Color.Transparent

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

    }
}

@Composable
fun ColumnScope.AddText(
    text: String,
    size: TextUnit,
    color: Color,
    style: TextStyle
) {
    Text(
        text = text,
        style = style,
        color = color,
        modifier = Modifier.padding(top = 5.dp)
    )
}

@Composable
fun ColumnScope.ColumnText(
    text: String,
    color: Color,
    size: TextUnit,
    style: TextStyle
) {
    Surface(
        modifier = Modifier.padding(start = 0.dp),
        color = Color.Transparent
    ) {
        Text(text = text,
            style = style,
            color = color,
            maxLines = 1,
            modifier = Modifier
                .padding(start = 0.dp, end = 0.dp)
                .weight(1f)
        )
    }
}
@Composable
fun RowScope.AddText(
    text: String,
    size: TextUnit,
    color: Color,
    isTablet: Boolean
) {
    Text(
        text = text,
        style = MaterialTheme.typography.labelMedium.copy(
            fontSize = 18.sp
        ),
        color = color,
        modifier = Modifier.padding(top = 0.dp)
    )
}
@Composable
fun OnLifecycleEvent(onEvent: (
    owner: LifecycleOwner,
    event: Lifecycle.Event
) -> Unit) {
    val eventHandler = rememberUpdatedState(onEvent)
    val lifecycleOwner = rememberUpdatedState(LocalLifecycleOwner.current)

    DisposableEffect(lifecycleOwner.value) {
        val lifecycle = lifecycleOwner.value.lifecycle
        val observer = LifecycleEventObserver { owner, event ->
            eventHandler.value(owner, event)
        }

        lifecycle.addObserver(observer)
        onDispose {
            lifecycle.removeObserver(observer)
        }
    }
}

private fun getEnableProtocols(protocol_name: String, prefHelper: BasePreferenceHelper): Boolean {
    prefHelper.getEnabledProtocols().let {
        if (it.contains(protocol_name)) {
            return true
        }
    }
    return false
}

@Composable
fun pinkBackgroundTV(): Painter {
    return if (isDarkTheme.value) painterResource(id = R.drawable.darkpinkbackground)
    else painterResource(id = R.drawable.pinkbackground3x)
}

@Composable
fun blueBackgroundTV(): Painter {
    return if (isDarkTheme.value) painterResource(id = R.drawable.darkbluebackground)
    else painterResource(id = R.drawable.bluebackground3x)
}