package com.vpn.fastestvpnservice.screens.settingsScreenAll

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
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.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.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
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.draw.alpha
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
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 com.vpn.fastestvpnservice.R
import com.vpn.fastestvpnservice.beans.SplitTunnelData
import com.vpn.fastestvpnservice.beans.splitTunnelList
import com.vpn.fastestvpnservice.beans.splitTunnelList2
import com.vpn.fastestvpnservice.customItems.SplitTunnelingItem

@Composable
fun SplitTunneling(navHostController: NavHostController) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        HeaderRowST(navHostController = navHostController)

        Column(
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.Start,
            modifier = Modifier
                .padding(top = 120.dp, start = 0.dp, end = 0.dp)
                .fillMaxSize()
                .background(Color.Transparent)
        ) {
            var isExpanded by remember { mutableStateOf(true) }
            val icon = if (isExpanded) R.drawable.dragarrow3x
                        else R.drawable.downarrow3x
//            val rotationState by animateFloatAsState(
//                targetValue = if (isExpanded) 180f else 0f,
//                label = if (isExpanded) "Show Less" else "Show More")

            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .padding(start = 16.dp, end = 28.dp)
                    .fillMaxWidth()
            ) {
                Text(text = "While VPN is Connected",
                    style = TextStyle(
                        fontSize = 16.sp,
                        lineHeight = 20.sp,
                        fontWeight = FontWeight.Medium,
                        color = MaterialTheme.colorScheme.primary
                    ),
                    )
                IconButton(onClick = {
                    isExpanded = !isExpanded
                },
                    modifier = Modifier
                        .background(Color.Transparent)
//                        .rotate(rotationState)
                        .size(12.dp, 7.dp)
                ) {
                    Icon(
                        painter = painterResource(
                            id = icon),
                        contentDescription = "Arrow-DropDown",
                        tint = MaterialTheme.colorScheme.primary
                    )

                }
            }

            if (isExpanded)
            {
                ShowRadioButtons()
            }
        }
    }
}

@Composable
fun ColumnScope.ShowRadioButtons() {
    val splitList = listOf("All apps use the VPN", "Only allow selected apps to use the vpn",
        "Do not allow selected apps to use the vpn")
    var selectedList by remember { mutableStateOf(splitList[0]) }

    Spacer(modifier = Modifier.height(15.dp))

    splitList.forEachIndexed { index, list ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.Transparent)
                    .padding(top = 0.dp)
//                                    .selectable(
//                                        selected = selectedProtocol == protocol,
//                                        onClick = {
//                                            selectedProtocol = protocol
//                                        },
//                                    )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                ,
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(selected = list == selectedList,
                    onClick = {
                        selectedList = list
                    },
                    colors = RadioButtonDefaults.colors(
                        selectedColor = colorResource(
                            id = R.color.radio_button_blue),
                        unselectedColor = colorResource(
                            id = R.color.gray_icon),)
                )
                Text(
                    text = list,
                    modifier = Modifier.padding(start = 12.dp),
                    style = TextStyle(
                        fontSize = 14.sp,
                        color = MaterialTheme.colorScheme.primary
                    )
                )
            }
        }

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

    if (selectedList == splitList[1]) {
        ShowSplitTunnelList(splitTunnelList)
    }
    else if (selectedList == splitList[2]) {
        ShowSplitTunnelList(splitTunnelList2)
    }
}

@Composable
fun ColumnScope.ShowSplitTunnelList(list: List<SplitTunnelData>) {
    Box(modifier = Modifier
        .padding(top = 5.dp)
        .fillMaxSize()
        .background(Color.Transparent)
    ) {
        LazyColumn() {
            items(items = list) { app ->
                SplitTunnelingItem(app)
            }
        }
    }
}

@Composable
fun BoxScope.HeaderRowST(navHostController: NavHostController) {
    IconButton(
        onClick = {
            navHostController.popBackStack()
//                    navHostController.navigate(BottomBarScreen.Help.route)
        },
        modifier = Modifier
            .align(Alignment.TopStart)
            .padding(top = 50.dp)
            .padding(start = 16.dp)
            .size(30.dp, 32.dp)
    ) {
        Icon(
            painter = painterResource(id = R.drawable.backarrow3x),
            contentDescription = "Arrow-Back",
            tint = MaterialTheme.colorScheme.primary,
            modifier = Modifier.size(18.dp, 12.dp)
        )
    }
    Surface(
        modifier = Modifier
            .padding(top = 50.dp)
            .height(32.dp)
            .align(Alignment.TopCenter)
            .padding(5.dp),
        color = colorResource(id = R.color.transparent)
    ) {
        Text(text = "Split Tunneling",
            style = TextStyle(
                fontSize = 18.sp,
                color = MaterialTheme.colorScheme.primary,
                textAlign = TextAlign.Center,
                fontWeight = FontWeight.Medium
            ),
            modifier = Modifier.fillMaxHeight()

        )
    }
}

@Preview
@Composable
fun SplitTunnelingPreview() {
    SplitTunneling(rememberNavController())
}

