Gifs.elm

module Gif exposing (main)

import Browser exposing (Document, UrlRequest)
import Browser.Navigation exposing (Key)
import Dict exposing (Dict)
import Element exposing (Attribute, Color, Element, centerX, centerY, column, el, fill, fillPortion, height, html, layout, maximum, none, padding, paragraph, px, rgb255, shrink, spacing, text, width, wrappedRow)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input exposing (button)
import Html exposing (Html)
import Html.Attributes exposing (placeholder, src, style)
import Html.Events exposing (on, onClick, onInput)
import Http
import Json.Decode as Decode exposing (Decoder)


main : Program () Model Msg
main =
    Browser.document
        { init = init
        , view = view
        , update = update
        , subscriptions = always Sub.none
        }



-- MODEL


type alias Model =
    { urls : List Gif
    , topic : String
    }


init : () -> ( Model, Cmd Msg )
init _ =
    ( Model [] "", Cmd.none )



-- UPDATE


type
    Msg
    --= MouseMsg Mouse.Position
    --| KeyMsg Keyboard.KeyCode
    = Update String
    | Then (Result Http.Error (List Gif))
    | Enter
    | Reset


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Update value ->
            ( Model model.urls value, Cmd.none )

        Then (Ok data) ->
            ( Model data model.topic, Cmd.none )

        Then (Err err) ->
            ( model, Debug.log "!" err |> always Cmd.none )

        Enter ->
            ( model, hit model.topic )

        Reset ->
            ( { model | urls = [], topic = "" }, Cmd.none )



-- VIEW


inputStyle : List (Html.Attribute msg)
inputStyle =
    [ style "height" "50px"
    , style "margin" "50px auto"
    , style "display" "block"
    ]


view : Model -> Document Msg
view model =
    { title = "Gifs!"
    , body =
        (if List.isEmpty model.urls then
            Input.text
                [ onKeydown
                    [ onEnter Enter ]
                    |> Element.htmlAttribute
                , centerX
                , centerY
                , width <| px 300
                ]
                { onChange = Update
                , placeholder = Just <| Input.placeholder [] <| text "Get some gifs!"
                , text = model.topic
                , label = Input.labelLeft [] none
                }

         else
            model.urls
                |> List.map
                    (\{ img, gif } ->
                        button []
                            { onPress = Just Reset
                            , label =
                                Element.image
                                    [ height <| px 200
                                    , width <| px 200
                                    , Element.image
                                        [ height <| px 200
                                        , width <| px 200
                                        , Element.transparent False
                                        , Element.mouseOver [ Element.transparent True ]
                                        ]
                                        { description = "Image!"
                                        , src = img
                                        }
                                        |> Element.inFront
                                    ]
                                    { description = "Gif!"
                                    , src = gif
                                    }
                            }
                    )
                |> Element.wrappedRow []
        )
            |> layout []
            |> List.singleton
    }



-- HTTP


hit : String -> Cmd Msg
hit topic =
    Http.get
        ("http://api.giphy.com/v1/gifs/search?q="
            ++ topic
            ++ "&limit=40&api_key=dc6zaTOxFJmzC"
        )
        decoder
        |> Http.send Then


type alias Gif =
    { gif : String
    , img : String
    }


decoder : Decode.Decoder (List Gif)
decoder =
    Decode.field "data"
        (Decode.list
            (Decode.map2 Gif
                (Decode.at
                    [ "images"
                    , "original"
                    , "url"
                    ]
                    Decode.string
                )
                (Decode.at
                    [ "images"
                    , "original_still"
                    , "url"
                    ]
                    Decode.string
                )
            )
        )



-- SUBSCRIPTIONS


key : Decoder String
key =
    Decode.field "key" Decode.string


matchKey : String -> msg -> Decoder msg
matchKey keyToMatch msg =
    key
        |> Decode.andThen
            (\currentKey ->
                if currentKey == keyToMatch then
                    Decode.succeed msg

                else
                    Decode.fail ""
            )


onKeydown : List (Decoder msg) -> Html.Attribute msg
onKeydown =
    Decode.oneOf
        >> on "keydown"


onEnter : msg -> Decoder msg
onEnter =
    matchKey "Enter"


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