package com.composenative.demo

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableDoubleStateOf
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.composenative.BottomBarItem
import com.composenative.Button
import com.composenative.Column
import com.composenative.Dropdown
import com.composenative.GlassBottomBar
import com.composenative.GlassButton
import com.composenative.GlassCard
import com.composenative.GlassIconButton
import com.composenative.NativeTextColor
import com.composenative.NativeTextStyle
import com.composenative.ProgressBar
import com.composenative.Row
import com.composenative.ScrollColumn
import com.composenative.Slider
import com.composenative.Spacer
import com.composenative.StyledText
import com.composenative.Symbol
import com.composenative.Toggle

private val tabItems = listOf(
    BottomBarItem("Home", "house"),
    BottomBarItem("Search", "magnifyingglass"),
    BottomBarItem("Profile", "person"),
)

@Composable
internal fun ComponentCatalogue() {
    var sliderValue by remember { mutableDoubleStateOf(0.45) }
    var dropdownIndex by remember { mutableIntStateOf(1) }
    var toggleChecked by remember { mutableStateOf(true) }
    var selectedTab by remember { mutableIntStateOf(0) }
    var clickCount by remember { mutableIntStateOf(0) }

    ScrollColumn(spacing = 28.0) {
        Column(spacing = 4.0) {
            StyledText("Compose Native", style = NativeTextStyle.LargeTitle)
            StyledText(
                text = "UIKit component catalogue",
                color = NativeTextColor.Secondary,
            )
        }

        CatalogueSection("Typography") {
            StyledText("Large title", style = NativeTextStyle.LargeTitle)
            StyledText("Title", style = NativeTextStyle.Title)
            StyledText("Headline", style = NativeTextStyle.Headline)
            StyledText("Body")
            StyledText(
                text = "Secondary caption",
                style = NativeTextStyle.Caption,
                color = NativeTextColor.Secondary,
            )
        }

        CatalogueSection("Symbols") {
            Row(spacing = 24.0) {
                Symbol("heart.fill")
                Symbol("star.fill")
                Symbol("bell.fill")
                Symbol("gearshape.fill")
            }
        }

        CatalogueSection("Buttons") {
            Button(
                title = "UIKit button · $clickCount",
                onClick = { clickCount++ },
            )
            GlassButton(
                title = "Glass button",
                systemImageName = "sparkles",
                onClick = { clickCount++ },
            )
            GlassButton(
                title = "Prominent glass button",
                systemImageName = "arrow.right",
                prominent = true,
                onClick = { clickCount++ },
            )
            Row(spacing = 12.0) {
                GlassIconButton(
                    systemImageName = "heart",
                    accessibilityLabel = "Favorite",
                    onClick = { clickCount++ },
                )
                GlassIconButton(
                    systemImageName = "bookmark.fill",
                    accessibilityLabel = "Bookmark",
                    selected = true,
                    onClick = { clickCount++ },
                )
            }
        }

        CatalogueSection("Glass card") {
            GlassCard {
                StyledText("Glass container", style = NativeTextStyle.Headline)
                StyledText(
                    text = "Content remains ordinary native UIKit views.",
                    color = NativeTextColor.Secondary,
                )
            }
        }

        CatalogueSection("Slider") {
            StyledText("Value: ${(sliderValue * 100).toInt()}%")
            Slider(
                value = sliderValue,
                onValueChange = { sliderValue = it },
            )
        }

        CatalogueSection("Progress bar") {
            ProgressBar(progress = sliderValue)
        }

        CatalogueSection("Dropdown") {
            Dropdown(
                label = "Size",
                options = listOf("Small", "Medium", "Large"),
                selectedIndex = dropdownIndex,
                onSelected = { dropdownIndex = it },
            )
        }

        CatalogueSection("Switch") {
            Row {
                StyledText(if (toggleChecked) "Enabled" else "Disabled")
                Spacer()
                Toggle(
                    checked = toggleChecked,
                    onCheckedChange = { toggleChecked = it },
                )
            }
        }

        CatalogueSection("Tab bar") {
            GlassBottomBar(
                items = tabItems,
                selectedIndex = selectedTab,
                onSelected = { selectedTab = it },
            )
        }
    }
}

@Composable
private fun CatalogueSection(
    title: String,
    content: @Composable () -> Unit,
) {
    Column(spacing = 12.0) {
        StyledText(
            text = title,
            style = NativeTextStyle.Headline,
            color = NativeTextColor.Accent,
        )
        content()
    }
}