package com.suno.android.common_ui.components.settings

import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.suno.android.common_ui.R
import com.suno.android.common_ui.theme.ExtendedTheme
import com.suno.android.common_ui.theme.SunoTheme

@Composable
fun IconTextSettingItem(
    modifier: Modifier = Modifier,
    @DrawableRes vectorDrawableRes: Int,
    displayText: String,
    colorTint: Color = ExtendedTheme.colors.textPrimary,
    onClick: () -> Unit = {},
    showDivider: Boolean = true,
    endComposable: @Composable (() -> Unit)? = null,
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .clickable { onClick.invoke() },
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(64.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Icon(
                    imageVector = ImageVector.vectorResource(
                        id = vectorDrawableRes,
                    ),
                    tint = colorTint,
                    contentDescription = null,
                )

                Text(
                    modifier = Modifier.padding(16.dp),
                    text = displayText,
                    color = colorTint,
                    style = ExtendedTheme.typography.body,
                )
            }
            endComposable?.invoke()
        }
        if (showDivider) {
            HorizontalDivider(
                thickness = 1.dp,
                color = ExtendedTheme.colors.borderPrimary,
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun IconTextSettingItem_Preview() {
    SunoTheme {
        IconTextSettingItem(
            vectorDrawableRes = R.drawable.credits,
            displayText = "Suno Credits",
        )
    }
}

@Preview(showBackground = true)
@Composable
private fun IconTextSettingItemWithEndCap_Preview() {
    SunoTheme {
        IconTextSettingItem(
            vectorDrawableRes = R.drawable.credits,
            displayText = "Suno Credits",
            endComposable = {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Text(
                        modifier = Modifier.padding(end = 16.dp),
                        text = "Pro Plan",
                        style = ExtendedTheme.typography.body,
                    )
                    Icon(
                        imageVector = ImageVector.vectorResource(
                            id = R.drawable.chevron_right,
                        ),
                        contentDescription = null,
                    )
                }
            },
        )
    }
}