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

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
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.draw.clip
import androidx.compose.ui.graphics.Color
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

@Composable
fun BrowseBankAccountScreen(
    isItemsAdded: Boolean = false
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 30.dp)
            .padding(bottom = 20.dp)
            .background(Color.Transparent),
        contentAlignment = Alignment.Center
    ) {
        if (isItemsAdded) {
            BrowseBankAccountListScreen()
        } else {
            BrowseBankAccountEmptyListScreen()
        }
    }
}

@Composable
fun BrowseBankAccountEmptyListScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier,
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Box(
                modifier = Modifier
                    .border(
                        border = BorderStroke(
                            1.dp,
                            colorResource(id = R.color.home_background_color)
                        ), shape = RoundedCornerShape(25.dp)
                    )
                    .clip(RoundedCornerShape(25.dp))
                    .background(Color.Transparent)
                    .clickable {
                    }
            ) {
                Image(
                    painter = painterResource(id = R.drawable.bank),
                    contentDescription = "Password",
                    modifier = Modifier
                        .padding(28.dp)
                        .size(48.dp)
                )
            }
            Spacer(modifier = Modifier.height(20.dp))
            Text(
                text = "Store bank information",
                color = colorResource(id = R.color.gray_splash),
                style = MaterialTheme.typography.bodyMedium.copy(
                    fontSize = 24.sp
                ),
            )
            Spacer(modifier = Modifier.height(10.dp))
            Text(
                text = "Securely store your sensitive banking \n information for your private use only.",
                color = colorResource(id = R.color.gray_splash),
                style = MaterialTheme.typography.labelLarge.copy(
                    fontSize = 16.sp
                ),
            )
            Spacer(modifier = Modifier.height(15.dp))
            StoreInfoButton(buttonText = "Store bank info")

        }
    }
}

@Composable
fun BrowseBankAccountListScreen() {}