package dev.inmo.postssystem.features.content.text.client

import androidx.compose.runtime.*
import dev.inmo.jsuikit.modifiers.UIKitWidth
import dev.inmo.jsuikit.modifiers.include
import dev.inmo.micro_utils.common.compose.renderComposableAndLinkToRoot
import dev.inmo.postssystem.features.common.common.*
import dev.inmo.postssystem.features.content.client.ContentClientProvider
import dev.inmo.postssystem.features.content.common.Content
import dev.inmo.postssystem.features.content.text.common.TextContent
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import org.jetbrains.compose.web.dom.TextArea
import org.jetbrains.compose.web.renderComposable
import org.w3c.dom.HTMLElement

val loadingClientModule = ModuleLoader {
    singleWithRandomQualifier<ContentClientProvider> {
        TextContentClientProvider
    }
}.also {
    AdditionalModules.addModule(it)
}

object TextContentClientProvider : ContentClientProvider {
    override fun contentTypeNameForUser(): String = "Text"

    override fun drawNewContent(root: HTMLElement): StateFlow<Content> {
        val flow = MutableStateFlow(TextContent(""))

        renderComposableAndLinkToRoot(root) {
            val state = remember { flow.collectAsState() }
            TextArea(state.value.text) {
                include(UIKitWidth.Expand)
                onInput { flow.value = TextContent(it.value) }
            }
        }

        return flow
    }
}