package com.fastest.pass.browse.presentation.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
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.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
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.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.fastest.pass.R
import com.fastest.pass.home.presentation.ui.components.GapLineANI

enum class ClickTypeNewItemBrowse {
    GO_BACK_BROWSE
}
@Composable
fun NewItemBrowseScreen(
    screenName: String,
    screenNameType: ClickTypeItemBrowse,
    clickTypeNewItemBrowse: (ClickTypeNewItemBrowse) -> Unit
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 0.dp)
            .statusBarsPadding()
            .background(colorResource(id = R.color.white))
            .navigationBarsPadding()
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(25.dp)
                .background(colorResource(id = R.color.blue_login))
        ) { }

        Spacer(modifier = Modifier.height(20.dp))
        ShowNewItemBrowseHeader(text = screenName) { clickTypeNewItemBrowseId ->
            clickTypeNewItemBrowse(clickTypeNewItemBrowseId)
        }
        Spacer(modifier = Modifier.height(20.dp))
        GapLineANI()
        
        when (screenNameType) {
            ClickTypeItemBrowse.Password -> {
                BrowsePasswordScreen()
            }
            ClickTypeItemBrowse.Bank -> {
                BrowseBankAccountScreen()
            }
            ClickTypeItemBrowse.Payment -> {
                BrowsePaymentCardScreen()
            }
            ClickTypeItemBrowse.Wifi -> {
                BrowseWifiPasswordScreen()
            }
            ClickTypeItemBrowse.Note -> {
                BrowseSecureNoteScreen()
            }
            ClickTypeItemBrowse.Contact -> {
                BrowseContactInfoScreen()
            }
            ClickTypeItemBrowse.Driver -> {
                BrowseDriverLicenseScreen()
            }
            ClickTypeItemBrowse.Passport -> {
                BrowsePassportScreen()
            }
        }

    }
}

@Composable
fun ColumnScope.ShowNewItemBrowseHeader(text: String, clickType: (ClickTypeNewItemBrowse) -> Unit) {
    Row(
        modifier = Modifier
            .align(Alignment.Start)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconButton(
            onClick = {
                clickType.invoke(ClickTypeNewItemBrowse.GO_BACK_BROWSE)
            },
            modifier = Modifier
                .padding(start = 30.dp)
                .size(24.dp, 24.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.arrow_left),
                contentDescription = "Arrow-Back",
                modifier = Modifier.size(24.dp, 24.dp),
                colorFilter = ColorFilter.tint(
                    color = colorResource(id = R.color.gray_splash)
                )
            )
        }
        Surface(
            modifier = Modifier
                .padding(start = 15.dp),
            color = colorResource(id = R.color.transparent)
        ) {
            Text(
                text = text,
                color = colorResource(id = R.color.gray_splash),
                style = MaterialTheme.typography.displayLarge.copy(
                    fontSize = 24.sp
                ),
            )
        }
    }
}

