module Page
  ( component
  , Query
  ) where

import Control.Monad.Aff (Aff)
import Data.Array (sortBy, filter)
import Data.Maybe (Maybe(..))
import Data.String (contains, Pattern(..))
import DOM (DOM)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Prelude

import Food (Aliment)
import Food as Food
import Format as Format
import Indicator as Indicator

data Query a =
  NoOp a
  | UpdateSearch String a

type State = String

type Message = Unit

component :: forall eff. H.Component HH.HTML Query State Message (Aff (dom :: DOM | eff))
component =
  H.component
    { initialState: const ""
    , render
    , eval
    , receiver: const Nothing
    }
  where
    render :: State -> H.ComponentHTML Query
    render state =
      HH.div
        [ HP.class_ $ HH.ClassName "page" ]
        [ renderHeader state
        , HH.div
            [ HP.class_ $ HH.ClassName "aliments" ]
            ( Food.all
                # filter (\a -> contains (Pattern $ Format.string state) (Format.string a.name))
                # sortBy (\a b -> compare (Format.string a.name) (Format.string b.name))
                # map renderAliment
            )
        ]

    eval :: Query ~> H.ComponentDSL State Query Message (Aff (dom :: DOM | eff))
    eval = case _ of
      NoOp next -> pure next
      UpdateSearch search next -> do
        H.put search
        pure next

renderHeader :: String -> H.ComponentHTML Query
renderHeader search =
  HH.div
    [ HP.class_ $ HH.ClassName "header" ]
    [ HH.div
        [ HP.class_ $ HH.ClassName "title line" ]
        [ HH.div
            []
            [ HH.text "Aliment" ]
        , HH.div
            []
            [ HH.text "Index glycémique" ]
        , HH.div
            []
            [ HH.text "Glucides pour 100g" ]
        , HH.div
            []
            [ HH.text "Charge glycémique" ]
        ]
    , HH.input
        [ HP.class_ $ HH.ClassName "search line"
        , HP.placeholder "Rechercher…"
        , HE.onValueInput (HE.input UpdateSearch)
        , HP.value search
        ]
    ]

renderAliment :: Aliment -> H.ComponentHTML Query
renderAliment aliment =
  HH.div
    [ HP.class_ $ HH.ClassName "aliment line" ]
    [ HH.div
        []
        [ HH.text aliment.name ]
    , HH.div
        [ HP.class_ $ HH.ClassName "number" ]
        [ HH.text (show aliment.glycemicIndex) ]
    , HH.div
        [ HP.class_ $ HH.ClassName "number" ]
        [ HH.text (show aliment.carbohydrates) ]
    , let glycemicLoad = Food.glycemicLoad aliment
      in  HH.div
            [ HP.class_ $ HH.ClassName ("number " <> (Indicator.className $ Indicator.fromGlycemicLoad glycemicLoad)) ]
            [ HH.text (Format.number 2 glycemicLoad) ]
    ]