module CarwowTheme.ProductListing exposing (featuredView, condensedView, ProductListing, OptionProperties)

{-| ProductListing


# Exports

@docs featuredView, condensedView, ProductListing, OptionProperties

-}

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import CarwowTheme.Icons exposing (icon)


type alias PricingProperties =
    { firstPart : String
    , secondPart : String
    , topText : String
    , bottomText : String
    }

{-| Placeholder
-}
type alias OptionProperties =
    { name : String
    , value : String
    , icon : String
    }


type alias DealerProperties =
    { distance : String
    , name : String
    , supplier : String
    }

{-| Placeholder
-}
type alias ProductListing =
    { id : Int
    , image : Maybe String
    , make : String
    , model : String
    , derivativeName : String
    , options : List OptionProperties
    , price : PricingProperties
    , dealer : DealerProperties
    }

{-| Placeholder
-}
condensedView : ProductListing -> Html msg -> Html msg
condensedView productDetails ctaContent =
    div [ class "product-listing" ]
        [ div [ class "product-listing__main-characteristics" ]
            [ pricePartialView productDetails.price
            ]
        , div [ class "product-listing__information-container" ]
            [ dealerPartialView productDetails.dealer
            , ctaContent
            ]
        ]


renderThumbnail : Maybe String -> Html msg
renderThumbnail imageUrl =
    case imageUrl of
        Just image ->
            img [ class "product-image", src image ]
                []

        Nothing ->
            div [ class "product-image--empty" ]
                [ icon "location" { size = "x-large", colour = "light-grey", colouring = "outline" }
                ]

{-| Placeholder
-}
featuredView : ProductListing -> Html msg -> Html msg -> Html msg
featuredView details ctaContent availableColoursCta =
    div [ class "product-listing" ]
        [ div [ class "product-listing__ribbon" ]
            [ span [ class "product-listing__ribbon-text product-listing__ribbon-text--yellow" ]
                [ text "Your best price" ]
            ]
        , div [ class "product-listing__main-characteristics" ]
            [ figure [ class "product-image-container product-image-container--featured" ]
                [ renderThumbnail details.image
                ]
            , div [ class "product-listing__details" ]
                [ div [ class "product-details-container" ]
                    [ figcaption [ class "product-details" ]
                        [ div [ class "product-details__title product-details__title--featured" ]
                            [ span [ class "product-title__part" ]
                                [ text (details.make ++ " ") ]
                            , span [ class "product-title__part" ]
                                [ text details.model ]
                            , span [ class "product-title__part" ]
                                [ text details.derivativeName ]
                            ]
                        , availableColoursCta
                        , ul [ class "product-details__specifications-list product-details__specifications-list--leasing" ]
                            ((details.options)
                                |> List.map
                                    (\option ->
                                        li [ class "product-details__options-list-item" ]
                                            [ icon option.icon { size = "small", colour = "black", colouring = "outline" }
                                            , span [ class "product-details__options-list-item-text" ]
                                                [ text option.value ]
                                            ]
                                    )
                            )
                        ]
                    ]
                ]
            , div [ class "product-listing__price--featured" ]
                [ span [ class "product-price__amount-copy" ]
                    [ text details.price.topText ]
                , strong [ class "product-price__amount-price" ]
                    [ text details.price.firstPart
                    , span [ class "product-price__amount-price-decimal" ]
                        [ text ("." ++ details.price.secondPart) ]
                    ]
                , ul [ class "product-price__additional-info-list" ]
                    [ li [ class "product-price__additional-info-list-item product-price__additional-info-list-item--saving" ]
                        [ text details.price.bottomText
                        ]
                    ]
                ]
            ]
        , div [ class "product-listing__information-container" ]
            [ div [ class "product-listing__information-items" ]
                [ dealerPartialView details.dealer
                ]
            , ctaContent
            ]
        ]


dealerPartialView : DealerProperties -> Html msg
dealerPartialView dealer =
    div [ class "product-listing__information-items" ]
        [ div [ class "product-dealer-container" ]
            [ div [ class "product-dealer__name" ]
                [ label [ class "product-dealer__link" ]
                    [ text dealer.name ]
                , text " - "
                , span [ class "product-dealer__status" ]
                    [ text dealer.supplier
                    ]
                ]
            , div [ class "product-dealer__location" ]
                [ icon "location" { size = "small", colour = "dark-grey", colouring = "outline" }
                , span [ class "product-dealer__location-text" ]
                    [ text dealer.distance ]
                ]
            ]
        ]


pricePartialView : PricingProperties -> Html msg
pricePartialView price =
    div [ class "product-listing__price--condensed" ]
        [ span [ class "product-price__amount-copy" ]
            [ text price.topText ]
        , strong [ class "product-price__amount-price" ]
            [ text price.firstPart
            , span [ class "product-price__amount-price-decimal" ]
                [ text ("." ++ price.secondPart) ]
            ]
        , ul [ class "product-price__additional-info-list" ]
            [ li [ class "product-price__additional-info-list-item product-price__additional-info-list-item--saving" ]
                [ text price.bottomText
                ]
            ]
        ]