module Main  where

import Prelude
import Data.Maybe (Maybe(..))
import Data.Either (Either(..))

import Affjax.Web (get)
import Affjax.ResponseFormat as RF
import Affjax.StatusCode (StatusCode(..))

import Effect (Effect)
import Effect.Console (log)
import Effect.Exception (throw)
import Effect.Aff.Class (liftAff)


import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toNonElementParentNode)
import Web.HTML.Window (document)
import React.Basic.DOM (css)
import React.Basic.DOM as R
import React.Basic.DOM.Client (createRoot, renderRoot)
import React.Basic.Events (handler_)
import React.Basic.Hooks (Component, component, element, useState', (/\))
import React.Basic.Hooks as React

main :: Effect Unit
main = do
    log "Hello World!!"
    doc <- document =<< window
    container <- getElementById "app" $ toNonElementParentNode doc
    case container of
        Nothing -> log "no element with id 'app'"
        Just c -> do
            maincomponent <- mainComponent
            reactRoot <- createRoot c
            renderRoot reactRoot (maincomponent {})
            log "found"


mainComponent :: Component {}
mainComponent = do
    component "component title" \_ -> React.do
        pure $ R.div {
            className: "classname",
            style: css {},
            children: [
                R.text "content"
            ]
        }


testAjax = do
    -- let response = RF.json get "http://10.0.0.110:3000/"
    -- log response
    let eResponse = liftAff $ RF.json get "http://10.0.0.110:3000/"
    case eResponse of
        Left error -> log "networt error"
        Right response ->
            case response.status of
                StatusCode 200 -> 
                    log "ajax success"
                _ -> 
                    log "ajax fail"