package be.simplenotes.views

import be.simplenotes.types.LoggedInUser
import be.simplenotes.views.components.Alert
import be.simplenotes.views.components.alert
import be.simplenotes.views.components.input
import be.simplenotes.views.extensions.summary
import io.konform.validation.ValidationError
import jakarta.inject.Named
import jakarta.inject.Singleton
import kotlinx.html.*
import kotlinx.html.ButtonType.submit
import kotlinx.html.FormEncType.multipartFormData
import kotlinx.html.FormMethod.post
import kotlinx.html.InputType.file

@Singleton
class SettingView(@Named("styles") styles: String) : View(styles) {

    fun settings(
        loggedInUser: LoggedInUser,
        error: String? = null,
        validationErrors: List<ValidationError> = emptyList(),
    ) = renderPage("Settings", loggedInUser = loggedInUser) {
        div("container mx-auto") {
            section("m-4 p-4 bg-gray-800 rounded") {
                h1("text-xl") {
                    +"Welcome "
                    span("text-teal-200 font-semibold") { +loggedInUser.username }
                }
            }

            section("m-4 p-2 bg-gray-800 rounded flex flex-wrap justify-around items-end") {
                form(classes = "m-2 flex-1", method = post, action = "/export") {
                    button(
                        name = "display",
                        classes = "btn btn-teal block",
                        type = submit,
                    ) { +"Display my data" }
                }

                form(classes = "m-2 flex-1", method = post, action = "/export") {
                    div {
                        listOf("json", "zip").forEach { format ->
                            div("px-2") {
                                radioInput(
                                    name = "format",
                                    classes =
                                    "checked:bg-blue-500 bg-gray-200 appearance-none rounded-full border-2 h-5 w-5",
                                ) {
                                    id = format
                                    attributes["value"] = format
                                    if (format == "json") attributes["checked"] = ""
                                }
                                label(classes = "ml-2") {
                                    attributes["for"] = format
                                    +format
                                }
                            }
                        }
                    }

                    button(name = "download", classes = "btn btn-green block mt-2", type = submit) {
                        +"Download my data"
                    }
                }

                form(classes = "m-2 flex-1", method = post, encType = multipartFormData, action = "/import") {
                    input(
                        file,
                        classes = "file:hidden mb-4",
                        name = "file",
                    ) {
                        attributes["accept"] = ".json,application/json"
                        attributes["required"] = ""
                    }
                    button(
                        name = "import",
                        classes = "btn btn-teal block",
                        type = submit,
                    ) { +"Import" }
                }
            }

            section(classes = "m-4 p-4 bg-gray-800 rounded") {
                h2(classes = "mb-4 text-red-400 text-lg font-semibold") {
                    +"Delete my account"
                }

                error?.let { alert(Alert.Warning, error) }

                details {
                    if (error != null || validationErrors.isNotEmpty()) {
                        attributes["open"] = ""
                    }

                    summary {
                        span(classes = "mb-4 font-semibold underline") {
                            +"Are you sure? "
                            +"You are about to delete this user, and this process is irreversible !"
                        }
                    }

                    form(classes = "mt-4", method = post) {
                        input(
                            id = "password",
                            placeholder = "Password",
                            autoComplete = "off",
                            type = InputType.password,
                            error = validationErrors.find { it.dataPath == ".password" }?.message,
                        )
                        checkBoxInput(name = "checked") {
                            id = "checked"
                            attributes["required"] = ""
                            label {
                                attributes["for"] = "checked"
                                +" Do you want to proceed ?"
                            }
                        }
                        button(
                            type = submit,
                            classes = "block mt-4 btn btn-red",
                            name = "delete",
                        ) { +"I'm sure" }
                    }
                }
            }
        }
    }
}