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

package com.vpn.fastestvpnservice.screensTV

import android.content.Context
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.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.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.R
import com.vpn.fastestvpnservice.beans.isDarkTheme
import com.vpn.fastestvpnservice.constants.smartConnect
import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
import com.vpn.fastestvpnservice.navigation.isFirstItemPressed
import com.vpn.fastestvpnservice.navigation.isHomeScreenPressed
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 de.blinkt.openvpn.core.App

lateinit var vpnConnectionsUtil: VPNConnectionsUtil

@Composable
fun HomeTV(navHostController: 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(),
//                    "android",
//                    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!")
            }
        }
    }

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

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

    Column(
        modifier = Modifier
            .background(colorResource(id = R.color.background_color_gray))
            .fillMaxSize(),
    ) {
        // 1st box
        ConstraintLayout(modifier = Modifier
            .fillMaxSize()
            .weight(0.65f)
            .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 = 70.dp)
//                            .offset(y = -(118).dp)
                        .background(Color.Transparent),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Top
                ) {
                    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 = if (isTablet()) 24.sp else 18.sp
                        )
                    )
                    Row(
                    ) {
                        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(if (isTablet()) 26.dp else 20.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(if (isTablet()) 26.dp else 20.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 = if (isTablet()) 24.sp else 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 = if (isTablet()) 24.sp else 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 = if (isTablet()) 24.sp else 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(180.dp)
                        height = Dimension.value(180.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(180.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.35f)
//                .background(Color.Transparent),
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Top
            ) {

                Box(
                    modifier = Modifier
                        .fillMaxWidth(fraction = if (isTablet()) 0.5f else 1f)
                        .padding(horizontal = 20.dp)
                        .padding(vertical = 2.dp)
                        .height(100.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 = 8.dp, top = 16.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(40.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 = if (isTablet()) 21.sp else 18.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 = if (isTablet()) 0.5f else 1f)
                        .padding(horizontal = 20.dp, vertical = 2.dp)
                        .padding(top = 0.dp)
                        .height(55.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()
                            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(40.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 = if (isTablet()) 16.sp else 12.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 = if (isTablet()) 20.sp else 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 {
                        navHostController.navigate(
                            ScreenTV.ServerListTV.route
                        )
                    }
                    .focusable()
                ,
                text = AnnotatedString("Change"),
                style = MaterialTheme.typography.customTypography.headlineMedium.copy(
//                    MaterialTheme.colorScheme.surfaceContainerLow,
                    color = color,
                    fontSize = if (isTablet()) 20.sp else 14.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(bottom = if (isTablet()) 15.dp else 0.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 = if (isTablet()) 22.sp else 16.sp
        ),
        color = color,
        modifier = Modifier.padding(bottom = if (isTablet()) 15.dp else 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)
        }
    }
}

@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)
}