package com.meowarex.rlmobile.ui.screens.settings.components

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.meowarex.rlmobile.R
import com.meowarex.rlmobile.ui.theme.Theme

@Composable
fun ThemeDialog(
    currentTheme: Theme,
    onDismiss: () -> Unit,
    onConfirm: (Theme) -> Unit,
) {
    var selectedTheme by rememberSaveable { mutableStateOf(currentTheme) }

    AlertDialog(
        onDismissRequest = onDismiss,
        icon = {
            Icon(
                painter = painterResource(R.drawable.ic_brush),
                contentDescription = null,
                modifier = Modifier.size(32.dp),
            )
        },
        title = { Text(stringResource(R.string.setting_theme)) },
        text = {
            Column {
                for (theme in Theme.entries) key(theme) {
                    val interactionSource = remember(::MutableInteractionSource)

                    Row(
                        verticalAlignment = Alignment.Companion.CenterVertically,
                        modifier = Modifier.Companion
                            .clickable(
                                indication = null,
                                interactionSource = interactionSource,
                                onClick = { selectedTheme = theme },
                            )
                            .clip(MaterialTheme.shapes.medium)
                            .padding(horizontal = 6.dp, vertical = 8.dp),
                    ) {
                        Icon(
                            painter = theme.toPainter(),
                            contentDescription = null,
                            modifier = Modifier
                                .padding(end = 14.dp)
                                .size(26.dp),
                        )

                        Text(
                            text = theme.toDisplayName(),
                            style = MaterialTheme.typography.labelLarge
                                .copy(fontSize = 14.sp)
                        )

                        Spacer(Modifier.Companion.weight(1f, true))

                        RadioButton(
                            selected = theme == selectedTheme,
                            onClick = { selectedTheme = theme },
                            interactionSource = interactionSource,
                        )
                    }
                }
            }
        },
        confirmButton = {
            Button(
                onClick = {
                    onConfirm(selectedTheme)
                    onDismiss()
                },
            ) {
                Text(stringResource(R.string.action_apply))
            }
        },
    )
}
