compose-jb/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

package com.sample.content

import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*
import com.sample.style.AppStylesheet

private object SwitcherVariables : CSSVariables {
    val labelWidth by variable<CSSpxValue>()
    val labelPadding by variable<CSSpxValue>()
}

object SwitcherStylesheet : StyleSheet(AppStylesheet) {

    val boxed by style {

        media(mediaMaxWidth(640.px)) {
            self style {
                SwitcherVariables.labelWidth(48.px)
                SwitcherVariables.labelPadding(5.px)
            }
        }

        descendant(self, CSSSelector.Type("label")) style {
            display(DisplayStyle.InlineBlock)
            property("width", SwitcherVariables.labelWidth.value(56.px))
            property("padding", SwitcherVariables.labelPadding.value(10.px))
            property("transition", "all 0.3s")
            property("text-align", "center")
            property("box-sizing", "border-box")

            border {
                style(LineStyle.Solid)
                width(3.px)
                color(Color.transparent)
                borderRadius(20.px, 20.px, 20.px)
            }
            color("#aaa")
        }

        border {
            style(LineStyle.Solid)
            width(1.px)
            color(Color("#aaa"))
            padding(0.px)
            borderRadius(22.px, 22.px, 22.px)
        }

        descendant(self, selector("input[type=\"radio\"]")) style {
            display(DisplayStyle.None)
        }

        descendant(self, selector("input[type=\"radio\"]:checked + label")) style {
            border {
                style(LineStyle.Solid)
                width(3.px)
                color(Color("#167dff"))
                borderRadius(20.px, 20.px, 20.px)
            }
            color("#000")
        }
    }
}

@Composable
fun CodeSampleSwitcher(count: Int, current: Int, onSelect: (Int) -> Unit) {
    Form(attrs = {
        classes(SwitcherStylesheet.boxed)
    }) {
        repeat(count) { ix ->
            Input(type = InputType.Radio, attrs = {
                name("code-snippet")
                value("snippet$ix")
                id("snippet$ix")
                if (current == ix) checked()
                onInput { onSelect(ix) }
            })
            Label(forId = "snippet$ix") { Text("${ix + 1}") }
        }
    }
}