import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String


main =
    Browser.sandbox { init = 0, update = update, view = view }


type Msg
    = Change String


update : Msg -> Int -> Int
update (Change upperLimit) model =
    Maybe.withDefault 0 (String.toInt upperLimit)


view : Int -> Html Msg
view model =
    div [ style "margin" "10px" ]
        [ h1 [] [ text "Fizz Buzz" ]
        , label [ style "font-weight" "bold", for "upperLimit" ] [ text "Upper limit:" ]
        , input
            [ style "margin-left" "10px"
            , style "margin-bottom" "10px"
            , id "upperLimit"
            , type_ "text"
            , onInput Change
            , size 3
            , maxlength 5
            , value (
                case model of
                  0 -> ""
                  _ -> String.fromInt model
              )
            ]
            [ text (String.fromInt model) ]
        , div [] [ text (fizzBuzz model) ]
        ]


fizzBuzz : Int -> String
fizzBuzz upperLimit =
    List.range 1 upperLimit
        |> List.map
            (\x ->
                let
                    mods =
                        ( (modBy 3 x) == 0, (modBy 5 x) == 0 )
                in
                    case mods of
                        ( True, True ) ->
                            "FizzBuzz"

                        ( True, False ) ->
                            "Fizz"

                        ( False, True ) ->
                            "Buzz"

                        _ ->
                            String.fromInt x
            )
        |> String.join ", "