module Catalog 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 Order
    = Rating
    | Price


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


type alias Filters =
    { price : ( Float, Float )
    , rating : ( Float, Float )
    }


defaultFilters : Filters
defaultFilters =
    Filters ( -1, 100000 ) ( 0, 5 )


type alias Model =
    { pageStatus : Status
    , products : List Product
    , filters : Filters
    }


type Status
    = Loading
    | Loaded
    | NotLoaded


type Msg
    = ProductsLoaded (Result Http.Error (List Product))
    | FetchProducts
    | ChangePriceLower Float
    | ChangePriceUpper Float
    | ChangeRatingLower Float
    | ChangeRatingUpper Float


init : Model
init =
    Model NotLoaded [] defaultFilters


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

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

        FetchProducts ->
            ( { model | pageStatus = Loading }, fetchProducts )

        ChangePriceLower v ->
            let
                fs =
                    model.filters

                nfs =
                    { fs | price = mapFirst (always v) fs.price }
            in
            ( { model | filters = nfs }, Cmd.none )

        ChangePriceUpper v ->
            let
                fs =
                    model.filters

                nfs =
                    { fs | price = mapSecond (always v) fs.price }
            in
            ( { model | filters = nfs }, Cmd.none )

        ChangeRatingLower v ->
            let
                fs =
                    model.filters

                nfs =
                    { fs | rating = mapFirst (always v) fs.rating }
            in
            ( { model | filters = nfs }, Cmd.none )

        ChangeRatingUpper v ->
            let
                fs =
                    model.filters

                nfs =
                    { fs | rating = mapSecond (always v) fs.rating }
            in
            ( { model | filters = nfs }, Cmd.none )


decodeProduct : D.Decoder Product
decodeProduct =
    D.map8 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 "average_rating" (D.nullable D.float))
        (D.field "src" D.string)
        (D.field "ios_src" D.string)


decodeResponse : D.Decoder (List Product)
decodeResponse =
    D.list decodeProduct


fetchProducts : Cmd Msg
fetchProducts =
    let
        _ =
            Debug.log "err" "fetching products"
    in
    Http.get
        { url = "http://127.0.0.1:7878/product/catalog"
        , expect = Http.expectJson ProductsLoaded decodeResponse
        }


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)
            , border3 (px 1) solid theme.primary
            , borderRadius (px 4)
            , padding (px 20)
            , Css.width (pct 100)
            , maxWidth (px 650)
            ]
        ]
        [ div
            [ css
                [ float left
                , Css.width (pct 50)
                ]
            ]
            [ modelViewer
                [ cameraControls
                , autoRotate
                , arSrc p.src
                , arIosSrc p.iosSrc
                , loading "eager"
                , arModes "webxr"
                ]
                []
            ]
        , 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 3)
                    ]
                ]
                [ a [ href ("/product/" ++ String.fromInt p.id) ] [ text p.name ] ]
            , div
                [ css
                    [ cardSecondaryText
                    , paddingBottom (px 12)
                    ]
                ]
                [ case p.averageRating of
                    Just v ->
                        text <| "Avg Rating: " ++ String.fromFloat v

                    Nothing ->
                        text "No Ratings"
                ]
            , 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 [ style "clear" "both" ] []
        ]


viewFilters : Model -> Html Msg
viewFilters model =
    let
        priceRange =
            range 0 55000 5000

        ratingRange =
            range 1 6 1

        viewRange default scale =
            List.map (\i -> option [ selected (i == default) ] [ text <| String.fromInt i ]) scale

        inp =
            Maybe.withDefault 0 << String.toFloat
    in
    div
        []
        [ div
            [ css
                [ bigHeading
                , paddingBottom (px 12)
                ]
            ]
            [ text "Filters" ]
        , div []
            [ div [] [ text "Price" ]
            , furbySelect [ onInput (ChangePriceLower << inp), style "appearance" "none" ] (viewRange 0 priceRange)
            , text "to"
            , furbySelect [ onInput (ChangePriceUpper << inp), style "appearance" "none" ] (viewRange 50000 priceRange)
            ]
        , div []
            [ div [] [ text "Rating" ]
            , furbySelect [ onInput (ChangeRatingLower << inp), style "appearance" "none" ] (viewRange 1 ratingRange)
            , text "to"
            , furbySelect [ onInput (ChangeRatingUpper << inp), style "appearance" "none" ] (viewRange 5 ratingRange)
            ]
        ]


filterProducts : Model -> List Product
filterProducts model =
    model.products
        |> List.filter (between model.filters.price << .price)
        |> List.filter
            (\p ->
                p.averageRating
                    |> Maybe.withDefault 5.0
                    |> between model.filters.rating
            )


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

        _ ->
            div
                [ css [ padding (px 40) ] ]
                [ div
                    [ css
                        [ float left
                        , Css.width (pct 20)
                        ]
                    ]
                    [ viewFilters model ]
                , div
                    [ css
                        [ float left
                        , Css.width (pct 80)
                        ]
                    ]
                    [ div [ css [ bigHeading ] ] [ text "Products" ]
                    , ul
                        [ css
                            [ padding (px 0)
                            , listStyle Css.none
                            ]
                        ]
                        (filterProducts model |> List.map viewProduct)
                    ]
                ]