module Checkout exposing (..)

import Browser
import Browser.Navigation as Nav
import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (..)
import Html.Styled.Events exposing (..)
import Http
import Json.Decode as D
import Json.Encode as Encode
import Styles exposing (..)
import Tuple exposing (..)
import Utils exposing (..)


type alias Model =
    { pageStatus : Status
    , paymentMode : String
    , cartTotal : Float
    }


type Status
    = Loading
    | Loaded
    | NotLoaded
    | CheckedOut


type Msg
    = CheckoutPressed
    | CheckoutSuccessful (Result Http.Error ())
    | AmountLoaded (Result Http.Error Float)
    | FetchAmount
    | PaymentModeSelected String


init : Model
init =
    Model NotLoaded "Cash" 0


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        CheckoutPressed ->
            ( model, tryCheckout model.paymentMode )

        CheckoutSuccessful _ ->
            ( { model | pageStatus = CheckedOut }, Cmd.none )

        AmountLoaded res ->
            case res of
                Ok v ->
                    ( { model | cartTotal = v }, Cmd.none )

                Err _ ->
                    ( { model | pageStatus = NotLoaded }, Cmd.none )

        FetchAmount ->
            let
                _ =
                    Debug.log "err" "fetching checkout amount"
            in
            ( { model | pageStatus = Loading }, fetchAmount )

        PaymentModeSelected s ->
            ( { model | paymentMode = s }, Cmd.none )


fetchAmount : Cmd Msg
fetchAmount =
    Http.riskyRequest
        { method = "GET"
        , headers = []
        , url = "http://127.0.0.1:7878/cart/total"
        , body = Http.emptyBody
        , expect = Http.expectJson AmountLoaded D.float
        , timeout = Nothing
        , tracker = Nothing
        }


tryCheckout : String -> Cmd Msg
tryCheckout pm =
    Http.riskyRequest
        { method = "POST"
        , headers = []
        , url = "http://127.0.0.1:7878/transaction/checkout"
        , body = Http.stringBody "application/json" pm
        , expect = Http.expectWhatever CheckoutSuccessful
        , timeout = Nothing
        , tracker = Nothing
        }


viewStatus : Status -> String
viewStatus s =
    case s of
        Loading ->
            "Loading"

        Loaded ->
            "Ready!"

        NotLoaded ->
            "Not loaded ..."

        CheckedOut ->
            "Checked out!"


view : Model -> Html Msg
view model =
    case model.pageStatus of
        Loading ->
            div [] [ text <| viewStatus Loading ]

        _ ->
            div
                [ css
                    [ margin auto
                    , marginTop (pct 5)
                    , Css.width (pct 40)
                    ]
                ]
                [ div [ css [ bigHeading, marginBottom (px 20) ] ] [ text "Checkout" ]
                , div [ css [ cardSupportingText ] ] [ text "Your total is" ]
                , div
                    [ css [ bigHeading, fontWeight bold, marginBottom (px 20) ] ]
                    [ text <| (++) "₹ " <| String.fromFloat <| model.cartTotal ]
                , div [ css [ cardSupportingText ] ] [ text "Select a payment mode" ]
                , div [] [ furbyRadio "Cash" (PaymentModeSelected "Cash") ]
                , div [] [ furbyRadio "Debit Card" (PaymentModeSelected "Debit Card") ]
                , div [] [ furbyRadio "Credit Card" (PaymentModeSelected "Credit Card") ]
                , div
                    []
                    [ div
                        [ css [ float left, Css.width (pct 40), margin (px 15) ] ]
                        [ furbyButton [ style "width" "100%" ] [ a [ href "/cart" ] [ text "Cancel" ] ] ]
                    , div
                        [ css [ float left, Css.width (pct 40), margin (px 15) ] ]
                        [ furbyButton [ onClick CheckoutPressed, style "width" "100%" ] [ text "Confirm and Pay" ] ]
                    ]
                ]