SheetsModal.kt

package ui

import datasources.GSheet
import androidx.compose.runtime.*
import gapi.*
import kotlinx.browser.document
import kotlinx.browser.window
import kotlinx.coroutines.launch
import org.jetbrains.compose.web.attributes.InputType
import org.jetbrains.compose.web.attributes.disabled
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLElement
import processing.process

private object SheetsModal: ModalType {
    override val title = "Google Sheets import"
    override val tutorial = "Jelentkezz be, majd illesz be egy linket egy Google Sheetre, ami megfelel a következő követelményeknek:"

    @Composable
    override fun content(
        closeId: String,
        setState: (State) -> Unit,
        hint: String,
        setHint: (String) -> Unit,
    ) {
        val scope = rememberCoroutineScope()

        var signedIn by remember { mutableStateOf(isSignedIn) }
        var usrname by remember { mutableStateOf(username) }
        var mail by remember { mutableStateOf(email) }

        LaunchedEffect(Unit) {
            listenForLoginEvents {
                signedIn = it
                usrname = username
                mail = email
            }
        }

        var sheetUrl by remember { mutableStateOf("") }
        var sheetNum by remember { mutableStateOf(1) }
        var sheet by remember { mutableStateOf<GSheet?>(null) }

        setHint(
            when {
                !signedIn -> "Jelentkezz be"
                sheetUrl.isBlank() || !sheetUrl.contains("https://docs.google.com/spreadsheets") -> "Adj meg egy Google Sheet URL-t"
                else -> ""
            }
        )

        withLabel(
            if (signedIn) "$usrname ($mail)"
            else "Google Fiók"
        ) { id ->
            Button({
                id(id)
                if (signedIn) {
                    classes("uk-button", "uk-button-danger")
                } else {
                    classes("uk-button", "uk-button-primary")
                }
                onClick {
                    if (signedIn) {
                        logOut()
                    } else {
                        logIn()
                    }
                }
            }) {
                Text(
                    if (signedIn) {
                        "Kijelentkezés"
                    } else {
                        "Bejelentkezés"
                    }
                )
            }
        }

        Br {}

        withLabel("Google Sheet URL") { id ->
            Input(type = InputType.Text, attrs = {
                id(id)
                classes("uk-input")
                onInput { sheetUrl = it.value }
                value(sheetUrl)
            })
        }
        withLabel("Hányadik sheet (fül)") { id ->
            Input(type = InputType.Number, attrs = {
                id(id)
                classes("uk-input")
                onInput {
                    sheetNum = it.value?.toInt() ?: return@onInput
                    if (sheetNum <= 0) {
                        sheetNum = 1
                    }
                }
                value(sheetNum)
            })
        }
        Hr {  }
        divFloatRight {
            Button({
                classes("uk-button", "uk-button-primary")
                onClick {
                    scope.launch {
                        try {
                            sheet = GSheet.new(sheetUrl, sheetNum - 1)
                            sheet?.process { setState(ImportInProgress(it)) }
                            setState(Ready)
                        } catch (e: dynamic) {
                            val thr = e as? Exception ?: e as? Throwable
                            console.log(e)
                            thr?.printStackTrace()
                            window.alert("$e")
                        }
                    }
                    (document.getElementById(closeId) as HTMLElement).click()
                }
                if (hint.isNotBlank()) {
                    disabled()
                }
            }) {
                Text("Zsa!")
            }
        }
    }

}

@Composable
fun sheetsModal(setState: (State) -> Unit) {
    modal(SheetsModal, setState)
}