Main.gren

module Main exposing (main)

import Browser
import Html exposing (Html)
import Html.Attributes as Attribute
import Html.Events as Event


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


--- MODEL


type alias Model =
    { celsius : String
    , fahrenheit : String
    }


init : Model
init = 
    { celsius = ""
    , fahrenheit = ""
    }


--- UPDATE


type Msg
    = SetCelsius String
    | SetFahrenheit String


update : Msg -> Model -> Model
update msg model =
    when msg is
        SetCelsius value ->
            { celsius = value
            , fahrenheit = 
                value
                    |> String.toFloat 
                    |> Maybe.map celsiusToFahrenheit
                    |> Maybe.map String.fromFloat
                    |> Maybe.withDefault model.fahrenheit
            }

        SetFahrenheit value ->
            { fahrenheit = value
            , celsius = 
                value
                    |> String.toFloat
                    |> Maybe.map fahrenheitToCelsius
                    |> Maybe.map String.fromFloat
                    |> Maybe.withDefault model.celsius
            }


celsiusToFahrenheit : Float -> Float
celsiusToFahrenheit c =
    c * (9.0/5.0) + 32.0


fahrenheitToCelsius : Float -> Float
fahrenheitToCelsius f =
    (f - 32) * (5.0/9.0)


--- VIEW


view : Model -> Html Msg
view model = 
    Html.div []
        [ Html.input 
            [ Attribute.id "celsius"
            , Event.onInput SetCelsius
            , Attribute.value model.celsius
            ] 
            []
        , Html.text "Celsius"
        , Html.input 
            [ Attribute.id "fahrenheit"
            , Event.onInput SetFahrenheit 
            , Attribute.value model.fahrenheit
            ]
            []
        , Html.text "Fahrenheit"
        ]