gender.kt

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Checkbox
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
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.semantics.Role
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.eevajonna.graphtrendplayer.ui.theme.GraphTrendPlayerTheme

@Composable
fun GenderOptions() {
    val options =
        listOf(
            "Woman" to OptionType.Boolean,
            "Man" to OptionType.Boolean,
            "Non-Binary" to OptionType.Boolean,
            "Let me type" to OptionType.String,
            "Prefer Not to Disclose" to OptionType.Boolean,
        )

    var selectedOptions by remember {
        mutableStateOf<Set<String>>(emptySet())
    }

    var genderText by remember {
        mutableStateOf("")
    }

    fun onCheckedChange(
        newValue: Boolean,
        label: String,
    ) {
        if (newValue) {
            selectedOptions = selectedOptions + label
        } else {
            selectedOptions = selectedOptions - label
        }
    }

    Scaffold { innerPadding ->
        Column(
            modifier =
                Modifier
                    .padding(innerPadding)
                    .padding(GenderOptions.padding),
        ) {
            Text("Which most accurately describe(s) you?")

            options.map { (label, type) ->
                when (type) {
                    OptionType.Boolean ->
                        CheckboxWithLabel(
                            checked = selectedOptions.contains(label),
                            label = label,
                        ) { newValue ->
                            onCheckedChange(newValue, label)
                        }
                    OptionType.String ->
                        CheckboxWithTextField(
                            checked = selectedOptions.contains(label),
                            label = label,
                            textValue = genderText,
                            onTextChange = {
                                genderText = it
                            },
                        ) { newValue ->
                            onCheckedChange(newValue, label)
                        }
                }
            }
        }
    }
}

@Composable
fun CheckboxWithLabel(
    checked: Boolean,
    label: String,
    onCheckedChange: (Boolean) -> Unit,
) {
    Row(
        modifier =
            Modifier.toggleable(
                value = checked,
                role = Role.Checkbox,
                onValueChange = onCheckedChange,
            ),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Checkbox(
            modifier = Modifier.clearAndSetSemantics {},
            checked = checked,
            onCheckedChange = onCheckedChange,
        )
        Text(label)
    }
}

@Composable
fun CheckboxWithTextField(
    checked: Boolean,
    label: String,
    textValue: String,
    onTextChange: (String) -> Unit,
    onCheckedChange: (Boolean) -> Unit,
) {
    Column {
        CheckboxWithLabel(checked = checked, label = label, onCheckedChange = onCheckedChange)
        if (checked) {
            OutlinedTextField(
                modifier =
                    Modifier
                        .fillMaxWidth()
                        .padding(horizontal = GenderOptions.TextField.horizontalPadding),
                label = {
                    Text("Type here")
                },
                value = textValue,
                onValueChange = onTextChange,
            )
        }
    }
}

@Preview
@Composable
fun GenderOptionsPreview() {
    GraphTrendPlayerTheme {
        GenderOptions()
    }
}

enum class OptionType {
    Boolean,
    String,
}

object GenderOptions {
    val padding = 12.dp

    object TextField {
        val horizontalPadding = 12.dp
    }
}