account & help screen on TV added

app/src/main/java/com/vpn/fastestvpnservice/navigation/BottomBarNavGraphTV.kt

@@ -28,6 +28,8 @@ import com.vpn.fastestvpnservice.screens.helpScreensAll.PrivacyPolicy
 import com.vpn.fastestvpnservice.screens.helpScreensAll.TermsAndConditions
 import com.vpn.fastestvpnservice.screens.settingsScreenAll.Notifications
 import com.vpn.fastestvpnservice.screens.settingsScreenAll.SplitTunneling
+import com.vpn.fastestvpnservice.screensTV.AccountTV
+import com.vpn.fastestvpnservice.screensTV.HelpTV
 import com.vpn.fastestvpnservice.screensTV.HomeTV
 import com.vpn.fastestvpnservice.screensTV.SettingsTV
 import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
@@ -65,10 +67,10 @@ fun BottomBarNavGraphTV(navHostController: NavHostController,
             SettingsTV(navHostController = navHostController)
         }
         composable(route = BottomBarScreen.Help.route) { entry ->
-            HomeTV(navHostController = navHostController)
+            HelpTV(navHostController = navHostController)
         }
         composable(route = BottomBarScreen.Account.route) {
-            HomeTV(navHostController = navHostController,)
+            AccountTV(navHostController = navHostController, settingsNavHostController = settingsNavHostController)
         }
 
         /* Again declare for login because of different -> navHostController */

app/src/main/java/com/vpn/fastestvpnservice/screensTV/AccountScreenTV.kt

@@ -0,0 +1,644 @@
+package com.vpn.fastestvpnservice.screensTV
+
+import android.app.Activity
+import android.content.Intent
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.LocalOverscrollConfiguration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.DialogProperties
+import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavHostController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddRowAccount
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddRowAccountIcon
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddRowAccountIconFirst
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextAccount
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.LogoutDialog
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.act
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import com.vpn.fastestvpnservice.utils.VPNConnectionsUtil
+import com.vpn.fastestvpnservice.utils.isTablet
+import com.vpn.fastestvpnservice.viewmodels.AccountViewModel
+import com.vpn.fastestvpnservice.viewmodels.HomeViewModel
+import com.vpn.fastestvpnservice.widgets.SimpleAppWidget
+import de.blinkt.openvpn.core.App
+import kotlinx.coroutines.delay
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun AccountTV(navHostController: NavHostController,
+            settingsNavHostController: NavHostController)
+{
+    var isLoggedOut by remember { mutableStateOf(false) }
+    var isDelete by remember { mutableStateOf(false) }
+    val context = LocalContext.current
+    val basePreferenceHelper = BasePreferenceHelper(context)
+    val accountViewModel: AccountViewModel = viewModel()
+
+    CompositionLocalProvider(
+        LocalOverscrollConfiguration provides null
+    ) {
+        Box(modifier = Modifier
+            .background(colorResource(id = R.color.background_color_gray))
+            .fillMaxSize()
+            .padding(vertical = 10.dp)
+            .verticalScroll(rememberScrollState())
+//        contentAlignment = Alignment.Center
+
+        ) {
+            val view = LocalView.current
+            val window = (view.context as Activity).window
+            window.statusBarColor = Color.Transparent.toArgb()
+            window.navigationBarColor = Color.Transparent.toArgb()
+
+            Column(
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 24.dp)
+                    .fillMaxSize()
+            ) {
+                Spacer(modifier = Modifier.height(50.dp))
+                AddTextAccountTV(
+                    text = "Account",
+                    size = 28.sp,
+                    color = MaterialTheme.colorScheme.inversePrimary
+                )
+                Spacer(modifier = Modifier.height(15.dp))
+                AddRowAccountTV("Email: ", basePreferenceHelper.getUser()?.userinfo?.email ?: "")
+                AddRowAccountTV("Product: ", basePreferenceHelper.getProduct()?.productName ?: "")
+                AddRowAccountTV("Account Status: ", basePreferenceHelper.getProduct()?.status ?: "")
+
+                Surface(
+                    modifier = Modifier
+                        .padding(top = 23.5.dp, bottom = 0.dp)
+                        .height(1.dp)
+                        .fillMaxWidth(),
+                    color = colorResource(id = R.color.gray_icon)
+                ) {}
+
+                Spacer(modifier = Modifier.height(23.5.dp))
+
+                AddRowAccountIconFirstTV(
+                    icon = painterResource(id = R.drawable.subscription3x),
+                    text = "Upgrade Subscription",
+                    onClick = {
+                        navHostController.navigate(
+                            Screen.Subscription.route
+                        )
+                    }
+                )
+                AddRowAccountIconTV(
+                    icon = painterResource(id = R.drawable.fav3x),
+                    text = "Favorite Servers",
+                    onClick = {
+                        navHostController.navigate(
+                            Screen.FavoriteServers.route
+                        )
+                    }
+                )
+                AddRowAccountIconTV(
+                    icon = painterResource(id = R.drawable.lock3x),
+                    text = "Change Password",
+                    onClick = {
+                        navHostController.navigate(
+                            Screen.ChangePassword.route
+                        )
+                    }
+                )
+                AddRowAccountIconTV(
+                    icon = painterResource(id = R.drawable.delete3x),
+                    text = "Delete Account",
+                    onClick = {
+                        isDelete = true
+                        Log.d("islogoutClicked?", "isDelete Yes")
+                    }
+                )
+                AddRowAccountIconTV(
+                    icon = painterResource(id = R.drawable.logout3x),
+                    text = "Logout",
+                    onClick = {
+                        isLoggedOut = true
+                        Log.d("islogoutClicked?", "Yes")
+                    }
+                )
+            }
+
+            if (isLoggedOut) {
+                Log.d("islogoutClicked", "isLoggedOut$isLoggedOut")
+
+                AlertDialog(
+                    onDismissRequest = { isLoggedOut = false },
+                    properties = DialogProperties(),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(228.dp)
+                ) {
+                    LogoutDialog("Logout Account",
+                        "Are you sure to logout the account?",
+                        onCancel = {
+                            isLoggedOut = false
+                        },
+                        settingsNavHostController,
+                        isLoggedOut,
+                        isDelete,
+                        basePreferenceHelper,
+                        accountViewModel
+                    )
+                }
+            }
+
+            if (isDelete) {
+                Log.d("islogoutClicked", "isDelete$isDelete")
+
+                AlertDialog(
+                    onDismissRequest = { isDelete = false },
+                    properties = DialogProperties(),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(228.dp)
+                ) {
+                    LogoutDialog("Delete Account",
+                        "Are you sure to delete the account?",
+                        onCancel = { isDelete = false },
+                        settingsNavHostController,
+                        isLoggedOut,
+                        isDelete,
+                        basePreferenceHelper,
+                        accountViewModel
+                    )
+                }
+            }
+
+            if (accountViewModel.liveDataLogoutStatus.value == true) {
+                var progress by remember { mutableFloatStateOf(0.1F) }
+
+                LaunchedEffect(key1 = Unit) {
+                    for (i in 1..100) {
+                        progress = i.toFloat()/100F
+                        delay(100)
+                    }
+                }
+
+                CircularProgressIndicator(
+                    progress = { progress },
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(50.dp),
+                    color = colorResource(id = R.color.yellow_text),
+                    strokeWidth = 5.dp,
+                )
+            }
+
+            val logoutResponse = accountViewModel.liveDataLogout.observeAsState().value
+            logoutResponse?.let {
+                Log.d("test_button_log", "logout api response")
+                accountViewModel.setLogoutStatus(false)
+                if (it) {
+                    Log.d("test_api_response","Logout live: $logoutResponse")
+                    basePreferenceHelper.setLoggedInState(false)
+                    basePreferenceHelper.clearAllData()
+                    settingsNavHostController.popBackStack()
+                    settingsNavHostController.navigate(Screen.Started.route)
+
+                    val widgetIntent = Intent(context, SimpleAppWidget::class.java)
+                    widgetIntent.action = SimpleAppWidget.ACTION_LOGOUT
+                    context.sendBroadcast(widgetIntent)
+                }
+                else {
+                    Log.d("test_api_response","Logout false: $logoutResponse")
+                    accountViewModel.mutableLiveDataLogoutStatus.value = false
+                    Toast.makeText(context, logoutResponse.toString(), Toast.LENGTH_SHORT).show()
+                }
+                accountViewModel.mutableLiveDataLogout.value = null
+            }
+
+            val deleteResponse = accountViewModel.liveDataDelete.observeAsState().value
+            deleteResponse?.let {
+                accountViewModel.setLogoutStatus(false)
+                if (it.status) {
+                    Log.d("test_api_response","Delete live: ${deleteResponse.status}")
+                    basePreferenceHelper.setLoggedInState(false)
+                    basePreferenceHelper.clearAllData()
+                    settingsNavHostController.popBackStack()
+                    settingsNavHostController.navigate(Screen.Started.route)
+                }
+                else {
+                    Log.d("test_api_response","Delete false: ${deleteResponse.status}")
+                    accountViewModel.mutableLiveDataDeleteStatus.value = false
+                    Toast.makeText(context, deleteResponse.status.toString(), Toast.LENGTH_SHORT).show()
+                }
+                accountViewModel.mutableLiveDataDelete.value = null
+            }
+        }
+    }
+}
+@Composable
+fun ColumnScope.AddTextAccountTV(text: String, size: TextUnit, color: Color) {
+    Text(
+        text = text,
+        color = color,
+        style = MaterialTheme.typography.headlineLarge
+    )
+}
+
+@Composable
+fun ColumnScope.AddRowAccountTV(title: String, subTitle: String) {
+//    val configuration = LocalConfiguration.current
+//    val isTablet = configuration.screenWidthDp > 840
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 16.dp)
+            .background(Color.Transparent)
+            .height(if (isTablet()) 20.dp else 18.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Text(text = title,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.bodyLarge.copy(
+                    fontSize = if (isTablet()) 15.sp else 14.sp
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 10.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+//        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Text(text = subTitle,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.bodySmall.copy(
+                    fontSize = if (isTablet()) 16.sp else 14.sp
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
+                    .weight(1f)
+                    .alpha(0.6F)
+            )
+        }
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddRowAccountIconFirstTV(
+    icon: Painter,
+    text: String,
+    onClick : () -> Unit
+) {
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 0.dp)
+            .background(Color.Transparent)
+            .height(24.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    onClick()
+                }
+            },
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = icon,
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.titleSmall,
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 18.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 3.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+
+
+    }
+
+
+}
+
+@Composable
+fun ColumnScope.AddRowAccountIconTV(
+    icon: Painter,
+    text: String,
+    onClick : () -> Unit
+) {
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 40.dp)
+            .background(Color.Transparent)
+            .height(24.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    onClick()
+                }
+            },
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = icon,
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.titleSmall,
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 18.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 3.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+
+
+    }
+
+
+}
+
+@Composable
+fun BoxScope.LogoutDialogTV(
+    title: String,
+    desc: String,
+    onCancel : () -> Unit,
+    settingsNavHostController: NavHostController,
+    isLogout: Boolean,
+    isDelete: Boolean,
+    basePreferenceHelper: BasePreferenceHelper,
+    accountViewModel: AccountViewModel
+) {
+    val context = LocalContext.current
+    val scope = rememberCoroutineScope()
+    val homeViewModel: HomeViewModel = viewModel {
+        HomeViewModel(context, scope)
+    }
+    Surface(
+        color = colorResource(id = R.color.white),
+        modifier = Modifier
+            .background(Color.Transparent)
+            .fillMaxWidth()
+        ,
+        shape = RoundedCornerShape(18.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .background(MaterialTheme.colorScheme.onBackground)
+        ) {
+            Log.d("islogoutClicked", "AlertDialog")
+
+            Text(text = title,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier.padding(top = 45.dp)
+            )
+            Text(text = desc,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.labelSmall,
+                maxLines = 2,
+                modifier = Modifier.padding(top = 26.dp)
+            )
+            Row (
+                modifier = Modifier
+                    .padding(top = 34.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.Bottom
+            ) {
+                Button(
+                    onClick = {
+                        Log.d("test_button", "No")
+                        onCancel()
+//                                    navHostController.popBackStack()
+//                                    navHostController.navigate(Screen.Login.route)
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 15.dp, end = 5.dp,
+                            bottom = 0.dp, top = 0.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(52.dp),
+
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.light_blue),
+                    ),
+                )
+                {
+                    Text(text = "No",
+                        style = MaterialTheme.typography.labelLarge)
+                    Log.d("test_button", "RowScope")
+                }
+
+                Button(
+                    onClick = {
+                        Log.d("test_button", "Logout Yes")
+
+                        if (isLogout) {
+                            Log.d("test_api_response","Logout click = $isLogout")
+
+                            val connectState = homeViewModel.isConnect.value
+                            if (connectState == App.CONNECTED || connectState == App.CONNECTING) {
+                                Log.d("test_button_log", "connectState = $connectState, act = $act")
+                                Handler(Looper.getMainLooper()).postDelayed({
+                                    val wg = VPNConnectionsUtil(context, act ,homeViewModel)
+                                    wg.stopVpn()
+                                }, 400)
+                            }
+
+                            Log.d("test_button_log", "logout api")
+                            accountViewModel.setLogoutStatus(true)
+                            accountViewModel.logout()
+
+                            onCancel()
+                        }
+
+                        if (isDelete) {
+                            Log.d("test_api_response","Delete click = $isDelete")
+                            accountViewModel.setLogoutStatus(true)
+                            accountViewModel.deleteAccount()
+                            onCancel()
+                        }
+
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 5.dp, end = 15.dp,
+                            bottom = 0.dp, top = 0.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(52.dp),
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.red),
+                    ),
+//                                border = BorderStroke(2.dp,
+//                                    colorResource(id = R.color.gray_icon))
+                )
+                {
+                    Text(text = "Yes",
+                        style = MaterialTheme.typography.labelLarge)
+                    Log.d("test_button", "RowScope")
+
+//                    val logoutResponse = accountViewModel.liveDataLogout.observeAsState().value
+//                    if (logoutResponse == true) {
+//                        accountViewModel.setLogoutStatus(false)
+//                        Log.d("test_api_response","Logout live: $logoutResponse")
+//                        basePreferenceHelper.setLoggedInState(false)
+//                        settingsNavHostController.popBackStack()
+//                        settingsNavHostController.navigate(Screen.Started.route)
+//                    }
+//                    else {
+////                        accountViewModel.setLogoutStatus(false)
+////                        onCancel()
+//                    }
+                }
+            }
+        }
+
+    }
+}

app/src/main/java/com/vpn/fastestvpnservice/screensTV/HelpScreenTV.kt

@@ -0,0 +1,311 @@
+package com.vpn.fastestvpnservice.screensTV
+
+import android.app.Activity
+import android.util.Log
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.LocalOverscrollConfiguration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Message
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.core.view.WindowCompat
+import androidx.navigation.NavHostController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.isDarkTheme
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddRow
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddRowIcon
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextHelp
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun HelpTV(navHostController: NavHostController) {
+
+    CompositionLocalProvider(
+        LocalOverscrollConfiguration provides null
+    ) {
+        Box(
+            modifier = Modifier
+                .background(colorResource(id = R.color.background_color_gray))
+                .fillMaxSize()
+                .padding(vertical = 10.dp)
+                .verticalScroll(rememberScrollState()),
+//        contentAlignment = Alignment.Center
+
+        ) {
+            val view = LocalView.current
+            val window = (view.context as Activity).window
+            window.statusBarColor = Color.Transparent.toArgb()
+            window.navigationBarColor = Color.Transparent.toArgb()
+
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !isDarkTheme.value
+
+            Column(
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 24.dp)
+                    .fillMaxSize()
+            ) {
+                Spacer(modifier = Modifier.height(50.dp))
+                AddTextHelpTV(
+                    text = "Help",
+                    size = 28.sp,
+                    color = MaterialTheme.colorScheme.inversePrimary
+                )
+                AddRowTV(icon = R.drawable.faq3x,
+                    text = "FAQ", navHostController = navHostController,
+                    topPadding = 33.dp)
+                {
+                    navHostController.navigate(
+                        Screen.FAQ.route
+                    )}
+                AddRowTV(icon = R.drawable.privacy3x,
+                    text = "Privacy Policy", navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.PrivacyPolicy.route
+                    )
+                }
+                AddRowTV(icon = R.drawable.terms3x,
+                    text = "Terms and Conditions", navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.TermsAndConditions.route
+                    )
+                }
+                AddRowTV(icon = R.drawable.about3x,
+                    text = "About Fastest VPN", navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.About.route
+                    )
+                }
+                AddRowIconTV(icon = Icons.AutoMirrored.Filled.Message,
+                    text = "Customer Support",
+                    navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.CustomerSupport.route
+                    )
+                }
+                AddRowTV(icon = R.drawable.customer_support3x,
+                    text = "Email Us",
+                    navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.EmailUs.route
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.AddRowTV(
+    icon: Int,
+    text: String,
+    navHostController: NavHostController,
+    topPadding: Dp = 40.dp,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = topPadding)
+            .background(Color.Transparent)
+            .height(24.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    Log.d("test_row", "Clicked Row ${onClick().toString()}")
+                    onClick()
+                }
+            }
+//            .clickable {
+//                Log.d("test_row", "Clicked Row ${onClick.toString()}")
+//                onClick()
+//            }
+        ,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = icon),
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.titleSmall,
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 18.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(
+                    id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 3.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f)
+                    .alpha(1F),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddRowIconTV(
+    icon: ImageVector,
+    text: String,
+    navHostController: NavHostController,
+    topPadding: Dp = 40.dp,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = topPadding)
+            .background(Color.Transparent)
+            .height(24.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    Log.d("test_row", "Clicked Row ${onClick().toString()}")
+                    onClick()
+                }
+            }
+//            .clickable {
+//                Log.d("test_row", "Clicked Row ${onClick.toString()}")
+//                onClick()
+//            }
+        ,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                imageVector = icon,
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                color = MaterialTheme.colorScheme.inversePrimary,
+                style = MaterialTheme.typography.titleSmall,
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 18.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(
+                    id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 3.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f)
+                    .alpha(1F),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.inversePrimary)
+            )
+        }
+
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddTextHelpTV(text: String, size: TextUnit, color: Color) {
+    Text(
+        text = text,
+        color = color,
+        style = MaterialTheme.typography.headlineLarge,
+    )
+}