module PhotoGroove exposing (main)

import Array exposing (Array)
import Browser
import Html exposing (Html, button, div, h1, img, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)


type alias Model =
    { photos : List Photo, selectedUrl : String }


type alias Photo =
    { url : String }


initialModel : Model
initialModel =
    { photos =
        [ { url = "1.jpeg" }
        , { url = "2.jpeg" }
        , { url = "3.jpeg" }
        ]
    , selectedUrl = "1.jpeg"
    }


photoArray : Array Photo
photoArray =
    Array.fromList initialModel.photos


view : Model -> Html Message
view model =
    div [ class "content" ]
        [ h1 [] [ text "Photo Groove" ]
        , button [ onClick ClickedSurpriseMe ] [ text "Surprise me!" ]
        , div [ id "thumbnails" ]
            (List.map (viewThumbnail model.selectedUrl) model.photos)
        , img [ class "large", src (urlPrefix ++ "large/" ++ model.selectedUrl) ] []
        ]


viewThumbnail : String -> Photo -> Html Message
viewThumbnail selectedUrl thumb =
    img
        [ src (urlPrefix ++ thumb.url)
        , classList [ ( "selected", selectedUrl == thumb.url ) ]
        , onClick (ClickedThumbnail thumb.url)
        ]
        []


type Message
    = ClickedThumbnail String
    | ClickedSurpriseMe


update : Message -> Model -> Model
update msg model =
    case msg of
        ClickedThumbnail thumb ->
            { model | selectedUrl = thumb }

        ClickedSurpriseMe ->
            { model | selectedUrl = "2.jpeg" }


urlPrefix : String
urlPrefix =
    "http://elm-in-action.com/"


main : Program () Model Message
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }