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

import android.util.Log
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.LocalOverscrollConfiguration
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.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.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDefaults
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.DockedSearchBar
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
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.clip
import androidx.compose.ui.draw.paint
import androidx.compose.ui.focus.FocusManager
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.platform.SoftwareKeyboardController
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.fastest.pass.R
import com.fastest.pass.home.domain.model.CountryInfo
import com.fastest.pass.home.domain.model.CountryInfoCode
import com.fastest.pass.home.domain.model.countryInfoList
import com.fastest.pass.home.domain.model.countryInfoListCode
import com.fastest.pass.home.utils.GetDrawable
import kotlinx.coroutines.delay
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale
import java.util.TimeZone

@Composable
fun AddContactInfoScreen(
    onSearchTextChanged: (String) -> Unit,
    onCountryList: (List<CountryInfo>, String) -> Unit,
    countryListDisplayed: List<CountryInfo>
) {
    val keyboardController = LocalSoftwareKeyboardController.current
    val focusManager = LocalFocusManager.current

    val honorific = listOf("Please Select", "Mr", "Mrs", "Ms", "Dr")
    val list = getAllCountriesList()
    val countriesList = ArrayList<String>()
    countriesList.addAll(list)
    countriesList.add(0, "Please Select")
    val gender = listOf("Please Select", "Male", "Female", "Other")

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 30.dp)
            .padding(bottom = 20.dp)
            .background(Color.Transparent)
            .imePadding(),
    ) {
        SaveButtonACIFS(buttonText = R.string.save)

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 0.dp)
                .padding(bottom = 80.dp)
                .background(Color.Transparent)
                .verticalScroll(rememberScrollState())
        ) {
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.title)

            Spacer(modifier = Modifier.height(20.dp))
            DropDownFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.honorific, honorific)

            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.first_name)
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.middle_name)
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.last_name)

            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.address1)
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.address2)
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.address3)

            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.city_town)
//            Spacer(modifier = Modifier.height(20.dp))
//            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.country)
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.state)
            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.zip_postal_code)

            Spacer(modifier = Modifier.height(20.dp))
            SelectCountryInfo(
                labelText = R.string.country,
                keyboardController,
                focusManager,
                onSearchTextChanged = { searchText ->
                    onSearchTextChanged(searchText)
                },
                onCountryList = { list, text ->
                    onCountryList.invoke(list, text)
                },
                countryListDisplayed = countryListDisplayed
            )

//        DropDownFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.country, countriesList)

//        Spacer(modifier = Modifier.height(20.dp))
//        DropDownFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.time_zone, timezoneList, topPadding = 10)

            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.company)
            Spacer(modifier = Modifier.height(20.dp))
            DropDownFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.gender, gender)

            Spacer(modifier = Modifier.height(20.dp))
            DatePickerACIFS(labelText = R.string.birthday) { selectedDate ->

            }

            Spacer(modifier = Modifier.height(20.dp))
            EmailFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, R.string.enter_email_address)

            Spacer(modifier = Modifier.height(20.dp))
            SelectCountryInfoPhoneIcon(
                keyboardController,
                focusManager,
                R.string.phone,
                R.string.ext,
                onCountryList = { list, text ->
                    onCountryList.invoke(list, text)
                },
                countryListDisplayed = countryListDisplayed
            )
            Spacer(modifier = Modifier.height(20.dp))
            NumberTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.mobile, placeholder = R.string.mobile, ImeAction.Next)
            Spacer(modifier = Modifier.height(20.dp))
            NumberTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.fax, placeholder = R.string.fax, ImeAction.Done)

            Spacer(modifier = Modifier.height(20.dp))
            NameTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.username)

            Spacer(modifier = Modifier.height(20.dp))
            NotesTextFieldACIFS(keyboardController = keyboardController, focusManager = focusManager)
        }
    }
}

@Composable
fun ColumnScope.NameTextFieldACIFS(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int
) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = {
            text = it
        },
        textStyle = MaterialTheme.typography.displayMedium,
        modifier = Modifier
            .align(Alignment.Start)
            .fillMaxWidth()
            .defaultMinSize(minHeight = 60.dp)
            .wrapContentHeight()
            .border(
                1.dp,
                color = colorResource(id = R.color.gray_border_textfield),
                shape = RoundedCornerShape(16.dp)
            )
            .background(color = colorResource(id = R.color.transparent)),
        shape = RoundedCornerShape(16.dp),
//        placeholder = {
//            Text(
//                text = stringResource(id = R.string.enter_email_address),
//                color = colorResource(id = R.color.gray_splash),
//                style = MaterialTheme.typography.displayMedium
//            )
//        },
        label = {
            Text(text = stringResource(id = labelText),
                style = MaterialTheme.typography.titleSmall.copy(
                    color = colorResource(id = R.color.gray_text)
                )
            )
        },
//        leadingIcon = {
//            Image(
//                painter = painterResource(id = R.drawable.profile_circle),
//                contentDescription = "Title Logo",
//                modifier = Modifier
//                    .size(24.dp, 24.dp)
//            )
//        },
        colors = TextFieldDefaults.colors(
            focusedLabelColor = colorResource(id = R.color.gray_splash),
            unfocusedContainerColor = colorResource(id = R.color.transparent),
            focusedContainerColor = colorResource(id = R.color.transparent),
            focusedIndicatorColor = colorResource(id = R.color.transparent),
            disabledIndicatorColor = colorResource(id = R.color.transparent),
            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
            cursorColor = colorResource(id = R.color.gray_splash),
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.Next
        ),
        keyboardActions = KeyboardActions(
            onDone = {
                focusManager.clearFocus()
                keyboardController?.hide()
            }
        ),
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColumnScope.DropDownFieldACIFS(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int,
    titles: List<String>,
    topPadding: Int = 0
) {
    var isExpanded by remember { mutableStateOf(false) }
    var selectedText by remember { mutableStateOf(titles[0]) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = colorResource(id = R.color.white)),
    ) {
       Box(
           modifier = Modifier
               .fillMaxWidth()
               .background(colorResource(id = R.color.white))
       ) {
           ExposedDropdownMenuBox(
               expanded = isExpanded,
               onExpandedChange = { isExpanded = !isExpanded },
               modifier = Modifier
                   .fillMaxWidth()
                   .defaultMinSize(60.dp)
                   .wrapContentHeight()
                   .border(
                       1.dp,
                       color = colorResource(id = R.color.gray_border_textfield),
                       shape = RoundedCornerShape(16.dp)
                   )
                   .background(color = colorResource(id = R.color.white)),
           ) {
               TextField(
                   value = selectedText,
                   onValueChange = {},
                   textStyle = MaterialTheme.typography.displayMedium.copy(
                       color = if (selectedText == titles[0]) colorResource(id = R.color.gray_border_textfield)
                           else colorResource(id = R.color.gray_splash)
                   ),
                   readOnly = true,
                   label = { Text(
                       stringResource(id = labelText),
                       style = MaterialTheme.typography.titleSmall.copy(
                           color = colorResource(id = R.color.gray_text)
                       )
                       ) },
                   trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(isExpanded) },
                   modifier = Modifier
                       .menuAnchor()
                       .fillMaxWidth()
                       .background(color = colorResource(id = R.color.white)),
                        colors = ExposedDropdownMenuDefaults.textFieldColors(
                            focusedLabelColor = colorResource(id = R.color.gray_splash),
                            unfocusedContainerColor = colorResource(id = R.color.transparent),
                            focusedContainerColor = colorResource(id = R.color.transparent),
                            focusedIndicatorColor = colorResource(id = R.color.transparent),
                            disabledIndicatorColor = colorResource(id = R.color.transparent),
                            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
                            cursorColor = colorResource(id = R.color.gray_splash),
                   ),
                   keyboardOptions = KeyboardOptions(
                       keyboardType = KeyboardType.Password
                   )
               )

               ExposedDropdownMenu(
                   expanded = isExpanded,
                   onDismissRequest = { isExpanded = !isExpanded },
                   modifier = Modifier
                       .background(colorResource(id = R.color.white))
               ) {
                   titles.forEachIndexed { _, s ->
                       DropdownMenuItem(
                           text = {
                               Text(
                                   text = s,
                                   style = MaterialTheme.typography.titleSmall.copy(
                                       color = colorResource(id = R.color.gray_splash)
                                   ),
                                   modifier = Modifier
                                       .padding(top = topPadding.dp)
                               )
                                  },
                           onClick = {
                               selectedText = s
                               isExpanded = false
                           },
                           modifier = Modifier
                               .background(colorResource(id = R.color.white))
                               .padding(top = 0.dp)
                       )
                   }
               }
           }
       }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColumnScope.DatePickerACIFS(
    labelText: Int,
    onDateSelected: (String) -> Unit
) {
    var selectedDate by remember { mutableStateOf("Select Date") }
    var selectedDateMillis by remember { mutableStateOf<Long?>(null) }
    var showDatePicker by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(color = colorResource(id = R.color.white)),
    ) {
        TextField(
            value = selectedDate,
            onValueChange = {},
            textStyle = MaterialTheme.typography.displayMedium.copy(
                color = colorResource(id = R.color.gray_text)
            ),
            readOnly = true,
            label = { Text(
                stringResource(id = labelText),
                style = MaterialTheme.typography.titleSmall.copy(
                    color = colorResource(id = R.color.gray_text)
                )
            ) },
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.DateRange,
                    contentDescription = "Calendar",
                    tint = colorResource(id = R.color.gray_text)
                    )
            },
            modifier = Modifier
                .align(Alignment.Start)
                .fillMaxWidth()
                .defaultMinSize(minHeight = 60.dp)
                .wrapContentHeight()
                .border(
                    1.dp,
                    color = colorResource(id = R.color.gray_border_textfield),
                    shape = RoundedCornerShape(16.dp)
                )
                .background(color = colorResource(id = R.color.transparent))
                .clickable {
                    showDatePicker = true
                },
            shape = RoundedCornerShape(16.dp),
            enabled = false,
            colors = TextFieldDefaults.colors(
                disabledContainerColor = colorResource(id = R.color.transparent),
                focusedLabelColor = colorResource(id = R.color.gray_splash),
                unfocusedContainerColor = colorResource(id = R.color.transparent),
                focusedContainerColor = colorResource(id = R.color.transparent),
                focusedIndicatorColor = colorResource(id = R.color.transparent),
                disabledIndicatorColor = colorResource(id = R.color.transparent),
                unfocusedIndicatorColor = colorResource(id = R.color.transparent),
                cursorColor = colorResource(id = R.color.gray_splash),
            ),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Password
            )
        )

        if (showDatePicker) {
            val datePickerState = rememberDatePickerState(
                initialSelectedDateMillis = selectedDateMillis ?: System.currentTimeMillis()
            )

            DatePickerDialog(
                onDismissRequest = {
                    showDatePicker = false
                },
                confirmButton = {
                    TextButton(onClick = {
                        val selectedMillis = datePickerState.selectedDateMillis
                        if (selectedMillis != null) {
                            val formattedDate = convertMillisToFormattedDate(selectedMillis)
                            selectedDate = formattedDate
                            onDateSelected(selectedDate)
                            selectedDateMillis = selectedMillis
                            showDatePicker = false
                        }

                    }) {
                        Text(text = "OK")
                    }
                },
                dismissButton = {
                    TextButton(onClick = { showDatePicker = false }) {
                        Text(text = "Cancel")
                    }
                },
                colors = DatePickerDefaults.colors(
                    containerColor = colorResource(id = R.color.white)
                )
            ) {
                DatePicker(state = datePickerState)
            }
        }
    }

}

@Composable
fun ColumnScope.EmailFieldACIFS(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int
) {
    var emailText by remember { mutableStateOf("") }

    TextField(
        value = emailText,
        onValueChange = {
            emailText = it
        },
        textStyle = MaterialTheme.typography.displayMedium,
        modifier = Modifier
            .align(Alignment.Start)
            .fillMaxWidth()
            .defaultMinSize(60.dp)
            .wrapContentHeight()
            .border(
                1.dp,
                color = colorResource(id = R.color.gray_border_textfield),
                shape = RoundedCornerShape(16.dp)
            )
            .background(color = colorResource(id = R.color.transparent)),
        shape = RoundedCornerShape(16.dp),
//        placeholder = {
//            Text(
//                text = stringResource(id = R.string.enter_email_address),
//                color = colorResource(id = R.color.gray_splash),
//                style = MaterialTheme.typography.displayMedium
//            )
//        },
        label = {
            Text(text = stringResource(id = labelText),
                style = MaterialTheme.typography.displayMedium.copy(
                    color = colorResource(id = R.color.gray_text)
                )
            )
        },
        maxLines = Int.MAX_VALUE,
        colors = TextFieldDefaults.colors(
            focusedLabelColor = colorResource(id = R.color.gray_splash),
            unfocusedContainerColor = colorResource(id = R.color.transparent),
            focusedContainerColor = colorResource(id = R.color.transparent),
            focusedIndicatorColor = colorResource(id = R.color.transparent),
            disabledIndicatorColor = colorResource(id = R.color.transparent),
            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
            cursorColor = colorResource(id = R.color.gray_splash),
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Email,
            imeAction = ImeAction.Next
        ),
        keyboardActions = KeyboardActions(
            onDone = {
                focusManager.clearFocus()
                keyboardController?.hide()
            }
        ),
    )
}

fun getAllCountriesList() : List<String> {
    return Locale.getISOCountries()
        .map { countryCode -> Locale("", countryCode).displayCountry }
        .sorted()
}

fun getCountriesWithFlagsAndTimezones(): List<CountryInfo> {
    return Locale.getISOCountries().mapNotNull { countryCode ->
        val locale = Locale("", countryCode)
        val countryName = locale.displayCountry
        val flag = countryCodeToFlag(countryCode)
        var timezone: String? = ""

//        timezone = getRepresentativeTimezone(countryName)

        Log.d("country_list_", "country => $countryName, $flag, $timezone => $countryCode")

        CountryInfo(
            name = countryName,
            flag = flag,
            timezone = timezone ?: ""
        )

    }.sortedBy { it.name }
}

fun countryCodeToFlag(countryCode: String): String {
    return countryCode.uppercase().map { char ->
        Character.toChars(0x1F1E6 + (char.code - 'A'.code)).concatToString()
    }.joinToString("")
}

fun getTimeZonesWithOffsets() : List<String> {
    val groupedTimeZone = TimeZone.getAvailableIDs().groupBy { timeZoneId ->
        Log.d("timeZoneId", "timeZoneId => $timeZoneId")
        val timeZone = TimeZone.getTimeZone(timeZoneId)
        val rawOffSetInMillis = timeZone.rawOffset
        val hours = rawOffSetInMillis / (60 * 60 * 1000)
        val minutes = (rawOffSetInMillis / (60 * 1000)) % 60
        String.format(Locale.US,"(%+03d:%02d)", hours, minutes)
    }

    return groupedTimeZone.entries.map { entry ->
        val offset = entry.key
        val timeZoneIds = entry.value
        val timeZoneNames = timeZoneIds.joinToString(", ") { it.substringAfterLast('/') }
        "$offset $timeZoneNames"
    }.sorted()
}

fun convertMillisToFormattedDate(millis: Long) : String {
    val date = Date(millis)
    val formatter = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault())
    return formatter.format(date)
}

@Composable
fun ColumnScope.ShowCountryListItem(
    item: CountryInfo,
    isSheetOpened: () -> Unit,
    isCountryList: Boolean = true,
    onSelectedCountry: (String) -> Unit
) {
    val context = LocalContext.current
    val icon = GetDrawable.getDrawable(context, item.flag)
    Row(
        modifier = Modifier
            .border(
                border = BorderStroke(1.dp, colorResource(id = R.color.white)),
                shape = RoundedCornerShape(15.dp)
            )
            .clip(RoundedCornerShape(15.dp))
            .background(colorResource(id = R.color.white))
            .fillMaxWidth()
            .clickable {
//                Toast.makeText(context, item.name, Toast.LENGTH_SHORT).show()
                isSheetOpened.invoke()
                if (isCountryList) {
                    onSelectedCountry.invoke(item.name)
                } else {
                    onSelectedCountry.invoke(item.timezone)
                }
            },
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Surface(
            modifier = Modifier.padding(start = 10.dp),
            color = Color.Transparent
        ) {
            Icon(
                painter = painterResource(id = icon),
                contentDescription = "Icon",
                tint = Color.Unspecified,
                modifier = Modifier
                    .padding(vertical = 15.dp)
                    .border(1.dp, colorResource(id = R.color.gray_border_textfield))
                    .size(38.dp, 34.dp)
//                    .clip(CircleShape)
//                    .weight(1f)
                    .paint(
                        painter = painterResource(id = icon),
                        contentScale = ContentScale.FillBounds
                    ),
//                colorFilter = ColorFilter.tint(colorResource(id = R.color.gray_splash)),
            )
        }

        Surface(
            modifier = Modifier.padding(start = 15.dp, end = 5.dp),
            color = Color.Transparent
        ) {
            Column {
                Text(
                    text = item.name,
                    style = MaterialTheme.typography.displayMedium,
                    color = colorResource(id = R.color.gray_splash),
//                    maxLines = 1,
                    modifier = Modifier
//                        .weight(1F)
                )
                Spacer(modifier = Modifier.height(1.dp))
                Text(
                    text = item.timezone,
                    style = MaterialTheme.typography.displaySmall,
                    color = colorResource(id = R.color.gray_text),
                    modifier = Modifier
//                        .weight(1F)
                )
            }
        }
    }
}

@Composable
fun ColumnScope.ShowCountryCodeListItem(
    item: CountryInfoCode,
    isSheetOpened: () -> Unit,
    onSelectedCountry: (String) -> Unit
) {
    val context = LocalContext.current
    val icon = GetDrawable.getDrawable(context, item.flag)
    Row(
        modifier = Modifier
            .border(
                border = BorderStroke(1.dp, colorResource(id = R.color.white)),
                shape = RoundedCornerShape(15.dp)
            )
            .clip(RoundedCornerShape(15.dp))
            .background(colorResource(id = R.color.white))
            .fillMaxWidth()
            .clickable {
//                Toast.makeText(context, item.name, Toast.LENGTH_SHORT).show()
                isSheetOpened.invoke()
                onSelectedCountry.invoke(item.code)
            },
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Surface(
            modifier = Modifier.padding(start = 10.dp),
            color = Color.Transparent
        ) {
            Icon(
                painter = painterResource(id = icon),
                contentDescription = "Icon",
                tint = Color.Unspecified,
                modifier = Modifier
                    .padding(vertical = 15.dp)
                    .border(1.dp, colorResource(id = R.color.gray_border_textfield))
                    .size(38.dp, 34.dp)
//                    .clip(CircleShape)
//                    .weight(1f)
                    .paint(
                        painter = painterResource(id = icon),
                        contentScale = ContentScale.FillBounds
                    ),
//                colorFilter = ColorFilter.tint(colorResource(id = R.color.gray_splash)),
            )
        }

        Surface(
            modifier = Modifier.padding(start = 15.dp, end = 5.dp),
            color = Color.Transparent
        ) {
            Column {
                Text(
                    text = item.name,
                    style = MaterialTheme.typography.displayMedium,
                    color = colorResource(id = R.color.gray_splash),
//                    maxLines = 1,
                    modifier = Modifier
//                        .weight(1F)
                )
                Spacer(modifier = Modifier.height(1.dp))
                Text(
                    text = item.code,
                    style = MaterialTheme.typography.displaySmall,
                    color = colorResource(id = R.color.gray_text),
                    modifier = Modifier
//                        .weight(1F)
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun ColumnScope.OpenModalBottomSheet(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    isSheetOpened: () -> Unit,
    onSelectedCountry: (String) -> Unit,
    isCountryList: Boolean = true,
    onSearchTextChanged: (String) -> Unit,
    onCountryList: (List<CountryInfo>, String) -> Unit,
    countryListDisplayed: List<CountryInfo> = emptyList()
) {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    var isSheetOpen by remember { mutableStateOf(true) }
    var isActive by remember { mutableStateOf(false) }
    var searchText by remember { mutableStateOf("") }
    val countryList = if (isCountryList) countryInfoList else countryInfoListCode

    LaunchedEffect(key1 = searchText) {
        val delay = if (searchText.isEmpty()) 0L else 300L
        delay(delay)
        onCountryList.invoke(countryList, searchText)
    }

   if (isSheetOpen) {
       ModalBottomSheet(
           onDismissRequest = {
               isSheetOpen = false
               isSheetOpened.invoke()
           },
           sheetState = sheetState,
           containerColor = colorResource(id = R.color.white),
           dragHandle = {
               BottomSheetDefaults.DragHandle(
                   color = colorResource(id = R.color.gray_splash),
               )
           },
           modifier = Modifier
               .padding(top = 15.dp)
               .fillMaxSize()
       ) {
           Box(
               modifier = Modifier
                   .background(Color.Transparent)
//                .fillMaxWidth()
//                .fillMaxHeight()
                   .padding(start = 0.dp, top = 10.dp)
                   .fillMaxSize(),
           ) {
               Column(
                   verticalArrangement = Arrangement.Top,
                   horizontalAlignment = Alignment.Start
               ) {
                   CompositionLocalProvider(
                       LocalOverscrollConfiguration provides null
                   ) {
                       DockedSearchBar(
                           query = searchText,
                           onQueryChange = {
                               searchText = it
                               Log.d("searchText", "ACIS => OMBS , searchText = $searchText")
                               onSearchTextChanged.invoke(searchText)
//                                scope.launch {
//                                    searchListViewModelSplash.searchTextChange(it)
//                                }
                           },
                           onSearch = {
                            isActive = false
                           },
                           active = isActive,
                           onActiveChange = {
                               isActive = it
                           },
                           placeholder = {
                               Text(
                                   text = "Search Country",
                                   style = MaterialTheme.typography.displaySmall,
                                   color = colorResource(id = R.color.gray_splash),
                               )
                           },
                           leadingIcon = {
                               Icon(
                                   painter = painterResource(id = R.drawable.searchicon),
                                   contentDescription = "Search Icon",
                                   tint = colorResource(id = R.color.gray_splash),
                                   modifier = Modifier
                                       .size(21.dp)
                               )
                           },
                           colors = SearchBarDefaults.colors(
                               containerColor = colorResource(id = R.color.light_gray_login),
                               dividerColor = Color.Transparent,
                               inputFieldColors = TextFieldDefaults.colors(
                                   focusedTextColor = colorResource(id = R.color.gray_splash),
                                   unfocusedTextColor = colorResource(id = R.color.gray_splash),
                                   unfocusedIndicatorColor = colorResource(id = R.color.gray_splash),
                                   focusedIndicatorColor = colorResource(id = R.color.gray_splash),
                                   disabledIndicatorColor = colorResource(id = R.color.gray_splash),
                                   cursorColor = colorResource(id = R.color.gray_splash),
                               )
                           ),
                           modifier = Modifier
                               .fillMaxWidth()
                               .height(50.dp)
                               .padding(horizontal = 10.dp)
                               .background(Color.Transparent)
                       ) {}

                       LazyColumn(
                           modifier = Modifier
                               .padding(top = 20.dp, bottom = 40.dp)
                       ) {
                           Log.d("countryInfoList", "countryInfoList => ${countryInfoList.size}")
                           items(countryListDisplayed, itemContent = { item ->
                               ShowCountryListItem(
                                   item = item,
                                   isSheetOpened = {
                                       isSheetOpen = false
                                       isSheetOpened.invoke()
                                   },
                                   isCountryList = isCountryList
                               ) { countryName ->
                                   onSelectedCountry.invoke(countryName)
                               }
                           })
                       }
                   }
               }
           }
       }
   }
}

@Composable
fun ColumnScope.SelectCountryInfo(
    labelText: Int,
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    onSearchTextChanged: (String) -> Unit,
    onCountryList: (List<CountryInfo>, String) -> Unit,
    countryListDisplayed: List<CountryInfo>
) {
    var selectedCountry by remember { mutableStateOf("Please Select") }
    var isSheetOpened by remember { mutableStateOf(false) }

    TextField(
        value = selectedCountry,
        onValueChange = {},
        textStyle = MaterialTheme.typography.displayMedium.copy(
            color = if (selectedCountry == "Please Select") colorResource(id = R.color.gray_border_textfield)
            else colorResource(id = R.color.gray_splash)
        ),
        readOnly = true,
        label = {
            Text(
            stringResource(id = labelText),
            style = MaterialTheme.typography.titleSmall.copy(
                color = colorResource(id = R.color.gray_text)
            )
        ) },
        modifier = Modifier
            .align(Alignment.Start)
            .fillMaxWidth()
            .defaultMinSize(minHeight = 60.dp)
            .wrapContentHeight()
            .border(
                1.dp,
                color = colorResource(id = R.color.gray_border_textfield),
                shape = RoundedCornerShape(16.dp)
            )
            .background(color = colorResource(id = R.color.transparent))
            .clickable {
                isSheetOpened = true
            },
        shape = RoundedCornerShape(16.dp),
        enabled = false,
        colors = TextFieldDefaults.colors(
            disabledContainerColor = colorResource(id = R.color.transparent),
            focusedLabelColor = colorResource(id = R.color.gray_splash),
            unfocusedContainerColor = colorResource(id = R.color.transparent),
            focusedContainerColor = colorResource(id = R.color.transparent),
            focusedIndicatorColor = colorResource(id = R.color.transparent),
            disabledIndicatorColor = colorResource(id = R.color.transparent),
            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
            cursorColor = colorResource(id = R.color.gray_splash),
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Password
        )
    )

    if (isSheetOpened) {
        OpenModalBottomSheet(
            keyboardController,
            focusManager,
            isSheetOpened = {isSheetOpened = false},
            onSelectedCountry = { countryName ->
                selectedCountry = countryName
            },
            onSearchTextChanged = { searchText ->
                onSearchTextChanged.invoke(searchText)
            },
            onCountryList = { list , text ->
                onCountryList.invoke(list, text)
            },
            countryListDisplayed = countryListDisplayed
        )
    }
}

@Composable
fun ColumnScope.SelectCountryInfoPhoneIcon(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int,
    extText: Int,
    onCountryList: (List<CountryInfo>, String) -> Unit,
    countryListDisplayed: List<CountryInfo>
) {
    var number by remember { mutableStateOf("") }
    var extNumber by remember { mutableStateOf("") }
    var selectedCountryCode by remember { mutableStateOf("+1") }
    var isSheetOpened by remember { mutableStateOf(false) }
    val context = LocalContext.current

    Row(
        modifier = Modifier
            .fillMaxWidth(),
    ) {
        TextField(
            value = number,
            onValueChange = {
                number = it
            },
            textStyle = MaterialTheme.typography.displayMedium.copy(
                color = colorResource(id = R.color.gray_splash)
            ),
            leadingIcon = {
                Text(
                    text = selectedCountryCode,
                    style = MaterialTheme.typography.displayMedium.copy(
                        color = colorResource(id = R.color.gray_text)
                    ),
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .padding(start = 5.dp, bottom = 4.dp)
                        .clickable {
                            isSheetOpened = true
                        }
                )
            },
            modifier = Modifier
                .height(60.dp)
                .border(
                    1.dp,
                    color = colorResource(id = R.color.gray_border_textfield),
                    shape = RoundedCornerShape(16.dp)
                )
                .background(
                    color = colorResource(id = R.color.transparent),
                    shape = RoundedCornerShape(16.dp)
                )
                .weight(1F)
                .align(Alignment.CenterVertically),
            placeholder = {
                Text(text = stringResource(id = labelText),
                    style = MaterialTheme.typography.displayMedium.copy(
                        color = colorResource(id = R.color.gray_text)
                    )
                )
            },
            maxLines = 1,
            colors = TextFieldDefaults.colors(
                focusedLabelColor = colorResource(id = R.color.gray_splash),
                unfocusedContainerColor = colorResource(id = R.color.transparent),
                focusedContainerColor = colorResource(id = R.color.transparent),
                focusedIndicatorColor = colorResource(id = R.color.transparent),
                disabledIndicatorColor = colorResource(id = R.color.transparent),
                unfocusedIndicatorColor = colorResource(id = R.color.transparent),
                cursorColor = colorResource(id = R.color.gray_splash),
            ),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Next
            ),
            keyboardActions = KeyboardActions(),
        )

        Spacer(modifier = Modifier.width(10.dp))

        TextField(
            value = extNumber,
            onValueChange = {
                extNumber = it
            },
            textStyle = MaterialTheme.typography.displayMedium,
            modifier = Modifier
                .width(100.dp)
                .height(60.dp)
                .border(
                    1.dp,
                    color = colorResource(id = R.color.gray_border_textfield),
                    shape = RoundedCornerShape(16.dp)
                )
                .background(color = colorResource(id = R.color.transparent)),
            shape = RoundedCornerShape(16.dp),
            placeholder = {
                Text(text = stringResource(id = extText),
                    style = MaterialTheme.typography.displayMedium.copy(
                        color = colorResource(id = R.color.gray_text)
                    )
                )
            },
            maxLines = 1,
            colors = TextFieldDefaults.colors(
                focusedLabelColor = colorResource(id = R.color.gray_splash),
                unfocusedContainerColor = colorResource(id = R.color.transparent),
                focusedContainerColor = colorResource(id = R.color.transparent),
                focusedIndicatorColor = colorResource(id = R.color.transparent),
                disabledIndicatorColor = colorResource(id = R.color.transparent),
                unfocusedIndicatorColor = colorResource(id = R.color.transparent),
                cursorColor = colorResource(id = R.color.gray_splash),
            ),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Next
            ),
            keyboardActions = KeyboardActions(),
        )
    }

    if (isSheetOpened) {
        OpenModalBottomSheet(
            keyboardController,
            focusManager,
            isSheetOpened = {isSheetOpened = false},
            onSelectedCountry = { countryCode ->
                selectedCountryCode = countryCode
            },
            isCountryList = false,
            onSearchTextChanged = {},
            onCountryList = { list , text ->
                onCountryList.invoke(list, text)
            },
            countryListDisplayed = countryListDisplayed
        )
    }
}

@Composable
fun ColumnScope.SelectCountryInfoPhoneCGPT(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int,
    extText: Int
) {
    var number by remember { mutableStateOf("") }
    var extNumber by remember { mutableStateOf("") }
    var selectedCountryCode by remember { mutableStateOf("+1") }
    val context = LocalContext.current

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(0.dp)
    ) {
        // Label at the top
        Text(
            text = "Phone",
            style = MaterialTheme.typography.bodyMedium,
            color = Color.Gray,
            modifier = Modifier.padding(bottom = 8.dp)
        )

        // Row containing country code and phone number input
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp) // Standard height for text fields
                .border(
                    width = 1.dp,
                    color = Color.LightGray,
                    shape = RoundedCornerShape(8.dp)
                )
                .background(color = Color.White, shape = RoundedCornerShape(8.dp)),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Clickable Country Code
            TextButton(
                onClick = {},
                modifier = Modifier
                    .padding(start = 4.dp)
            ) {
                Text(
                    text = selectedCountryCode,
                    style = MaterialTheme.typography.bodyMedium,
                    color = Color.Black
                )
            }

            Spacer(modifier = Modifier.width(0.dp)) // Small space between components

            // Phone Number Input
            TextField(
                value = number,
                onValueChange = { number = it },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(end = 8.dp), // Space for better alignment
                textStyle = MaterialTheme.typography.bodyMedium.copy(
                    color = Color.Black
                ),
                maxLines = 1,
                placeholder = {
                    Text(
                        text = "Enter phone number",
                        style = MaterialTheme.typography.bodyMedium.copy(color = Color.Gray)
                    )
                },
                colors = TextFieldDefaults.colors(
                    focusedContainerColor = Color.Transparent,
                    unfocusedContainerColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    cursorColor = Color.Black
                ),
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Phone,
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(
                    onDone = { /* Handle Done action */ }
                )
            )
        }
    }

}

@Composable
fun ColumnScope.SelectCountryInfoPhone(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int,
    extText: Int
) {
    var number by remember { mutableStateOf("") }
    var extNumber by remember { mutableStateOf("") }
    var selectedCountryCode by remember { mutableStateOf("+1") }
    val context = LocalContext.current

    Row(
        modifier = Modifier
            .fillMaxWidth(),
    ) {
        Column(
            modifier = Modifier
                .height(70.dp)
                .border(
                    1.dp,
                    color = colorResource(id = R.color.gray_border_textfield),
                    shape = RoundedCornerShape(16.dp)
                )
                .background(
                    color = colorResource(id = R.color.transparent),
                    shape = RoundedCornerShape(16.dp)
                )
                .weight(1F),
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                text = "Phone",
                style = MaterialTheme.typography.displayMedium,
                color = colorResource(id = R.color.gray_text),
                modifier = Modifier
                    .padding(top = 8.dp, start = 16.dp)
            )
            Row(
                horizontalArrangement = Arrangement.Start,
                modifier = Modifier
                    .background(Color.Transparent)
            ) {
                TextButton(onClick = { },
                    modifier = Modifier
                    ) {
                    Text(
                        text = selectedCountryCode,
                        style = MaterialTheme.typography.displayMedium,
                        color = colorResource(id = R.color.gray_text)
                    )
                }
                TextField(
                    value = number,
                    onValueChange = {
                        number = it
                    },
                    textStyle = MaterialTheme.typography.displayMedium.copy(
                        color = colorResource(id = R.color.gray_splash)
                    ),
                    modifier = Modifier
//                        .height(60.dp)
                        .padding(end = 20.dp)
                        .background(color = colorResource(id = R.color.transparent)),
//                    label = {
//                        Text(text = stringResource(id = labelText),
//                            style = MaterialTheme.typography.displayMedium.copy(
//                                color = colorResource(id = R.color.gray_text)
//                            )
//                        )
//                    },
                    maxLines = 1,
                    colors = TextFieldDefaults.colors(
                        focusedLabelColor = colorResource(id = R.color.gray_splash),
                        unfocusedContainerColor = colorResource(id = R.color.transparent),
                        focusedContainerColor = colorResource(id = R.color.transparent),
                        focusedIndicatorColor = colorResource(id = R.color.transparent),
                        disabledIndicatorColor = colorResource(id = R.color.transparent),
                        unfocusedIndicatorColor = colorResource(id = R.color.transparent),
                        cursorColor = colorResource(id = R.color.gray_splash),
                    ),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Next
                    ),
                    keyboardActions = KeyboardActions(
                        onNext = {}
                    ),
                )
            }
        }

        Spacer(modifier = Modifier.width(10.dp))

        TextField(
            value = extNumber,
            onValueChange = {
                extNumber = it
            },
            textStyle = MaterialTheme.typography.displayMedium,
            modifier = Modifier
                .width(100.dp)
                .height(70.dp)
                .border(
                    1.dp,
                    color = colorResource(id = R.color.gray_border_textfield),
                    shape = RoundedCornerShape(16.dp)
                )
                .background(color = colorResource(id = R.color.transparent)),
            shape = RoundedCornerShape(16.dp),
            label = {
                Text(text = stringResource(id = extText),
                    style = MaterialTheme.typography.displayMedium.copy(
                        color = colorResource(id = R.color.gray_text)
                    )
                )
            },
            maxLines = 1,
            colors = TextFieldDefaults.colors(
                focusedLabelColor = colorResource(id = R.color.gray_splash),
                unfocusedContainerColor = colorResource(id = R.color.transparent),
                focusedContainerColor = colorResource(id = R.color.transparent),
                focusedIndicatorColor = colorResource(id = R.color.transparent),
                disabledIndicatorColor = colorResource(id = R.color.transparent),
                unfocusedIndicatorColor = colorResource(id = R.color.transparent),
                cursorColor = colorResource(id = R.color.gray_splash),
            ),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Next
            ),
            keyboardActions = KeyboardActions(
                onNext = {}
            ),
        )
    }
}

@Composable
fun ColumnScope.NumberTextFieldACIFS(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager,
    labelText: Int,
    placeholder: Int,
    imeAction: ImeAction
) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = {
            text = it
        },
        textStyle = MaterialTheme.typography.displayMedium,
        modifier = Modifier
            .align(Alignment.Start)
            .fillMaxWidth()
            .defaultMinSize(minHeight = 60.dp)
            .wrapContentHeight()
            .border(
                1.dp,
                color = colorResource(id = R.color.gray_border_textfield),
                shape = RoundedCornerShape(16.dp)
            )
            .background(color = colorResource(id = R.color.transparent)),
        shape = RoundedCornerShape(16.dp),
//        placeholder = {
//            Text(
//                text = stringResource(id = placeholder),
//                style = MaterialTheme.typography.titleSmall.copy(
//                    color = colorResource(id = R.color.gray_text)
//                )
//            )
//        },
        label = {
            Text(text = stringResource(id = labelText),
                style = MaterialTheme.typography.titleSmall.copy(
                    color = colorResource(id = R.color.gray_text)
                )
            )
        },
//        leadingIcon = {
//            Image(
//                painter = painterResource(id = R.drawable.profile_circle),
//                contentDescription = "Title Logo",
//                modifier = Modifier
//                    .size(24.dp, 24.dp)
//            )
//        },
        colors = TextFieldDefaults.colors(
            focusedLabelColor = colorResource(id = R.color.gray_splash),
            unfocusedContainerColor = colorResource(id = R.color.transparent),
            focusedContainerColor = colorResource(id = R.color.transparent),
            focusedIndicatorColor = colorResource(id = R.color.transparent),
            disabledIndicatorColor = colorResource(id = R.color.transparent),
            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
            cursorColor = colorResource(id = R.color.gray_splash),
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
            imeAction = imeAction
        ),
        keyboardActions = KeyboardActions(
            onDone = {
                focusManager.clearFocus()
                keyboardController?.hide()
            },
        ),
    )
}

@Composable
fun BoxScope.SaveButtonACIFS(buttonText: Int) {
    Button(
        modifier = Modifier
            .background(colorResource(id = R.color.transparent))
            .fillMaxWidth()
            .height(60.dp)
            .align(Alignment.BottomCenter)
            .clickable() { },
        onClick = {},
        shape = RoundedCornerShape(15.dp),
//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
        colors = ButtonDefaults.buttonColors(
            contentColor = colorResource(id = R.color.white),
            containerColor = colorResource(id = R.color.red_login_button),
        ),
    )
    {
        Text(
            text = stringResource(id = buttonText),
            style = MaterialTheme.typography.bodyMedium.copy(
                fontSize = 20.sp,
                color = colorResource(id = R.color.white)
            ),
            textAlign = TextAlign.Center
        )
    }
}

@Composable
fun ColumnScope.NotesTextFieldACIFS(
    keyboardController: SoftwareKeyboardController?,
    focusManager: FocusManager
) {
    var notesText by remember { mutableStateOf("") }

    TextField(
        value = notesText,
        onValueChange = {
            notesText = it
        },
        textStyle = MaterialTheme.typography.displayMedium,
        modifier = Modifier
            .align(Alignment.Start)
            .fillMaxWidth()
            .defaultMinSize(minHeight = 60.dp)
            .wrapContentHeight()
            .border(
                1.dp,
                color = colorResource(id = R.color.gray_border_textfield),
                shape = RoundedCornerShape(16.dp)
            )
            .background(color = colorResource(id = R.color.transparent))
        ,
        shape = RoundedCornerShape(16.dp),
//        placeholder = {
//            Text(
//                text = stringResource(id = R.string.enter_email_address),
//                color = colorResource(id = R.color.gray_splash),
//                style = MaterialTheme.typography.displayMedium
//            )
//        },
        label = {
            Text(text = stringResource(R.string.notes),
                style = MaterialTheme.typography.titleSmall.copy(
                    color = colorResource(id = R.color.gray_text)
                )
            )
        },
//        leadingIcon = {
//            Image(
//                painter = painterResource(id = R.drawable.profile_circle),
//                contentDescription = "Title Logo",
//                modifier = Modifier
//                    .size(24.dp, 24.dp)
//            )
//        },
        colors = TextFieldDefaults.colors(
            focusedLabelColor = colorResource(id = R.color.gray_splash),
            unfocusedContainerColor = colorResource(id = R.color.transparent),
            focusedContainerColor = colorResource(id = R.color.transparent),
            focusedIndicatorColor = colorResource(id = R.color.transparent),
            disabledIndicatorColor = colorResource(id = R.color.transparent),
            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
            cursorColor = colorResource(id = R.color.gray_splash),
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.Default
        ),
        keyboardActions = KeyboardActions(
            onDone = {
                focusManager.clearFocus()
                keyboardController?.hide()
            }
        ),
    )
}