module EditableNumber
  ( NumberElem
  , set
  ) where

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Prelude
import Web.DOM.Document (createElement, createTextNode) as Document
import Web.DOM.Element (setClassName, setAttribute, toNode) as Element
import Web.DOM.Internal.Types (Element, Node)
import Web.DOM.Node (textContent) as Node
import Web.DOM.Text (toNode) as Text
import Web.HTML (window) as HTML
import Web.HTML.HTMLDocument (toDocument) as HTMLDocument
import Web.HTML.Window (document) as Window

import Dom (replaceElement, appendNodes) as Dom
import Number (format) as Number
import Parser (TextWithNumber)
import Parser (textWithNumber) as Parser

type NumberElem =
  { elem :: Element
  , number :: Number
  }

set :: { tag :: String, node :: Node } -> Effect (Maybe NumberElem)
set { tag, node } = do
  content <- Node.textContent node
  case Parser.textWithNumber content of
    Just twn -> do
      textWithNumber <- textWithNumberElem tag twn
      Dom.replaceElement node (Element.toNode textWithNumber)
      pure (Just { elem: textWithNumber, number: twn.number })
    Nothing ->
      pure Nothing

textWithNumberElem :: String -> TextWithNumber -> Effect Element
textWithNumberElem tag { begin, number, end } = do
  document <- HTMLDocument.toDocument <$> (HTML.window >>= Window.document)
  elem <- Document.createElement tag document
  beginNode <- Text.toNode <$> Document.createTextNode begin document
  numberNode <- numberElem number
  endNode <- Text.toNode <$> Document.createTextNode end document
  Dom.appendNodes (Element.toNode elem) [ beginNode, Element.toNode numberNode, endNode ]
  pure elem

numberElem :: Number -> Effect Element
numberElem number = do
  document <- HTMLDocument.toDocument <$> (HTML.window >>= Window.document)
  container <- Document.createElement "input" document
  Element.setClassName "number" container
  Element.setAttribute "value" (Number.format number) container
  pure container