module Pages.Top exposing (Model, Msg, Params, page)

import Html exposing (Html, button, div, h2, h5, img, text, ul, li, a)
import Html.Attributes exposing (src, style, class)
import Html.Events exposing (onClick)
import Http
import Json.Decode as Decode
import Spa.Document exposing (Document)
import Spa.Page as Page exposing (Page)
import Spa.Url as Url exposing (Url)


page : Page Params Model Msg
page =
    Page.element
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

-- INIT


type alias Params =
    ()

type alias App =
    { name : String
    , category : String
    , repository : Maybe String
    , versions : Maybe (List String)
    }


type Model
    = Failure
    | Loading
    | Success (List App)


init : Url Params -> ( Model, Cmd Msg )
init { params } =
    ( Loading, loadApps )


-- UPDATE


type Msg
    = MorePlease
    | GotApps (Result Http.Error (List App))


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MorePlease ->
            ( Loading, loadApps )

        GotApps result ->
            case result of
                Ok apps ->
                    ( Success apps, Cmd.none )

                Err _ ->
                    ( Failure, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- VIEW


view : Model -> Document Msg
view model =
    { title = "Examples.Cats"
    , body = [ body model ]
    }


body : Model -> Html Msg
body model =
    div []
        [ viewApps model
        ]

viewAppName : App -> Html Msg
viewAppName app =
    div [ class "col-4" ] 
        [ div [ class "card" ]
            [ div [ class "card-body" ]
                [ h5 [ class "card-title" ] [ text app.name ] 
                , div [ class "card-body" ] 
                    [ text app.category 
                    ]
                ]
            ]
    ]

viewApps : Model -> Html Msg
viewApps model =
    case model of
        Failure ->
            div [ ]
                [ text "I could not load a random cat for some reason. "
                , button [ onClick MorePlease ] [ text "Try Again!" ]
                ]

        Loading ->
            text "Loading..."

        Success apps ->
            div []
                [ div [ class "row" ]
                  (List.map viewAppName (List.sortBy .name apps))
                ]



-- HTTP


loadApps : Cmd Msg
loadApps =
    Http.get
        { url = "http://localhost:8000/abra-apps-list.json"
        , expect = Http.expectJson GotApps appListDecoder
        }


appDecoder : Decode.Decoder App
appDecoder =
    Decode.map4
        App
        (Decode.field "name" Decode.string)
        (Decode.field "category" Decode.string)
        (Decode.succeed Nothing)
        (Decode.succeed Nothing)

appListDecoder : Decode.Decoder (List App)
appListDecoder =
    Decode.list appDecoder