package be.simplenotes.app.views

import be.simplenotes.app.utils.StaticFileResolver
import be.simplenotes.domain.security.JwtPayload
import kotlinx.html.*
import kotlinx.html.div
import org.intellij.lang.annotations.Language

class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) {
    fun renderHome(jwtPayload: JwtPayload?) = renderPage(
        title = "Home",
        description = "A fast and simple note taking website",
        jwtPayload = jwtPayload
    ) {
        section("text-center my-2 p-2") {
            h1("text-5xl casual") {
                span("text-teal-300") { +"Simplenotes " }
                +"- access your notes anywhere"
            }
        }

        div("container mx-auto flex flex-wrap justify-center content-center") {

            unsafe {
                @Language("html")
                val html =
                    """
                    <div aria-label="demo" class="md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2">
                        <div class="flex justify-between mb-4">
                          <h1 class="text-2xl underline">Notes</h1>
                            <span>
                            <span class="btn btn-teal pointer-events-none">Trash (3)</span>
                            <span class="ml-2 btn btn-green pointer-events-none">New</span>
                            </span>
                        </div>
                        <form class="md:space-x-2" id="search">
                        <input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
                        <span id="buttons">
                        <button disabled="" class="btn btn-green pointer-events-none">search</button>
                        <span class="btn btn-red pointer-events-none">clear</span>
                        </span>
                        </form>
                        <div class="overflow-x-auto">
                          <table id="notes">
                            <thead>
                              <tr>
                                <th scope="col" class="w-1/2">Title</th>
                                <th scope="col" class="w-1/4">Updated</th>
                                <th scope="col" class="w-1/4">Tags</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td><span class="text-blue-200 font-semibold underline">Formula 1</span></td>
                                <td class="text-center">moments ago</td>
                                <td>
                                  <ul class="inline flex flex-wrap justify-center">
                                    <li class="mx-2 my-1"><span class="tag disabled">#demo</span ></li>
                                  </ul>
                                </td>
                              </tr>
                              <tr>
                                <td><span class="text-blue-200 font-semibold underline">Syntax highlighting</span></td>
                                <td class="text-center">2 hours ago</td>
                                <td>
                                  <ul class="inline flex flex-wrap justify-center">
                                    <li class="mx-2 my-1"><span class="tag disabled">#features</span></li>
                                    <li class="mx-2 my-1"><span class="tag disabled">#demo</span></li>
                                  </ul>
                                </td>
                              </tr>
                              <tr>
                                <td><span class="text-blue-200 font-semibold underline">report</span></td>
                                <td class="text-center">5 days ago</td>
                                <td>
                                  <ul class="inline flex flex-wrap justify-center">
                                    <li class="mx-2 my-1"><span class="tag disabled">#study</span></li>
                                    <li class="mx-2 my-1"><span class="tag disabled">#demo</span></li>
                                  </ul>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                    </div>
                    """.trimIndent()

                +html
            }

            welcome()
        }
    }

    @Suppress("NOTHING_TO_INLINE")
    private inline fun DIV.welcome() {
        div("w-full my-auto md:w-1/2 md:order-2 order-1 text-center") {
            div("m-4 rounded-lg p-6") {
                p("text-teal-400") {
                    h2("text-3xl text-teal-400 underline") { +"Features:" }
                    ul("list-disc text-lg list-inside") {
                        li { +"Markdown support" }
                        li { +"Full text search" }
                        li { +"Structured search" }
                        li { +"Code highlighting" }
                        li { +"Fast and lightweight" }
                        li { +"No tracking" }
                        li { +"Works without javascript" }
                        li { +"Data export" }
                    }
                }
            }
        }
    }
}