module Gargantext.Components.GraphExplorer.TopBar (topBar) where

import Gargantext.Prelude hiding (max, min)

import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
import Gargantext.Components.GraphExplorer.Store as GraphStore
import Gargantext.Components.GraphExplorer.Topbar.Search (nodeSearchControl)
import Gargantext.Types as GT
import Gargantext.Utils (nbsp, (?))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T

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

topBar :: R2.Leaf ()
topBar = R2.leaf component

component :: R.Component ()
component = here.component "topBar" cpt where
  cpt _ _ = do
    -- States
    { graph
    , multiSelectEnabled
    , selectedNodeIds
    , showControls
    , showSidebar
    } <- GraphStore.use

    graph'              <- R2.useLive' graph
    showControls'       <- R2.useLive' showControls
    showSidebar'        <- R2.useLive' showSidebar

    -- Render
    pure $

      H.div
      { className: "node-topbar graph-topbar bg-primary h-100" }
      [
        H.div
        { className: "node-topbar__title graph-topbar__title align-self-center px-1 text-light" }
        [
          B.icon { name: "hubzilla" }
        ,
          H.text $ nbsp 1
        ,
          H.text "Graph"
        ]
      ,
        -- Toolbar toggle
        B.button
        { className: "graph-topbar__toolbar rounded-circle-2 py-0 px-2 mr-1"
        , callback: \_ -> T.modify_ (not) showControls
        , variant: showControls' ?
            ButtonVariant Light $
            OutlinedButtonVariant Light
        , title: showControls' ?
            "Hide toolbar" $
            "Show toolbar"
        }
        [
          B.icon { name: "sliders" }
        ,
          H.text $ nbsp 1
        ,
          H.text "Toolbar"
        -- ,
        --   H.text $ showControls' ? "Hide toolbar" $ "Show toolbar"
        ]
      ,
        -- Sidebar toggle
        B.button
        { className: "graph-topbar__sidebar rounded-circle-2 py-0 px-2 mr-1"
        , callback: \_ -> T.modify_ GT.toggleSidePanelState showSidebar
        , variant: showSidebar' == GT.Opened ?
            ButtonVariant Light $
            OutlinedButtonVariant Light
        , title: showSidebar' == GT.Opened ?
            "Hide sidebar" $
            "Show sidebar"
        }
        [
          B.icon { name: "columns" }
        ,
          H.text $ nbsp 1
        ,
          H.text "Sidebar"
        -- ,
        --   H.text $ showSidebar' == GT.Opened ?
        --     "Hide sidebar" $
        --     "Show sidebar"
        ]
      ,
        -- Search
        nodeSearchControl
        { graph: graph'
        , multiSelectEnabled
        , selectedNodeIds
        , className: "graph-topbar__search"
        }
      ]