module Gargantext.Components.Bootstrap.ProgressBar(progressBar) where

import Gargantext.Prelude

import Data.Foldable (intercalate)
import Gargantext.Components.Bootstrap.Types (Variant(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H

type Props   =
  ( value     :: Number
  , waitingTextClass :: String
  | Options
  )

type Options =
  ( className :: String
  , variant   :: Variant
  )

options :: Record Options
options =
  { className : ""
  , variant   : Primary
  }

-- | Structural Component for the Bootsrap "Progress Bar"
-- |
-- | https://getbootstrap.com/docs/4.6/components/progress/
progressBar :: forall r. R2.OptLeaf Options Props r
progressBar = R2.optLeaf component options

componentName :: String
componentName = "b-progress-bar"

bootstrapName :: String
bootstrapName = "progress"

component :: R.Component Props
component = R.hooksComponent componentName cpt where
  cpt props _ = do
    -- Computed
    let
      className = intercalate " "
        -- provided custom className
        [ props.className
        -- BEM classNames
        , componentName
        -- Bootstrap specific classNames
        , bootstrapName
        ]
    -- Render
    pure $

      H.div
      { className }
      [
        H.div
        { className: intercalate " "
            [ "progress-bar"
            , "bg-" <> show props.variant
            ]
        , style: { width: (show props.value) <> "%" }
        , role: "progress-bar"
        , "aria-valuenow": show $ props.value
        , "aria-valuemin": "0"
        , "aria-valuemax": "100"
        }
        []
      ,
        H.div
        { className: intercalate " "
          [ "progress-text"
          , props.waitingTextClass
          ]
        }
        [ H.text "Waiting task..." ]
      ]