kotlin-css-generator/src/jvmMain/kotlin/nl/astraeus/css/Test.kt

package nl.astraeus.css

import nl.astraeus.css.properties.*
import nl.astraeus.css.properties.Color.Companion.hex
import nl.astraeus.css.style.Css
import nl.astraeus.css.style.Style

class StyleBase(
    val mainColor: Color = Color.hsl(128, 50, 50),
    val mainBackgroundColor: Color = Color.hsl(64, 50, 50),
    val mainFont: TextProperty = text("Arial")
)

private fun Style.sizePX(
    left: Int,
    top: Int,
    width: Int,
    height: Int
) {
//    this@sizePX.top = Measurement.px(top)
//    this@sizePX.left = Measurement.px(left)
//    this@sizePX.width = Measurement.px(width)
//    this@sizePX.height = Measurement.px(height)
}

private fun generateCss(
    base: StyleBase
): String {
    val css = CssBuilder()

    css.style {
        select("body") {
//            fontFamily = base.mainFont
//            color = base.mainColor
//            backgroundColor = base.mainBackgroundColor
        }

        select(".test") {
//            top = Measurement.px(10)
//            left = Measurement.em(5)
//            backgroundColor = Color.rgba(255, 255, 255, 0.75)

            select("> a") {
//                color = Color.hsl(200, 50, 50)
            }
        }

        select("nav") {
            select("ul") {
//                color = Color.hsl(0, 100, 25)
//                backgroundColor = base.mainBackgroundColor
            }
            select("li") {
                sizePX(25, 25, 200, 200)

                select("a") {
//                    width = Measurement.px(725)
//                    background = text("red initial")
//                    backgroundColor = base.mainBackgroundColor
//                    all = All.initial()
                }
            }
        }
    }

    return css.getCss()
}

fun main() {
    val css1 = generateCss(StyleBase())
    val css2 = generateCss(StyleBase(
        Color.hsl(32, 40, 50),
        Color.hsl(64, 60, 35),
        text("Courier")
    ))

    println(css1)
    println(css2)

    val border = css {
//        borderRadius = BorderRadius(1, 2, 3, 4)
//        borderColor = listOf(Color.hsl(22,66,55))

        select("a") {
//            width = Measurement.px(10)
        }
    }

    val border2: Css = {
//        borderRadius = BorderRadius(1, 2, 3, 4)
//        borderColor = listOf(Color.hsl(20,60,50))
    }

    val font: Css = {
//        fontFamily = text("Arial, Courier")
//        fontSize = FontSize.larger()
    }

    val sd = style {
        media("screen and (max-width: 600px)") {
            fontSize(12.px())
            fontWeight(FontWeight.normal)

            supports("bla") {
                media("bloe") {
                    fontSize(14.px())
                }
            }
        }

        select("#pipo") {
            backgroundColor(hex("eeeeee"))
            fontFamily("Arial, Courier")
//            animationDelay = listOf(DelayDuration.initial())

            select("div") {
                fontFace {
                    fontFamily("SanSation")
                    fontSize(FontSize.larger)
                    src("font/sansation_bold.woff")
//                    fontStretch = FontStretch.condensed()
//                    fontStyle = FontStyle.italic()
//                    fontWeight = FontWeight._600()
                }

                fontFamily("SanSation")

//                fontFamily = text("SanSation")
//                color = Color.hex("1b1b1b1")
//                alignContent = flexStart()
//                animationName = listOf(
//                    text("foo"),
//                    text("bar")
//                )
                select("span") {
                    alignItems(AlignItems.baseline)
                    alignSelf(AlignSelf.flexStart)

//                    animationIterationCount = listOf(
//                        Count.count(3),
//                        Count.infinite()
//                    )
//                    animationTimingFunction = listOf(
//                        AnimationTimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4),
//                        AnimationTimingFunction.easeInOut()
//                    )
                }
                select("border-0") {
                    import(border)
//                    borderRadius = BorderRadius(4, 5, 6, 7)
                }
                select("border-1") {
                    import(border2)
//                    borderRadius = BorderRadius(4, 5, 6, 7)
                }
                select("border-2") {
//                    borderRadius = BorderRadius(4, 5, 6, 7)
                    import(border2)
                    borderStyle(BorderStyle.dashed, BorderStyle.dotted)
                    animationPlayState(AnimationPlayState.paused, AnimationPlayState.running)

                    keyFrames("mymove") {
                        percentage(0) {
                            top(0.px())
                        }
                        percentage(50) {
                            top(60.px())
                        }
                        percentage(100) {
                            top(90.px())
                        }
                    }

                    keyFrames("yourmove") {
                        percentage(0) {
                            top(10.px())
                        }
                        percentage(40) {
                            top(20.px())
                        }
                        percentage(60) {
                            top(30.px())
                        }
                        percentage(80) {
                            top(50.px())
                            color(Color.hex("0000ff"))
                        }
                    }

                    objectFit(ObjectFit.initial)
                    pageBreakAfter(PageBreak.auto)

                    tableLayout(TableLayout.auto)
                    tabSize(12.px())

//                    display = Display.none()
//                    borderBottomWidth = BorderWidth.perc(13)
                }
            }
        }
    }

    val borderStyle = style {
        select(".border") {
            import(border)
            import(font)

            select("> p") {
//                fontSize = FontSize.smaller()
            }
        }
    }

    val test = style {
        select("nav") {
            alignContent(AlignContent.stretch)
            margin(0.px(), 2.em(), 0.5.px(), Measurement.auto)
        }
    }

    println("======")
    println(sd.generateCss())
    println("======")
    println(sd.generateCss(minified = true))
    println("======")
    println(borderStyle.generateCss())
    println("======")
    println(test.generateCss())
}