import Control.Monad.Trans.Class (lift)

import Data.Unfoldable (fromMaybe)

import Halogen.HTML.Events as E

import CSS (backgroundColor, border, rgb, solid, borderRadius, marginLeft)

import CSS (backgroundColor, border, rgb, solid, borderRadius, left)

component :: forall query input output. TimelineConfig -> H.Component HH.HTML query input output Aff
component conf = H.mkComponent 

type Capability m =
  { logStart :: m Instant
  , logEnd :: m Instant
  }
component :: forall query input output. Capability Aff -> TimelineConfig -> H.Component HH.HTML query input output Aff
component caps conf = H.mkComponent 

    render :: forall action slots m. TimelineState -> H.ComponentHTML action slots m

    render :: forall slots m. TimelineState -> H.ComponentHTML TimelineAction slots m

          ,lineHtml (intervalHtml conf st.limits <$> st.history)

          ,lineHtml (intervalHtml conf st.limits <$> st.history <> fromMaybe st.active)

              [P.classes (ClassName <$> ["btn", "btn-primary", "float-left"])]

              [P.classes (ClassName <$> ["btn", "btn-primary", "float-left"])
              ,E.onClick \_ -> Just Start
              ]

              [P.classes (ClassName <$> ["btn", "btn-primary", "float-right"])]

              [P.classes (ClassName <$> ["btn", "btn-primary", "float-right"])
              ,E.onClick \_ -> Just Stop
              ]

            llen = ilen limits.start limits.end
            clen = ilen limits.start limits.current

        _ <- H.subscribe timer
        pure unit

        t <- liftEffect now

        t <- lift caps.logStart 

        t <- liftEffect now

        t <- lift caps.logEnd

  let widthRatio = conf.width / ilen limits.start limits.end
      ileft = ilen limits.start i.start * widthRatio
      iwidth = ilen i.start i.end * widthRatio

  let maxWidth = ilen limits.start limits.end
      ileft = ilen limits.start i.start 
      iwidth = ilen i.start i.end 

      toPct n = pct (toNumber 100 * n / maxWidth)

        height (px $ toNumber 40)
        marginLeft (pct ileft)
        width (pct iwidth)

        height (px $ toNumber 44)
        left (toPct ileft)
        width (toPct iwidth)

  s { active = map (\a -> { start: a.start, end: t }) s.active 

  s { limits = s.limits { current = t }
    , active = map (_ { end = t }) s.active 

mockCapability :: Capability Aff
mockCapability = 
  { logStart: liftEffect now
  , logEnd: liftEffect now
  }

  --let c = component Login.mockCapability
  let c = component Login.apiCapability

  let --login = Login.mockCapability
      login = Login.apiCapability
      timeline = Timeline.mockCapability
  let c = component login timeline

  ( login :: Login.Slot Int
  , timeline :: Timeline.Slot Int

  ( login :: Login.Slot Unit
  , timeline :: Timeline.Slot Unit

  -> Timeline.Capability Aff

component loginCap = H.mkComponent 

component loginCap tlCap = H.mkComponent 

        HH.div_ [ HH.slot _login 0 (Login.component loginCap) unit (Just <<< LoginComplete) ]

        HH.div_ [ HH.slot _login unit (Login.component loginCap) unit (Just <<< LoginComplete) ]

        HH.div_ [ HH.slot _timeline 1 (Timeline.component { width: toNumber 600 }) unit absurd ]

        HH.div_ [ HH.slot _timeline unit (Timeline.component tlCap { width: toNumber 600 }) unit absurd ]