package com.github.nullptroma.wallenc.ui.screens.main.screens.storage.twofa

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.github.nullptroma.wallenc.ui.R
import com.github.nullptroma.wallenc.ui.resources.resolveText

@Composable
fun TwoFaTokensScreenContent(
    uiState: TwoFaTokensScreenState,
    modifier: Modifier = Modifier,
    tokenList: @Composable () -> Unit = {},
) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        if (uiState.isLoading) {
            CircularProgressIndicator()
            return@Column
        }

        uiState.errorNotification?.let { notification ->
            Text(
                text = notification.resolveText(),
                color = MaterialTheme.colorScheme.error,
            )
        }

        if (uiState.items.isEmpty()) {
            Text(stringResource(R.string.two_fa_empty_state))
        } else {
            tokenList()
        }
    }
}

@Composable
fun TwoFaTokenListHeader(
    issuer: String,
    account: String,
    modifier: Modifier = Modifier,
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(12.dp),
        verticalAlignment = Alignment.Top,
    ) {
        Icon(
            imageVector = Icons.Outlined.Lock,
            contentDescription = null,
            modifier = Modifier
                .size(22.dp)
                .padding(top = 2.dp),
            tint = MaterialTheme.colorScheme.primary,
        )
        Column {
            Text(
                text = issuer,
                style = MaterialTheme.typography.titleSmall,
            )
            Text(
                text = account,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
            )
        }
    }
}
