package windows

import androidx.compose.animation.animateContentSize
import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import viewModel.ShortCutHandler

@Preview
@Composable
fun ShortcutEditWindow() {
    Scaffold(
        floatingActionButton = { AddFab() }
    ) {
        val entries by ShortCutHandler.shortcuts.collectAsState()
        LazyColumn(
            verticalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.padding(8.dp).animateContentSize()
        ) {
            items(entries.toList()) {
                ShortcutRow(it)
            }
        }
    }
}


@Composable
fun ShortcutRow(entry: Pair<String, String>) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        val shState = remember(entry.first) { mutableStateOf(entry.first) }
        val cmdState = remember(entry.second) { mutableStateOf(entry.second) }
        TextField(
            textStyle = MaterialTheme.typography.bodyMedium,
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.1f),
            value = shState.value,
            onValueChange = {
                ShortCutHandler.renameShortcutQuietly(shState.value, it)
                shState.value = it
            }
        )

        TextField(
            textStyle = MaterialTheme.typography.bodyMedium,
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.85f),
            value = cmdState.value,
            onValueChange = {
                ShortCutHandler.updateShortcutQuietly(shState.value, it)
                cmdState.value = it
            },
        )
        Box(
            modifier = Modifier.width(30.dp).height(30.dp).clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) {
                ShortCutHandler.removeShortcut(shState.value)
            }
        ) {
            Icon(
                Icons.Default.Delete,
                "remove",
                modifier = Modifier.fillMaxSize()
            )
        }

    }
}

@Preview
@Composable
fun AddFab() {
    Surface(
        shadowElevation = 6.dp,
        color = FloatingActionButtonDefaults.containerColor,
        shape = FloatingActionButtonDefaults.shape,
        modifier = Modifier.clickable(
            indication = null,
            interactionSource = remember { MutableInteractionSource() }
        ) {
            ShortCutHandler.addShortcut("", "")
        }
    ) {
        Icon(
            Icons.Default.Add,
            "add",
            modifier = Modifier.width(56.dp).height(56.dp).padding(12.dp)
        )
    }
}