package com.devulex.eventorage.react.components.pages

import com.devulex.eventorage.locale.Messages
import com.devulex.eventorage.model.*
import com.devulex.eventorage.react.RProps
import com.devulex.eventorage.react.RState
import com.devulex.eventorage.react.ReactComponentSpec
import com.devulex.eventorage.react.dom.ReactDOMBuilder
import com.devulex.eventorage.react.dom.ReactDOMComponent
import com.devulex.eventorage.rpc.getSettings
import com.devulex.eventorage.rpc.updateSetting
import kotlinx.coroutines.experimental.async
import kotlinx.html.*
import kotlinx.html.js.onChangeFunction
import kotlinx.html.js.onClickFunction
import com.devulex.eventorage.common.toggleChecked

class SettingsPageComponent : ReactDOMComponent<SettingsPageComponent.SettingHandlerProps, SettingsPageComponent.SettingsState>() {

    companion object : ReactComponentSpec<SettingsPageComponent, SettingsPageComponent.SettingHandlerProps, SettingsPageComponent.SettingsState>

    init {
        state = SettingsPageComponent.SettingsState()
    }

    override fun ReactDOMBuilder.render() {
        div(classes = "page") {
            div(classes = "content") {
                div(classes = "settings-field") {
                    div(classes = "text") {
                        +(+Messages.YOU_CAN_CHANGE_CLUSTER_SETTINGS)
                        span(classes = "code") { +"application.conf" }
                    }
                }
                div(classes = "settings-field") {
                    div(classes = "label") { +(+Messages.CLUSTER_NAME) }
                    div(classes = "value text mono") { +props.staticSettings.elasticsearchClusterName }
                }
                div(classes = "settings-field") {
                    div(classes = "label") { +(+Messages.CLUSTER_NODES) }
                    div(classes = "value text mono") { +props.staticSettings.elasticsearchClusterNodes }
                }
                div(classes = "settings-field") {
                    div(classes = "label") { +(+Messages.LANGUAGE) }
                    div(classes = "value") {
                        select(classes = "select") {
                            attributes["value"] = +props.dynamicSettings.language
                            option {
                                value = +Language.EN
                                +"English"
                            }
                            option {
                                value = +Language.RU
                                +"Russian"
                            }
                            onChangeFunction = { e ->
                                val value = e.target!!.asDynamic().value.toString()
                                setState {
                                    props.dynamicSettings.language = Language.parse(value)
                                    props.changeLangHandler(Language.parse(value))
                                }
                                doUpdateSetting(+SettingProperty.LANGUAGE, value)
                            }
                        }
                    }
                }
                div(classes = "settings-field") {
                    div(classes = "label") { +(+Messages.DATE_FORMAT) }
                    div(classes = "value") {
                        select(classes = "select mono") {
                            attributes["value"] = +props.dynamicSettings.dateFormat
                            option {
                                value = +DateFormatter.YYYY_MM_DD
                                +(+DateFormatter.YYYY_MM_DD)
                            }
                            option {
                                value = +DateFormatter.DD_MM_YYYY
                                +(+DateFormatter.DD_MM_YYYY)
                            }
                            onChangeFunction = { e ->
                                val value = e.target!!.asDynamic().value.toString()
                                setState {
                                    props.dynamicSettings.dateFormat = DateFormatter.parse(value)
                                }
                                doUpdateSetting(+SettingProperty.DATE_FORMAT, value)
                            }
                        }
                    }
                }
                div(classes = "settings-field") {
                    div(classes = "checkbox") {
                        if (props.dynamicSettings.autoCheckUpdates) {
                            attributes["data-checked"] = ""
                        }
                        +(+Messages.AUTOMATICALLY_CHECK_FOR_UPDATES_TO_EVENTORAGE)
                        onClickFunction = {
                            it.toggleChecked()
                            setState {
                                props.dynamicSettings.autoCheckUpdates = !props.dynamicSettings.autoCheckUpdates
                            }
                            doUpdateSetting(+SettingProperty.AUTO_CHECK_UPDATES,
                                    props.dynamicSettings.autoCheckUpdates.toString())
                        }
                        span {}
                        span {}
                    }
                }
            }
        }
    }

    class SettingsState : RState

    class SettingHandlerProps(var staticSettings: StaticEventorageSettings,
                              var dynamicSettings: DynamicEventorageSettings) : RProps() {
        var changeLangHandler: (Language) -> Unit = {}
    }

    /**
     * Not used
     */
    private fun doGetSettings() {
        async {
            getSettings()
        }.catch { err ->
            console.error("Failed to get settings: " + err.message)
        }
    }

    private fun doUpdateSetting(name: String, value: String) {
        async {
            updateSetting(name, value)
        }.catch { err ->
            console.error("Failed to update setting: " + err.message)
        }
    }
}
