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

import androidx.compose.runtime.mutableStateListOf
import dev.inmo.jsuikit.elements.*
import dev.inmo.jsuikit.modifiers.*
import dev.inmo.micro_utils.common.*
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.content.common.*
import dev.inmo.postssystem.features.content.text.common.TextContent
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

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 contentStatesList = mutableStateListOf<Content>()

        renderComposableAndLinkToContext(htmlElement) {
            Flex(
                UIKitFlex.Alignment.Horizontal.Center
            ) {
                Div({ include(UIKitWidth.Fixed.XLarge) }) {
                    contentStatesList.forEachIndexed { i, it ->
                        Flex(UIKitWidth.Expand) {
                            when (it) {
                                is TextContent -> {
                                    TextArea(it.text) {
                                        include(UIKitWidth.Expand)
                                        onInput { contentStatesList[i] = TextContent(it.value) }
                                    }
                                }
                                is BinaryContent -> {
                                    DefaultButton(it.filename.name, UIKitWidth.Expand) {
                                        selectFile {
                                            contentStatesList[i] = it.binaryContent()
                                        }
                                    }
                                }
                            }
                            DefaultButton("Remove") {
                                contentStatesList.removeAt(i)
                            }
                        }
                    }
                    DefaultButton("Add content")
                    Dropdown {
                        DefaultNav {
                            NavItemElement(
                                attributesCustomizer = {
                                    onClick {
                                        contentStatesList.add(TextContent(""))
                                    }
                                }
                            ) {
                                Text("Text")
                            }
                            NavItemElement(
                                attributesCustomizer = {
                                    onClick {
                                        selectFile {
                                            contentStatesList.add(it.binaryContent())
                                        }
                                    }
                                }
                            ) {
                                Text("File")
                            }
                        }
                    }
                    DefaultButton(
                        "Upload",
                        disabled = contentStatesList.isEmpty()
                    ) {
                        it.preventDefault()
                        uiScope.launchSafelyWithoutExceptions {
                            createPostCreateUIModel.create(
                                contentStatesList.toList()
                            )
                        }
                    }
                }
            }
        }

        return result.await()
    }
}