package com.pixelized.desktop.lwa.ui.screen.admin.common

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.pixelized.desktop.lwa.ui.composable.textfield.LwaTextField
import com.pixelized.desktop.lwa.ui.composable.textfield.LwaTextFieldUio
import com.pixelized.desktop.lwa.ui.screen.admin.common.tag.GMTag
import com.pixelized.desktop.lwa.ui.screen.admin.common.tag.GMTagUio
import com.pixelized.desktop.lwa.ui.theme.color.component.LwaTextFieldColors
import com.pixelized.desktop.lwa.ui.theme.lwa
import kotlinx.coroutines.launch
import lwacharactersheet.composeapp.generated.resources.Res
import lwacharactersheet.composeapp.generated.resources.ic_cancel_24dp
import org.jetbrains.compose.resources.painterResource

@Composable
fun GMFilterHeader(
    modifier: Modifier = Modifier,
    lazyListState: LazyListState = rememberLazyListState(),
    padding: Dp = 16.dp,
    spacing: Dp = 8.dp,
    filter: LwaTextFieldUio,
    tags: State<List<GMTagUio>>,
    onTag: (String) -> Unit,
) {
    val scope = rememberCoroutineScope()

    Column(
        modifier = modifier,
    ) {
        LwaTextField(
            modifier = Modifier.fillMaxWidth(),
            field = filter,
            colors = LwaTextFieldColors(backgroundColor = Color.Transparent),
            trailingIcon = {
                val value = filter.valueFlow.collectAsState()
                AnimatedVisibility(
                    visible = value.value.isNotBlank(),
                    enter = fadeIn(),
                    exit = fadeOut(),
                ) {
                    IconButton(
                        onClick = { filter.onValueChange.invoke("") },
                    ) {
                        Icon(
                            painter = painterResource(Res.drawable.ic_cancel_24dp),
                            tint = MaterialTheme.lwa.colorScheme.base.primary,
                            contentDescription = null,
                        )
                    }
                }
            }
        )
        AnimatedVisibility(
            visible = tags.value.isNotEmpty(),
            enter = fadeIn(),
            exit = fadeOut(),
        ) {
            LazyRow(
                modifier = Modifier.draggable(
                    orientation = Orientation.Horizontal,
                    state = rememberDraggableState { delta ->
                        scope.launch {
                            lazyListState.scrollBy(-delta)
                        }
                    },
                ),
                state = lazyListState,
                contentPadding = remember(padding, spacing) {
                    PaddingValues(
                        horizontal = padding,
                        vertical = spacing,
                    )
                },
                horizontalArrangement = Arrangement.spacedBy(space = spacing),
            ) {
                items(
                    items = tags.value,
                ) { tag ->
                    GMTag(
                        tag = tag,
                        onTag = { onTag(tag.id) },
                    )
                }
            }
        }
    }
}