module Gargantext.Components.GraphExplorer.TopBar where

import Data.Maybe (Maybe(..))
import Reactix as R
import Reactix.DOM.HTML as RH
import Toestand as T

import Gargantext.Prelude hiding (max,min)

import Gargantext.Components.App.Data (Boxes)
import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
import Gargantext.Utils.Reactix as R2

here :: R2.Here
here = R2.here "Gargantext.Components.GraphExplorer.TopBar"

type TopBar =
  (
    boxes    :: Boxes
  )

topBar :: R2.Leaf TopBar
topBar p = R.createElement topBarCpt p []
topBarCpt :: R.Component TopBar
topBarCpt = here.component "topBar" cpt where
  cpt { boxes: { showTree
               , sidePanelGraph
               , sidePanelState } } _ = do
    { mGraph, multiSelectEnabled, selectedNodeIds, showControls } <- GEST.focusedSidePanel sidePanelGraph

    mGraph' <- T.useLive T.unequal mGraph

    let search = case mGraph' of
          Just graph -> nodeSearchControl { graph
                                         , multiSelectEnabled
                                         , selectedNodeIds } []
          Nothing -> RH.div {} []

    pure $ RH.form { className: "d-flex" }
      [ Toggle.treeToggleButton { state: showTree } []
      , Toggle.controlsToggleButton { state: showControls } []
      , Toggle.sidebarToggleButton { state: sidePanelState } []
      , search
      ]
    where
      rowToggle  = RH.ul { className: "navbar-nav ml-auto mr-auto" }
      col = RH.li { className: "nav-item" }
      spaces = RH.a { className: "nav-link" }