package com.vpn.fastestvpnservice.screens

import android.content.res.Configuration
import android.util.Log
import android.widget.Toast
import androidx.compose.animation.Animatable
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.LocalOverscrollConfiguration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.scrollable
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.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.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Surface
import androidx.compose.material.Tab
import androidx.compose.material.TabRowDefaults
import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.FileDownload
import androidx.compose.material.icons.filled.FilterList
import androidx.compose.material.icons.outlined.FilterList
import androidx.compose.material3.DockedSearchBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.ShapeDefaults
import androidx.compose.material3.TabRow
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
import androidx.compose.ui.res.painterResource
import androidx.lifecycle.ViewModelProvider
import androidx.lifecycle.viewmodel.ViewModelFactoryDsl
import androidx.lifecycle.viewmodel.compose.viewModel
import com.vpn.fastestvpnservice.R
import com.vpn.fastestvpnservice.beans.Server
import com.vpn.fastestvpnservice.beans.allLocationsList
import com.vpn.fastestvpnservice.beans.dvpnList
import com.vpn.fastestvpnservice.beans.favList
import com.vpn.fastestvpnservice.beans.p2pList
import com.vpn.fastestvpnservice.beans.recentList
import com.vpn.fastestvpnservice.beans.recommendedList
import com.vpn.fastestvpnservice.beans.smartList
import com.vpn.fastestvpnservice.beans.streamingList
import com.vpn.fastestvpnservice.customItems.CountryItem
import com.vpn.fastestvpnservice.customItems.ServerItem
import com.vpn.fastestvpnservice.customItems.ServerSearchItem
import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettings
import com.vpn.fastestvpnservice.sealedClass.Screen
import com.vpn.fastestvpnservice.viewmodels.ServerListViewModel
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun ServerList(
    navHostController: NavHostController,
    isAllLocationsShown: Boolean,
) {
    val focusManager = LocalFocusManager.current
    val context = LocalContext.current

    var serverListViewModel: ServerListViewModel = viewModel {
        ServerListViewModel(context = context)
    }
    val basePreferenceHelper = BasePreferenceHelper(context)

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                color = MaterialTheme.colorScheme.background
            )

    ) {
        HeaderRowSL(navHostController = navHostController)
        Column(
            modifier = Modifier
                .padding(horizontal = 16.dp)
                .padding(top = 100.dp)
        ) {
            ShowSearchBar()

            val serverTabItems = listOf("Recommended", "All Locations")
            val pagerState = rememberPagerState(pageCount = {serverTabItems.size})
            val selectedIndex by remember { derivedStateOf { pagerState.currentPage } }
            val scope = rememberCoroutineScope()

            if (Screen.ServerList.isTrue) {
                LaunchedEffect(key1 = true) {
                    scope.launch {
                        pagerState.animateScrollToPage(1)
                    }
                }
            }

            TabRow(
                selectedTabIndex = selectedIndex,
                containerColor = Color.White,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 16.dp)
                    .background(Color.Transparent)
                    .clip(RoundedCornerShape(28.dp))
                    .height(68.dp)
                   ,
                indicator = {
//                    TabRowDefaults.Indicator()
                },
                divider = {}
            ) {
                serverTabItems.forEachIndexed { index, currentTab ->

                    val color = remember { Animatable(Color.White) }

                    LaunchedEffect(key1 = selectedIndex == index) {
                        color.animateTo(
                            if (selectedIndex == index) Color(0xFFE9EDF9)
                            else Color.White
                        )
                    }

                    Tab(
                        selected = selectedIndex == index,
                        onClick = {
                            scope.launch {
                                pagerState.animateScrollToPage(index)
                            }
                        },
                        selectedContentColor = Color.White,
                        unselectedContentColor = Color.White,
                        text = { Text(text = currentTab,
                            style = TextStyle(
                                color = colorResource(id = R.color.dark_blue_gray_text),
                                fontSize = 14.sp,
                                textAlign = TextAlign.Center
                            )
                            ) },
                        modifier = Modifier
                            .padding(
                                start = 10.dp, end = 10.dp,
                                top = 10.dp, bottom = 10.dp
                            )
                            .background(
                                color = color.value,
                                shape = RoundedCornerShape(20.dp)
                            )

                    )
                }
            }

                HorizontalPager(
                    state = pagerState,
                    modifier = Modifier
                        .padding(top = 14.dp)
                        .fillMaxWidth()
                        .background(Color.Transparent)
                ) { page ->
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(top = 0.dp, bottom = 10.dp)
                    ) {
                        if (page == 0) {
                            ShowRecommendedList()
                        }
                        else if (page == 1) {
                            ShowAllLocationsList(serverListViewModel, basePreferenceHelper)
                        }
                    }
                }
        }
    }
}

@Composable
fun BoxScope.HeaderRowSL(
    navHostController: NavHostController) {
    IconButton(
        onClick = {
            navHostController.popBackStack()
//                    navHostController.navigate(BottomBarScreen.Help.route)
        },
        modifier = Modifier
            .align(Alignment.TopStart)
            .padding(top = 55.dp)
            .padding(start = 16.dp)
            .size(30.dp, 32.dp)
    ) {
        Icon(
            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
            contentDescription = "Arrow-Back",
            tint = MaterialTheme.colorScheme.primary,
            modifier = Modifier.size(30.dp, 32.dp)
        )
    }
    Surface(
        modifier = Modifier
            .padding(top = 55.dp)
            .height(32.dp)
            .align(Alignment.TopCenter)
            .padding(5.dp),
        color = colorResource(id = R.color.transparent)
    ) {
        Text(text = "Select Location",
            style = TextStyle(
                fontSize = 18.sp,
                color = MaterialTheme.colorScheme.primary,
                textAlign = TextAlign.Center,
                fontWeight = FontWeight.Medium
            ),
            modifier = Modifier.fillMaxHeight()

        )
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ColumnScope.ShowRecommendedList() {
    CompositionLocalProvider(
        LocalOverscrollConfiguration provides null
    ) {
        LazyColumn(
            modifier = Modifier
                .padding(top = 14.dp),
        ) {
            /* Fav List */
            item{
                Row(
                    verticalAlignment = Alignment.Top,
                    horizontalArrangement = Arrangement.Start,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 10.dp, bottom = 10.dp)
                        .background(Color.Transparent)
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.unfav_server3x),
                        contentDescription = "Server Logo",
                        tint = MaterialTheme.colorScheme.primary,
                        modifier = Modifier
                            .padding(bottom = 0.dp)
                            .size(19.dp)
                    )
                    Text(text = "Favorite Location",
                        style = TextStyle(
                            fontSize = 16.sp,
                            color = MaterialTheme.colorScheme.primary
                        ),
                        modifier = Modifier
                            .padding(start = 16.dp, bottom = 0.dp)
                            .align(Alignment.CenterVertically)
                    )
                }
            }
            for (i in 1..1) {
                items(items = favList) { server ->
                    ServerItem(server)
                }
            }

            /* Smart List */
            item {
                Row(
                    verticalAlignment = Alignment.Top,
                    horizontalArrangement = Arrangement.Start,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 24.dp, bottom = 10.dp)
                        .background(Color.Transparent)
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.smartlogo3x),
                        contentDescription = "Server Logo",
                        tint = MaterialTheme.colorScheme.primary,
                        modifier = Modifier
                            .padding(bottom = 0.dp)
                            .size(19.dp)
                    )
                    Text(text = "Smart Location",
                        style = TextStyle(
                            fontSize = 16.sp,
                            color = MaterialTheme.colorScheme.primary
                        ),
                        modifier = Modifier
                            .padding(start = 16.dp, bottom = 0.dp)
                            .align(Alignment.CenterVertically)
                    )
                }
            }
            items(items = smartList) { server ->
                ServerItem(server)
            }

            /* Recent List */
            item {
                Row(
                    verticalAlignment = Alignment.Top,
                    horizontalArrangement = Arrangement.Start,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 24.dp, bottom = 10.dp)
                        .background(Color.Transparent)
                ) {
                    Icon(
                        painter = painterResource(
                            id = R.drawable.recent3x),
                        contentDescription = "Server Logo",
                        tint = MaterialTheme.colorScheme.primary,
                        modifier = Modifier
                            .padding(bottom = 0.dp)
                            .size(19.dp)
                    )
                    Text(text = "Recent Location",
                        style = TextStyle(
                            fontSize = 16.sp,
                            color = MaterialTheme.colorScheme.primary
                        ),
                        modifier = Modifier
                            .padding(start = 16.dp, bottom = 0.dp)
                            .align(Alignment.CenterVertically)
                    )
                }
            }
            items(items = recentList) { server ->
                ServerItem(server)
            }

            /* Recommended List */
            item {
                Row(
                    verticalAlignment = Alignment.Top,
                    horizontalArrangement = Arrangement.Start,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 24.dp, bottom = 10.dp)
                        .background(Color.Transparent)
                ) {
                    Icon(
                        painter = painterResource(
                            id = R.drawable.recommended3x),
                        contentDescription = "Server Logo",
                        tint = MaterialTheme.colorScheme.primary,
                        modifier = Modifier
                            .padding(bottom = 0.dp)
                            .size(19.dp)
                    )
                    Text(text = "Recommended Location",
                        style = TextStyle(
                            fontSize = 16.sp,
                            color = MaterialTheme.colorScheme.primary
                        ),
                        modifier = Modifier
                            .padding(start = 16.dp, bottom = 0.dp)
                            .align(Alignment.CenterVertically)
                    )
                }
            }
            items(items = recommendedList) { server ->
                ServerItem(server)
            }
        }
    }

}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ColumnScope.ShowAllLocationsList(
    serverListViewModel: ServerListViewModel,
    basePreferenceHelper: BasePreferenceHelper
) {
    val allLocationsTabItems = listOf(
        "Countries", "Streaming", "D-VPN", "P2P"
    )
    val pagerState = rememberPagerState(pageCount = { allLocationsTabItems.size })
    val selectedIndex by remember { derivedStateOf { pagerState.currentPage } }
    val scope = rememberCoroutineScope()

    TabRow(
        selectedTabIndex = selectedIndex,
        containerColor = Color.Transparent,
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 0.dp)
            .background(Color.Transparent)
            .clip(RoundedCornerShape(0.dp))
            .height(68.dp),
        indicator = { selectedTab ->
            TabRowDefaults.Indicator(
                modifier = Modifier.tabIndicatorOffset(selectedTab[selectedIndex]),
                color = colorResource(id = R.color.blue_text)
            )
        },
//                                divider = {}
    ) {
        allLocationsTabItems.forEachIndexed { index1, locationTab ->
//                                    val color = remember { Animatable(Color.Transparent) }
            var color by remember { mutableStateOf(Color.Transparent) }
            var alpha by remember { mutableFloatStateOf(1F) }

                color =
                    if (selectedIndex == index1)
                        Color(0xFF2952c3)
                    else MaterialTheme.colorScheme.primary
                alpha = if (selectedIndex == index1)
                    1F else 0.5F

            Tab(
                selected = selectedIndex == index1,
                onClick = {
                    scope.launch {
                        pagerState.animateScrollToPage(index1)
                    }
                },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White,
                text = {
                    Text(
                        text = locationTab,
                        style = TextStyle(
                            color = color,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Center,
                        ),
                        modifier = Modifier
                            .fillMaxWidth()
                            .alpha(alpha)
                    )
                },
                modifier = Modifier

                    .background(
//                        color = color.value,
                        color = Color.Transparent,
                        shape = RoundedCornerShape(0.dp)
                    )
            )
        }
    }

    var isCountriesExpanded by rememberSaveable { mutableStateOf(true) }
    var isStreamingExpanded by rememberSaveable { mutableStateOf(true) }
    var isDvpnExpanded by rememberSaveable { mutableStateOf(true) }
    var isP2PExpanded by rememberSaveable { mutableStateOf(true) }

    val rotationState by animateFloatAsState(
        targetValue = if (isCountriesExpanded) 180f else 0f,
        label = if (isCountriesExpanded) "Show Less" else "Show More"
    )
    val rotationState2 by animateFloatAsState(
        targetValue = if (isStreamingExpanded) 180f else 0f,
        label = if (isStreamingExpanded) "Show Less" else "Show More"
    )
    val rotationState3 by animateFloatAsState(
        targetValue = if (isDvpnExpanded) 180f else 0f,
        label = if (isDvpnExpanded) "Show Less" else "Show More"
    )
    val rotationState4 by animateFloatAsState(
        targetValue = if (isP2PExpanded) 180f else 0f,
        label = if (isP2PExpanded) "Show Less" else "Show More"
    )

    HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .padding(top = 16.dp)
            .fillMaxWidth()
            .background(Color.Transparent)
    ) { serverTabPager ->
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            var serverTitle by rememberSaveable { mutableStateOf("") }
            var icon by rememberSaveable { mutableStateOf(0) }

            when (serverTabPager) {
                0 -> {
                    serverTitle = allLocationsTabItems[0]
                    icon = if (isCountriesExpanded) R.drawable.dragarrow3x
                            else R.drawable.downarrow3x
                }
                1 -> {
                    serverTitle = allLocationsTabItems[1]
                    icon = if (isStreamingExpanded) R.drawable.dragarrow3x
                    else R.drawable.downarrow3x
                }
                2 -> {
                    serverTitle = allLocationsTabItems[2]
                    icon = if (isDvpnExpanded) R.drawable.dragarrow3x
                    else R.drawable.downarrow3x
                }
                3 -> {
                    serverTitle = allLocationsTabItems[3]
                    icon = if (isP2PExpanded) R.drawable.dragarrow3x
                    else R.drawable.downarrow3x
                }
            }

            ShowHeaderItem(serverTitle, icon, serverTabPager) {
                when (serverTabPager) {
                    0 -> {
                        isCountriesExpanded = !isCountriesExpanded
                    }
                    1 -> {
                        isStreamingExpanded = !isStreamingExpanded
                    }
                    2 -> {
                        isDvpnExpanded = !isDvpnExpanded
                    }
                    3 -> {
                        isP2PExpanded = !isP2PExpanded
                    }
                }
            }

            when (serverTabPager) {
                    0 -> {
                        if (isCountriesExpanded) {
                            CompositionLocalProvider(
                                LocalOverscrollConfiguration provides null
                            ) {
                                val country = basePreferenceHelper.getServerData()
                                val filterData = country.get(0).servers?.let {
                                    serverListViewModel.filterServersByISO(
                                        it
                                    )
                                }
                                Log.d("test_country_list", filterData?.get(0)?.country.toString() + " " + filterData?.size)

                                LazyColumn() {
                                    items(items = allLocationsList) { country ->
                                        CountryItem(server = country)
                                    }
                                }
                            }

                        }
                    }
                    1 -> {
                        if (isStreamingExpanded) {
                            CompositionLocalProvider(
                                LocalOverscrollConfiguration provides null
                            ) {

                                LazyColumn() {
                                    items(items = streamingList) { streaming ->
                                        ServerItem(server = streaming)
                                    }
                                }
                            }
                        }
                    }
                    2 -> {
                        if (isDvpnExpanded) {
                            CompositionLocalProvider(
                                LocalOverscrollConfiguration provides null
                            ) {
                                LazyColumn() {
                                    items(items = dvpnList) { dvpn ->
                                        ServerItem(server = dvpn)
                                    }
                                }
                            }

                        }
                    }
                    3 -> {
                        if (isP2PExpanded) {
                            CompositionLocalProvider(
                                LocalOverscrollConfiguration provides null
                            ) {
                                LazyColumn() {
                                    items(items = p2pList) { p2p ->
                                        ServerItem(server = p2p)
                                    }
                                }
                            }
                        }
                    }
                }
        }
    }
}

@Composable
fun ColumnScope.ShowHeaderItem(
    serverTitle: String,
    icon: Int,
    serverTabPager: Int,
    onClick: () -> Unit
) {
    Row(
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp, bottom = 10.dp)
            .background(Color.Transparent)
    ) {
        Text(
            text = serverTitle,
            style = TextStyle(
                fontSize = 16.sp,
                color = MaterialTheme.colorScheme.primary
            ),
            modifier = Modifier
                .padding(start = 0.dp, bottom = 0.dp)
                .align(Alignment.CenterVertically)
        )
        Icon(
            painter = painterResource(id = icon),
            contentDescription = "Server Logo",
            tint = MaterialTheme.colorScheme.primary,
            modifier = Modifier
                .padding(bottom = 0.dp, end = 12.dp)
                .size(12.dp, 7.dp)
                .align(Alignment.CenterVertically)
//                        .rotate(rotationState)
//                        .rotate(rotationState2)
//                        .rotate(rotationState3)
//                        .rotate(rotationState4)
                .pointerInput(Unit) {
                    detectTapGestures {
                        when (serverTabPager) {
                            0 -> {
                                onClick()
                            }

                            1 -> {
                                onClick()
                            }

                            2 -> {
                                onClick()
                            }

                            3 -> {
                                onClick()
                            }
                        }
                    }
                }
        )
    }

    Surface(
        modifier = Modifier
            .padding(top = 11.dp, end = 0.dp)
            .height(1.dp)
            .fillMaxWidth()
            .alpha(0.6F)
        ,
        color = colorResource(id = R.color.gray_icon)
    ) {}
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun ColumnScope.ShowSearchBar() {
    var searchText by remember { mutableStateOf("") }
    var isActive by remember { mutableStateOf(false) }

    var isFilter by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState()
    val filterList = listOf("Popularity", "Alphabetically")
    var selectedFilterList by remember { mutableStateOf(filterList[0]) }
    val context = LocalContext.current

    SearchBar(
        query = searchText,
        onQueryChange = {
            searchText = it
        },
        onSearch = {
            isActive = false
        },
        active = isActive,
        onActiveChange = {
            isActive = it
        },
        placeholder = {
            Text(
                text = "Search Location",
                style = TextStyle(
                    fontSize = 14.sp,
                    color = colorResource(id = R.color.dark_blue_gray_text)
                ),
                modifier = Modifier

            )
        },
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.search3x),
                contentDescription = "Search Icon",

                modifier = Modifier
                    .size(21.dp)
            )
        },
        trailingIcon = {
            IconButton(onClick = { isFilter = true }) {
                Icon(
                    painter = painterResource(id = R.drawable.filter3x),
                    contentDescription = "Search Icon",
                    tint = colorResource(id = R.color.dark_blue_gray_text),
                    modifier = Modifier
                        .size(24.dp)
                )
            }
        },
        colors = SearchBarDefaults.colors(
            containerColor = colorResource(id = R.color.white),
            dividerColor = Color.Transparent,
            inputFieldColors = TextFieldDefaults.colors(
                focusedTextColor = colorResource(id = R.color.dark_blue_gray_text),
                unfocusedTextColor = colorResource(id = R.color.dark_blue_gray_text)
            )
        ),
        modifier = Modifier
            .fillMaxWidth()
    ) {
        CompositionLocalProvider(
            LocalOverscrollConfiguration provides null
        ) {
            LazyColumn(
                modifier = Modifier
                    .padding(top = 0.dp, bottom = 0.dp),
            ) {
                for (i in 1..20) {
                    items(items = favList) { server ->
                        ServerSearchItem(server)
                    }
                }
            }
        }
    }

    if (isFilter) {
        ModalBottomSheet(
            onDismissRequest = { isFilter = false },
            sheetState = sheetState,
            containerColor = MaterialTheme.colorScheme.background
        ) {
            Box(modifier = Modifier
                .background(Color.Transparent)
                .fillMaxWidth()
                .height(215.dp)
                .padding(start = 0.dp, top = 10.dp),
            ) {
                Column(
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.Start
                ) {
                    AddTextSettings(
                        text = "Sort By",
                        size = 18.sp,
                        color = MaterialTheme.colorScheme.primary,
                        bottomPadding = 20.dp,
                        startPadding = 16.dp
                    )
                    filterList.forEach { filter ->
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Transparent)
                                .padding(start = 2.dp)
//                                    .selectable(
//                                        selected = selectedProtocol == protocol,
//                                        onClick = {
//                                            selectedProtocol = protocol
//                                        },
//                                    )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                            ,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            RadioButton(
                                selected = filter == selectedFilterList,
                                onClick = {
                                    selectedFilterList = filter

                                },
                                colors = RadioButtonDefaults.colors(
                                    selectedColor = colorResource(id = R.color.radio_button_blue),
                                    unselectedColor = colorResource(id = R.color.gray_icon)),
                            )
                            Text(text = filter,
                                modifier = Modifier.padding(start = 12.dp),
                                style = TextStyle(
                                    fontSize = 14.sp,
                                    color = MaterialTheme.colorScheme.primary
                                )
                            )
                        }
                    }
                }
            }
        }
    }
}


@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun ServerListPreview() {
    ServerList(rememberNavController(), false)
}