content: {-# LANGUAGE LambdaCase #-}
  {-# LANGUAGE OverloadedStrings #-}
  {-# LANGUAGE ScopedTypeVariables #-}
  
  module Cardano.Tracer.Handlers.RTView.UI.HTML.Logs
    ( mkLogsLiveView
    ) where
  
  import           Cardano.Tracer.Environment
  import           Cardano.Tracer.Handlers.RTView.UI.Img.Icons
  import           Cardano.Tracer.Handlers.RTView.UI.Logs
  import           Cardano.Tracer.Handlers.RTView.UI.Utils
  
  import           Control.Monad (void)
  
  import qualified Graphics.UI.Threepenny as UI
  import           Graphics.UI.Threepenny.Core
  
  mkLogsLiveView :: TracerEnv -> UI Element
  mkLogsLiveView tracerEnv = do
    closeIt <- UI.button #. "delete"
  
    _searchMessagesInput <-
      UI.input #. "input rt-view-search-messages"
               # set UI.type_ "text"
               # set (UI.attr "placeholder") "Search log items"
    _searchMessages <-
      UI.button #. "button is-info"
                #+ [image "rt-view-search-logs-icon" searchSVG]
  
    _whenToSearch <-
      UI.div #. "dropdown is-hoverable" #+
        [ UI.div #. "dropdown-trigger" #+
            [ UI.button #. "button"
                        # set ariaHasPopup "true"
                        # set ariaControls "dropdown-menu4" #+
                [ UI.span # set text "Last 3 days"
                -- ICON?
                ]
            ]
        , UI.div ## "dropdown-menu4"
                 #. "dropdown-menu"
                 # set role "menu" #+
            [ UI.div #. "dropdown-content" #+
                [ UI.div #. "dropdown-item" #+
                    [ UI.p # set text "TEST ME"
                    ]
                ]
            ]
        ]
  
    _whereToSearch <-
      UI.div #. "dropdown is-hoverable" #+
        [ UI.div #. "dropdown-trigger" #+
            [ UI.button #. "button"
                        # set ariaHasPopup "true"
                        # set ariaControls "dropdown-menu4" #+
                [ UI.span # set text "In message"
                -- ICON?
                ]
            ]
        , UI.div ## "dropdown-menu4"
                 #. "dropdown-menu"
                 # set role "menu" #+
            [ UI.div #. "dropdown-content" #+
                [ UI.div #. "dropdown-item" #+
                    [ UI.p # set text "TEST ME"
                    ]
                ]
            ]
        ]
  
    fontSetter <-
      UI.input ## "logs-live-view-font-setter"
               # set UI.type_ "range"
               # set min_     "1"
               # set max_     "6"
               # set value    "5"
    on_ change fontSetter do
      window <- askWindow
      fontSizePct <-
        get value fontSetter >>= \case
          "1" -> return "50%"
          "2" -> return "60%"
          "3" -> return "70%"
          "4" -> return "80%"
          "5" -> return "90%"
          "6" -> return "100%"
          _   -> return "90%"
      findAndSet (set style [("font-size", fontSizePct)]) window "node-logs-live-view-tbody"
      saveLogsLiveViewFont tracerEnv fontSizePct
  
    logsLiveViewTable <-
      UI.div ## "logs-live-view-modal-window" #. "modal" # set dataState "closed" #+
        [ UI.div #. "modal-background" #+ []
        , UI.div #. "modal-card rt-view-logs-live-view-modal" #+
            [ UI.header #. "modal-card-head rt-view-logs-live-view-head" #+
                [ UI.p #. "modal-card-title rt-view-logs-live-view-title" #+
                    [ string "Log items from connected nodes"
                    ]
                , element closeIt
                ]
            , UI.mkElement "section" #. "modal-card-body rt-view-logs-live-view-body" #+
                [ UI.div #. "columns" #+
                    [ UI.div #. "column is-8" #+
                        [ UI.div #. "bd-notification" #+
                            [ UI.div ## "logs-live-view-nodes-checkboxes" #. "field" #+ []
                            ]
                        ]
                    , UI.div #. "column has-text-right" #+
                        [ string "A" #. "is-size-5 mr-2"
                        , element fontSetter
                        , string "A" #. "is-size-3 ml-2"
                        ]
                    ]
                , UI.div ## "logs-live-view-table-container" #. "table-container" #+
                    [ UI.div ## "node-logs-live-view-tbody"
                             #. "rt-view-logs-live-view-tbody"
                             # set dataState "0"
                             #+ []
                    ]
                ]
            {-
            , UI.mkElement "footer" #. "modal-card-foot rt-view-logs-live-view-foot" #+
                [ UI.div #. "columns" #+
                    [ UI.div #. "column" #+
                        [ UI.div #. "field has-addons" #+
                            [ UI.p #. "control" #+
                                [ element whenToSearch
                                ]
                            , UI.p #. "control" #+
                                [ element whereToSearch
                                ]
                            , UI.p #. "control" #+
                                [ element searchMessagesInput
                                ]
                            , UI.p #. "control" #+
                                [ element searchMessages
                                ]
                            ]
                        ]
                    --, UI.div #. "column has-text-right" #+
                    --    [ element exportToJSON
                    --    ]
                    ]
                ]
            -}
            ]
        ]
    on_ UI.click closeIt do
      void $ element logsLiveViewTable #. "modal"
      void $ element logsLiveViewTable # set dataState "closed"
  
    return logsLiveViewTable
   where
    change = void . domEvent "change"
  