module Frontend.Component.Cameras where

import Prelude

import Data.Maybe (Maybe(..))
import Effect.Aff.Class (class MonadAff)
import Frontend.Dom (card)
import Frontend.Types (Config(..))
import Frontend.Util (classes)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP


type State =
  { config :: Config
  }

data Action
  = Initialize

type Input = { config :: Config }


component :: forall query output m. MonadAff m => H.Component HH.HTML query Input output m
component = H.mkComponent
  { initialState: identity
  , render
  , eval: H.mkEval H.defaultEval
    { initialize = Just Initialize
    }
  }


render :: forall s m. MonadAff m => State -> H.ComponentHTML Action s m
render { config: Config config } =
  HH.div [ classes ["row"] ] $
  config.cameras <#> \info ->
    card ["col-lg-6"]
      [ HH.text "Camera View" ]
      [ HH.b_ [ HH.text $ "Name: " <> info.name ]
      , HH.br_
      , HH.text $ "Resolution: " <> show info.width <> "×" <> show info.height
      , HH.br_
      , HH.a [ HP.href $ "/info/" <> info.image ]
        [ HH.img [ classes ["camera-preview"], HP.src $ "/info/" <> info.image ]
        ]
      ]