module Product 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 Icons exposing (..)
import Json.Decode as D
import Json.Encode as Encode
import Styles exposing (..)
import Url
import Url.Parser as P exposing ((</>), Parser, int, oneOf, s, string)
import Utils exposing (..)


type SubmitStatus
    = SubmitSuccess
    | SubmitFail
    | Submitting
    | NotSubmitted


type alias Product =
    { id : Int
    , name : String
    , kind : Maybe String
    , price : Float
    , description : Maybe String
    , src : String
    , iosSrc : String
    }


emptyProduct =
    Product -1 "" Nothing 0 Nothing "" ""


type alias Rating =
    { commentDate : String
    , commentText : Maybe String
    , customerName : String
    , productName : String
    , stars : Int
    }


type alias Model =
    { pageStatus : Status
    , listing : Product
    , ratings : List Rating
    , ratingStars : Int
    , ratingText : String
    , addRatingStatus : SubmitStatus
    }


type Status
    = Loading
    | Loaded
    | NotLoaded


type Msg
    = ListingLoaded (Result Http.Error Product)
    | RatingsLoaded (Result Http.Error (List Rating))
    | FetchProduct Int
    | FetchRatings Int
    | AddRatingStars Int
    | AddRatingComment String
    | AddRatingPressed
    | AddRatingSuccess (Result Http.Error ())
    | AddRatingFail
    | AddToCartSuccess (Result Http.Error ())
    | AddToCartPressed


init : Model
init =
    Model NotLoaded emptyProduct [] 5 "" NotSubmitted


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ListingLoaded res ->
            case res of
                Ok s ->
                    ( { model | listing = s, pageStatus = Loaded }, Cmd.none )

                Err e ->
                    let
                        _ =
                            Debug.log "error" e
                    in
                    ( { model | pageStatus = NotLoaded }, Cmd.none )

        RatingsLoaded res ->
            case res of
                Ok s ->
                    ( { model | ratings = s, pageStatus = Loaded }, Cmd.none )

                Err e ->
                    let
                        _ =
                            Debug.log "error" e
                    in
                    ( { model | pageStatus = NotLoaded }, Cmd.none )

        FetchProduct id ->
            ( { model | pageStatus = Loading }, fetchListing id )

        FetchRatings id ->
            ( { model | pageStatus = Loading }, fetchRatings id )

        AddRatingStars i ->
            ( { model | ratingStars = i }, Cmd.none )

        AddRatingComment s ->
            ( { model | ratingText = s }, Cmd.none )

        AddRatingPressed ->
            ( { model | addRatingStatus = Submitting }
            , submitRating model
            )

        AddRatingSuccess res ->
            case res of
                Ok _ ->
                    ( { model | addRatingStatus = SubmitSuccess }, fetchRatings model.listing.id )

                Err _ ->
                    ( { model | addRatingStatus = SubmitFail }, Cmd.none )

        AddRatingFail ->
            ( { model | addRatingStatus = SubmitFail }, Cmd.none )

        AddToCartPressed ->
            ( model, addToCart model )

        AddToCartSuccess _ ->
            ( model, Cmd.none )


decodeProduct : D.Decoder Product
decodeProduct =
    D.map7 Product
        (D.field "id" D.int)
        (D.field "name" D.string)
        (D.field "kind" (D.nullable D.string))
        (D.field "price" D.float)
        (D.field "description" (D.nullable D.string))
        (D.field "src" D.string)
        (D.field "ios_src" D.string)


decodeRating : D.Decoder Rating
decodeRating =
    D.map5 Rating
        (D.field "comment_date" D.string)
        (D.field "comment_text" (D.nullable D.string))
        (D.field "customer_name" D.string)
        (D.field "product_name" D.string)
        (D.field "stars" D.int)


decodeRatings : D.Decoder (List Rating)
decodeRatings =
    D.list decodeRating


fetchListing : Int -> Cmd Msg
fetchListing id =
    let
        _ =
            Debug.log "err" <| "fetching listing " ++ String.fromInt id
    in
    Http.get
        { url = "http://127.0.0.1:7878/product/" ++ String.fromInt id
        , expect = Http.expectJson ListingLoaded decodeProduct
        }


fetchRatings : Int -> Cmd Msg
fetchRatings id =
    let
        _ =
            Debug.log "err" <| "fetching ratings " ++ String.fromInt id
    in
    Http.get
        { url = "http://127.0.0.1:7878/product/reviews/" ++ String.fromInt id
        , expect = Http.expectJson RatingsLoaded decodeRatings
        }


encodeRatingForm : Model -> Encode.Value
encodeRatingForm model =
    Encode.object
        [ ( "product_id", Encode.int model.listing.id )
        , ( "stars", Encode.int model.ratingStars )
        , ( "comment_text", Encode.string model.ratingText )
        ]


submitRating : Model -> Cmd Msg
submitRating model =
    let
        _ =
            Debug.log "err" <| "submitting rating for" ++ String.fromInt model.listing.id
    in
    Http.riskyRequest
        { method = "POST"
        , headers = []
        , url = "http://127.0.0.1:7878/rating/add"
        , body = model |> encodeRatingForm |> Http.jsonBody
        , expect = Http.expectWhatever AddRatingSuccess
        , timeout = Nothing
        , tracker = Nothing
        }


addToCart : Model -> Cmd Msg
addToCart model =
    let
        _ =
            Debug.log "err" <| "adding to cart: " ++ String.fromInt model.listing.id
    in
    Http.riskyRequest
        { method = "POST"
        , headers = []
        , url = "http://127.0.0.1:7878/cart/add"
        , body = Http.stringBody "applcation/json" <| String.fromInt <| model.listing.id
        , expect = Http.expectWhatever AddToCartSuccess
        , timeout = Nothing
        , tracker = Nothing
        }


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

        Loaded ->
            "Ready!"

        NotLoaded ->
            "Not loaded ..."


viewProduct : Product -> Html Msg
viewProduct p =
    div
        [ css
            [ marginBottom (px 20)
            , paddingTop (px 20)
            , Css.width (pct 100)
            ]
        ]
        [ div
            [ css
                [ float left
                , Css.width (pct 50)
                , Css.height (px 400)
                ]
            ]
            [ modelViewer
                [ cameraControls
                , autoRotate
                , arSrc p.src
                , arIosSrc p.iosSrc
                , loading "eager"
                , arModes "webxr"
                , css [ Css.height (pct 100), Css.width (pct 100) ]
                ]
                []
            ]
        , div
            [ css
                [ float left
                , Css.width (pct 50)
                ]
            ]
            [ div
                [ css
                    [ cardSecondaryText
                    , paddingBottom (px 3)
                    , textTransform uppercase
                    ]
                ]
                [ text <| Maybe.withDefault "" p.kind ]
            , div
                [ css
                    [ cardPrimaryText
                    , paddingBottom (px 12)
                    ]
                ]
                [ text p.name ]
            , div
                [ css
                    [ cardSupportingText
                    , paddingBottom (px 6)
                    ]
                ]
                [ text <| Maybe.withDefault "No description provided" p.description ]
            , div
                [ css
                    [ fontWeight bold
                    , fontSize (px 14)
                    , money
                    ]
                ]
                [ text <| String.fromFloat p.price ]
            ]
        , div
            [ css [ textAlign center, float bottom ] ]
            [ furbyButton [ onClick AddToCartPressed, style "width" "100%" ] [ text "Add To Cart" ] ]
        , div [ style "clear" "both" ] []
        ]


viewStarRating : Int -> Html Msg
viewStarRating i =
    div []
        (List.repeat i starIcon)


viewRating : Rating -> Html Msg
viewRating r =
    -- div []
    --     [ text <| r.customerName ++ " posted on "
    --     , text <| r.commentDate ++ " "
    --     , text <| Maybe.withDefault "" r.commentText
    --     , text <| " Stars: " ++ String.fromInt r.stars
    --     ]
    div
        [ css
            [ border3 (px 1) solid theme.primary
            , borderRadius (px 4)
            , marginBottom (px 20)
            , padding (px 20)
            ]
        ]
        [ div
            [ css
                [ fontSize (px 16)
                , fontWeight bold
                , paddingBottom (px 3)
                ]
            ]
            [ text r.customerName ]
        , viewStarRating r.stars
        , div
            [ css
                [ cardSecondaryText
                , paddingBottom (px 12)
                ]
            ]
            [ text <| "Reviewed on " ++ r.commentDate ]
        , if r.commentText /= Nothing then
            div
                [ css [ cardSupportingText ] ]
                [ text <| Maybe.withDefault "" <| r.commentText ]

          else
            text ""
        ]


viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
    input
        [ type_ t
        , placeholder p
        , value v
        , onInput toMsg
        , css [ Css.width (pct 100) ]
        ]
        []


viewStars : Model -> Html Msg
viewStars model =
    let
        activeStyle =
            [ border3 (px 3) solid theme.fg ]

        inactiveStyle =
            [ border3 (px 3) solid theme.primary ]

        buttonStyle =
            [ borderRadius (px 6), margin (px 6), backgroundColor theme.bg, padding2 (px 4) (px 8) ]
    in
    div
        [ css
            [ Css.width (pct 100)
            , margin auto
            , padding (px 12)
            , textAlign center
            ]
        ]
        (List.map
            (\i ->
                button
                    [ onClick (AddRatingStars i)
                    , (if i == model.ratingStars then
                        activeStyle

                       else
                        inactiveStyle
                      )
                        ++ buttonStyle
                        |> css
                    ]
                    [ text <| String.fromInt i ]
            )
            [ 1, 2, 3, 4, 5 ]
        )


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

        _ ->
            div
                [ css
                    [ Css.width (pct 50)
                    , margin auto
                    ]
                ]
                [ div [] [ viewProduct model.listing ]
                , div
                    [ css [ cardPrimaryText ] ]
                    [ text "User Reviews" ]
                , if model.ratings == [] then
                    text "Be the first to add a review."

                  else
                    ul
                        [ css
                            [ padding (px 0)
                            , listStyle Css.none
                            ]
                        ]
                        (List.map viewRating model.ratings)
                , div
                    [ css [ cardPrimaryText, margin2 (px 20) (px 0) ] ]
                    [ text "Rate this product" ]
                , div
                    []
                    [ viewStars model
                    , div
                        []
                        [ textarea
                            [ onInput AddRatingComment
                            , rows 5
                            , placeholder "Enter comment text"
                            , css [ Css.width (pct 100) ]
                            ]
                            [ text model.ratingText ]
                        ]
                    , div
                        [ css
                            [ textAlign center ]
                        ]
                        [ furbyButton [ onClick AddRatingPressed ] [ text "Submit Rating" ] ]
                    ]
                ]