import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.AttachFile
import androidx.compose.material.icons.filled.Camera
import androidx.compose.material.icons.filled.Headset
import androidx.compose.material.icons.filled.Image
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipDefaults
import androidx.compose.runtime.Composable
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.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Popup
import io.nexilis.service.core.BlueSky
import io.nexilis.service.core.DarkLimeGreen
import io.nexilis.service.core.Orange
import io.nexilis.service.core.Purple

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Attachments(modifier: Modifier) {
    val keyboardController = LocalSoftwareKeyboardController.current
    val positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider()
    var isOpenMenu by remember {
        mutableStateOf(false)
    }
    IconButton(onClick = {
        keyboardController?.hide()
        isOpenMenu = !isOpenMenu
    }
    ) {
        Icon(
            imageVector = Icons.Default.Add,
            contentDescription = "",
            tint = MaterialTheme.colorScheme.primary
        )
    }
    if (isOpenMenu) {
        Popup(popupPositionProvider = positionProvider, onDismissRequest = { isOpenMenu = false }) {
            Box(modifier = modifier) {
                Row(Modifier.align(Alignment.Center)) {
                    Column {
                        AttachmentButton(
                            color = MaterialTheme.colorScheme.primary,
                            onClick = {},
                            text = {
                                Text(text = "File", style = MaterialTheme.typography.bodySmall)
                            }) {
                            Icon(
                                imageVector = Icons.Default.AttachFile,
                                contentDescription = "",
                                tint = Color.White
                            )
                        }
                        Spacer(modifier = Modifier.size(32.dp))
                        AttachmentButton(color = Color.Orange, onClick = {}, text = {
                            Text(text = "Audio", style = MaterialTheme.typography.bodySmall)
                        }) {
                            Icon(
                                imageVector = Icons.Default.Headset,
                                contentDescription = "",
                                tint = Color.White
                            )
                        }
                    }
                    Spacer(modifier = Modifier.size(16.dp))
                    Column {
                        AttachmentButton(color = Color.Red, onClick = {}, text = {
                            Text(text = "Camera", style = MaterialTheme.typography.bodySmall)
                        }) {
                            Icon(
                                imageVector = Icons.Default.Camera,
                                contentDescription = "",
                                tint = Color.White
                            )
                        }
                        Spacer(modifier = Modifier.size(32.dp))
                        AttachmentButton(color = Color.DarkLimeGreen, onClick = {}, text = {
                            Text(text = "Location", style = MaterialTheme.typography.bodySmall)
                        }) {
                            Icon(
                                imageVector = Icons.Default.LocationOn,
                                contentDescription = "",
                                tint = Color.White
                            )
                        }
                    }
                    Spacer(modifier = Modifier.size(16.dp))
                    Column {
                        AttachmentButton(color = Color.Purple, onClick = {}, text = {
                            Text(text = "Gallery", style = MaterialTheme.typography.bodySmall)
                        }) {
                            Icon(
                                imageVector = Icons.Default.Image,
                                contentDescription = "",
                                tint = Color.White
                            )
                        }
                        Spacer(modifier = Modifier.size(32.dp))
                        AttachmentButton(color = Color.BlueSky, onClick = {}, text = {
                            Text(text = "Contact", style = MaterialTheme.typography.bodySmall)
                        }) {
                            Icon(
                                imageVector = Icons.Default.Person,
                                contentDescription = "",
                                tint = Color.White
                            )
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun AttachmentButton(
    color: Color = MaterialTheme.colorScheme.primary,
    onClick: () -> Unit,
    text: @Composable () -> Unit,
    content: @Composable () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Box(
            modifier = Modifier
                .then(Modifier.size(72.dp))
                .graphicsLayer {
                    shape = CircleShape
                    clip = true
                }
                .clickable(onClick = onClick)
                .padding(0.dp)
                .background(color),
            contentAlignment = Alignment.Center
        ) {
            content()
        }
        Spacer(modifier = Modifier.size(6.dp))
        text()
    }
}