package com.example.pmulabs.basecomponents.navigate

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CalendarToday
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.pmulabs.R

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(onSearchClicked:() -> Unit, onCalendarClicked: () -> Unit) {
        TopAppBar(
            colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color(0xff423a99) ),
            title = {
                Image(
                    painter = painterResource(id = R.drawable.ellipse7),
                    contentDescription = "Ellipse 7",
                    modifier = Modifier
                        .requiredHeight(height = 62.dp)
                )
                Image(
                    painter = painterResource(id = R.drawable.ixbtcom_colored_logo1),
                    contentDescription = "IXBT.com_colored_logo 1",
                    modifier = Modifier
                        .offset(
                            x = 4.dp,
                            y = 0.dp
                        )
                        .requiredHeight(height = 60.dp)
                )
            },
            actions = {
                IconButton(onClick = { onSearchClicked() }) {
                    Icon(
                        imageVector = Icons.Filled.Search,
                        contentDescription = "Search Icon",
                        tint = Color.White
                    )
                }
                IconButton(onClick = { onCalendarClicked() }) {
                    Icon(
                        imageVector = Icons.Filled.CalendarToday,
                        contentDescription = "Calendar Icon",
                        tint = Color.White
                    )
                }
            })
    }

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchAppBar(
    text: String,
    onTextChange: (String) -> Unit,
    onCloseClicked: () -> Unit,
    onSearchClicked: (String) -> Unit
){
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(62.dp),
        color = Color(0xff423a99)
    ) {
        TextField(
            colors=TextFieldDefaults.textFieldColors(
                Color.White, containerColor = Color(0xff423a99)
            ),
            modifier = Modifier
                .fillMaxWidth(),
            value=text,
            onValueChange={
                onTextChange(it)
            },
            placeholder = {
                Text(
                    text ="Search...",
                    color = Color.White
                )
            },
            textStyle = TextStyle(
                fontSize = MaterialTheme.typography.titleMedium.fontSize
            ),
            singleLine = true,
            leadingIcon = {
                IconButton(
                    onClick = { }
                ) {
                    Icon(imageVector = Icons.Default.Search,
                        contentDescription = "Search Icon",
                        tint = Color.White)
                }
            },
            trailingIcon = {
                IconButton(
                    onClick = {
                        if(text.isNotEmpty()){
                            onTextChange("")
                        }else{
                            onCloseClicked()
                        }
                    }
                ) {
                    Icon(imageVector = Icons.Default.Close,
                        contentDescription = "Close Icon",
                        tint = Color.White)
                }
            },
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Search,
            ),
            keyboardActions = KeyboardActions(
                onSearch = {
                    onSearchClicked(text)
                }
            )
        )
    }
}

@Composable
@Preview
fun TopBarPreview(){
    TopBar(onSearchClicked = {},onCalendarClicked = {})
}

@Composable
@Preview
fun SearchBarPreview(){
    SearchAppBar(text = "вапвапв", onSearchClicked = {}, onCloseClicked = {}, onTextChange = {})
}