Final.elm

module Main exposing (..)

import Debug
import Html
import Html.Keyed
import Ui.Button
import Ui.Input


type alias Model =
    { username : Ui.Input.Model
    , password : Ui.Input.Model
    , emails : List ( Ui.Input.Model, Ui.Button.Model )
    , addEmail : Ui.Button.Model
    }


type Command
    = String


type Msg
    = InputUsername Ui.Input.Msg
    | InputPassword Ui.Input.Msg
    | EmailChanged String Ui.Input.Msg
    | AddEmail
    | RemoveEmail String


init : Model
init =
    { username = Ui.Input.init ()
    , password = Ui.Input.init ()
    , emails = []
    , addEmail = Ui.Button.model "add email" "primary" "medium"
    }


update : Msg -> Model -> ( Model, Cmd Msg )
update msg_ model =
    case Debug.log "msg" msg_ of
        InputUsername msg ->
            let
                ( username, cmd ) =
                    Ui.Input.update msg model.username
            in
            ( { model | username = username }, Cmd.map InputUsername cmd )

        InputPassword msg ->
            let
                ( password, cmd ) =
                    Ui.Input.update msg model.password
            in
            ( { model | password = password }, Cmd.map InputPassword cmd )

        AddEmail ->
            let
                emails =
                    List.append model.emails [ ( Ui.Input.init (), Ui.Button.model "x" "primary" "medium" ) ]
            in
            ( { model | emails = emails }, Cmd.none )

        RemoveEmail uid ->
            let
                emails =
                    List.filter
                        (\( input, _ ) ->
                            uid /= input.uid
                        )
                        model.emails
            in
            ( { model | emails = emails }, Cmd.none )

        EmailChanged uid msg_ ->
            let
                foldEmail ( input, button ) ( command, emails ) =
                    if input.uid == uid then
                        let
                            ( updatedInput, updatedCommand ) =
                                Ui.Input.update msg_ input
                        in
                        ( Cmd.map (EmailChanged uid) updatedCommand, ( updatedInput, button ) :: emails )
                    else
                        ( command, ( input, button ) :: emails )

                ( cmd, emails ) =
                    List.foldr foldEmail ( Cmd.none, [] ) model.emails
            in
            ( { model | emails = emails }, cmd )


viewEmails : List ( Ui.Input.Model, Ui.Button.Model ) -> List (Html.Html Msg)
viewEmails emails =
    List.map
        (\( input, button ) ->
            Html.Keyed.node "div"
                []
                [ ( "row-" ++ input.uid
                  , Html.node "div"
                        []
                        [ Html.map (EmailChanged input.uid) (Ui.Input.view input)
                        , Ui.Button.render (RemoveEmail input.uid) button
                        , Html.text input.uid
                        , Html.text " - "
                        , Html.text input.value
                        ]
                  )
                ]
        )
        emails


view : Model -> Html.Html Msg
view model =
    Html.div []
        [ Html.map InputUsername (Ui.Input.view model.username)
        , Html.text model.username.value
        , Html.br [] []
        , Html.map InputPassword (Ui.Input.view model.password)
        , Html.text model.password.value
        , Html.div [] (viewEmails model.emails)
        , Html.br [] []
        , Ui.Button.render AddEmail model.addEmail
        ]


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


main =
    Html.program
        { init = ( init, Cmd.none )
        , update = update
        , view = view
        , subscriptions = subscriptions
        }