LazyColumn(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
) {
    items(count = 17) { index ->
        ShowContent(text = "Index $index")
    }
}


@ExperimentalFoundationApi
@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun ShowContent(text: String) {
    var showContent by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { showContent = !showContent }
            .padding(horizontal = 12.dp, vertical = 8.dp),
    ) {
        Column {
            Text(
                text = text,
                style = TextStyle(color = MaterialTheme.colors.onBackground),
            )
            AnimatedVisibility(
                visible = showContent,
                modifier = Modifier.padding(vertical = 8.dp),
            ) {
                LazyVerticalGrid(
                    cells = GridCells.Fixed(2),
                    modifier = Modifier.wrapContentHeight(),
                ) {
                    items(count = 4) { index ->
                        Text(
                            text = "Grid $index",
                            style = TextStyle(color = MaterialTheme.colors.onBackground),
                        )
                    }
                }
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SettingsTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val list = listOf(
                        SettingsWithSubSettings(
                            "Setting 1",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                        SettingsWithSubSettings(
                            "Setting 2",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                        SettingsWithSubSettings(
                            "Setting 3",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                        SettingsWithSubSettings(
                            "Setting 4",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                    )
                    LazyColumn(Modifier.fillMaxSize()) {
                        items(list) {
                            Setting(settingName = it.settingName, subSettings = it.subSettingList)
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun Setting(settingName: String, subSettings: List<String>) {
    var visible by remember { mutableStateOf(false) }
    Text(text = settingName, modifier = Modifier.clickable { visible = !visible })
    AnimatedVisibility(visible = visible) {
        Column() {
            subSettings.forEach {
                Text(text = it)
            }
        }
    }
}

data class SettingsWithSubSettings(val settingName: String, val subSettingList: List<String>)