package dev.inmo.postssystem.client.fsm.ui

import androidx.compose.runtime.mutableStateOf
import dev.inmo.jsuikit.elements.DefaultButton
import dev.inmo.jsuikit.elements.DropArea
import dev.inmo.jsuikit.utils.InputAttrs
import dev.inmo.micro_utils.common.MPPFile
import dev.inmo.micro_utils.common.filename
import dev.inmo.micro_utils.coroutines.launchSafelyWithoutExceptions
import dev.inmo.micro_utils.fsm.common.StatesMachine
import dev.inmo.postssystem.client.ui.fsm.CreatePostUIFSMState
import dev.inmo.postssystem.client.ui.fsm.UIFSMState
import dev.inmo.postssystem.client.utils.renderComposableAndLinkToContext
import dev.inmo.postssystem.features.common.common.*
import dev.inmo.postssystem.features.content.common.BinaryContent
import dev.inmo.postssystem.features.content.text.common.TextContent
import dev.inmo.postssystem.services.posts.client.ui.create.PostCreateUIModel
import dev.inmo.postssystem.services.posts.client.ui.create.PostCreateUIViewModel
import kotlinx.coroutines.CompletableDeferred
import kotlinx.coroutines.CoroutineScope
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLElement
import org.w3c.files.get

class PostCreateView(
    private val createPostCreateUIModel: PostCreateUIViewModel,
    private val uiScope: CoroutineScope
) : JSView<CreatePostUIFSMState>() {
    override suspend fun StatesMachine<in UIFSMState>.safeHandleState(
        htmlElement: HTMLElement,
        state: CreatePostUIFSMState
    ): UIFSMState? {
        val result = CompletableDeferred<UIFSMState?>()

        val textContent = mutableStateOf("")
        val fileState = mutableStateOf<MPPFile?>(null)

        renderComposableAndLinkToContext(htmlElement) {
            Form {
                TextArea(textContent.value) {
                    onInput { textContent.value = it.value }
                }
                DropArea (
                    inputAttrs = InputAttrs {
                        onInput {
                            it.target.files ?.get(0) ?.let {
                                fileState.value = it
                            }
                        }
                    }
                )
                DefaultButton(
                    "Upload",
                    disabled = fileState.value == null || textContent.value.isBlank()
                ) {
                    it.preventDefault()
                    fileState.value ?.let { file ->
                        uiScope.launchSafelyWithoutExceptions {
                            createPostCreateUIModel.create(
                                listOf(
                                    TextContent(
                                        textContent.value
                                    ),
                                    BinaryContent(
                                        file.filename,
                                        file.mimeType,
                                        file.inputProvider()
                                    )
                                )

                            )
                        }
                    }
                    console.log("")
                }
            }
        }

        return result.await()
    }
}
