module Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)

-- import Config.Style.Colour.Helpers exposing (colourTheme)

import Config.Data.Identity exposing (pageNames)
import Config.Data.ImageFolders as M
    exposing
        ( ImageFolder(..)
        , getImageFolderString
        , imagePathMaker
        )
import Config.Helpers.Cards.Inner.Text exposing (divider)
import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..))
import Config.Helpers.Converters exposing (formatName)
import Config.Helpers.Response exposing (contentContainer)
import Config.Style.Colour.Helpers
    exposing
        ( ThemeColor(..)
        , getThemeColor
        )
import Config.Style.Fonts
    exposing
        ( defaultFontSize
        , headerFontSizeBig
        )
import Config.Style.Glow
    exposing
        ( glowDeepDarkGrey
        , glowDeepDarkOrange
        )
import Config.Style.Transitions exposing (transitionStyleSlow)
import Element as E
    exposing
        ( Device
        , DeviceClass(..)
        , Element
        , Orientation(..)
        , alignRight
        , alignTop
        , centerX
        , column
        , el
        , fill
        , height
        , image
        , link
        , mouseOver
        , newTabLink
        , none
        , padding
        , paddingEach
        , paddingXY
        , paragraph
        , row
        , spacing
        , text
        , width
        )
import Element.Background as B exposing (color)
import Element.Border as D
    exposing
        ( color
        , roundEach
        , rounded
        , width
        )
import Element.Font as F
    exposing
        ( alignLeft
        , bold
        , center
        , color
        )
import Html.Attributes as H exposing (id)


cardMaker : Device -> Cardable -> List (Element msg) -> Element msg
cardMaker device cardable contents =
    let
        hasLink : Bool
        hasLink =
            case cardable of
                C.Contact _ ->
                    True

                C.Cuck c ->
                    False

                C.BlogArticle _ ->
                    False

                C.BlogCard _ ->
                    True

                C.Argument _ ->
                    False

                C.Gibberish _ ->
                    True

                C.Service _ ->
                    True

                C.Debate _ ->
                    True

                C.Donate _ ->
                    True

                C.Interview _ ->
                    False

                C.NutriDex _ ->
                    False

                C.ServicePage _ ->
                    False

                C.ContactPage _ ->
                    False

        cardTitleMaker : String -> String -> Maybe String -> Element msg
        cardTitleMaker htmlId title maybeUrl =
            el
                ([ headerFontSizeBig
                 , F.bold
                 , F.color (getThemeColor TextLightGrey)
                 , E.width fill
                 , E.htmlAttribute (H.id (formatName htmlId))
                 ]
                    ++ (case ( device.class, device.orientation ) of
                            ( Phone, Portrait ) ->
                                []

                            ( Tablet, Portrait ) ->
                                []

                            _ ->
                                [ F.center
                                , B.color (getThemeColor TextDarkOrange)
                                , D.roundEach
                                    { topLeft = 26
                                    , topRight = 26
                                    , bottomRight = 0
                                    , bottomLeft = 0
                                    }
                                , paddingEach
                                    { top = 6
                                    , bottom = 3
                                    , left = 20
                                    , right = 20
                                    }
                                ]
                       )
                )
            <|
                column
                    [ E.width fill
                    , spacing 10
                    ]
                    [ case ( device.class, device.orientation ) of
                        ( Phone, Portrait ) ->
                            case cardable of
                                C.NutriDex _ ->
                                    none

                                _ ->
                                    divider

                        ( Tablet, Portrait ) ->
                            case cardable of
                                C.NutriDex _ ->
                                    none

                                _ ->
                                    divider

                        _ ->
                            none
                    , case cardable of
                        C.BlogCard blogArticle ->
                            case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    image
                                        [ E.width fill
                                        , paddingEach
                                            { top = 8
                                            , bottom = 0
                                            , left = 0
                                            , right = 0
                                            }
                                        ]
                                        { src = "/blog/" ++ blogArticle.articleImage ++ ".jpg", description = "" }

                                ( Tablet, Portrait ) ->
                                    image
                                        [ E.width fill
                                        , paddingEach
                                            { top = 8
                                            , bottom = 0
                                            , left = 0
                                            , right = 0
                                            }
                                        ]
                                        { src = "/blog/" ++ blogArticle.articleImage ++ ".jpg", description = "" }

                                _ ->
                                    none

                        _ ->
                            none
                    , row
                        [ E.width fill
                        , spacing 10
                        , case ( device.class, device.orientation ) of
                            ( Phone, Portrait ) ->
                                F.alignLeft

                            ( Tablet, Portrait ) ->
                                F.alignLeft

                            _ ->
                                F.center
                        , paddingXY 0
                            (case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    10

                                ( Tablet, Portrait ) ->
                                    10

                                _ ->
                                    0
                            )
                        ]
                        [ case cardable of
                            C.NutriDex _ ->
                                case ( device.class, device.orientation ) of
                                    ( Phone, Portrait ) ->
                                        none

                                    ( Tablet, Portrait ) ->
                                        none

                                    _ ->
                                        paragraph [] [ text title ]

                            _ ->
                                paragraph [] [ text title ]
                        , el
                            [ alignRight
                            ]
                            (case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    case maybeUrl of
                                        Just url ->
                                            readMoreLink url

                                        Nothing ->
                                            none

                                ( Tablet, Portrait ) ->
                                    case maybeUrl of
                                        Just url ->
                                            readMoreLink url

                                        Nothing ->
                                            none

                                _ ->
                                    none
                            )
                        ]
                    ]

        readMoreLink : String -> Element msg
        readMoreLink url =
            link [ alignTop, paddingXY 0 5 ]
                { url = url
                , label =
                    el
                        [ F.color (getThemeColor TextLightGrey)
                        , B.color (getThemeColor TextDarkOrange)
                        , D.rounded 10
                        , paddingEach
                            { top = 6
                            , bottom = 3
                            , left = 10
                            , right = 10
                            }
                        , mouseOver
                            [ F.color (getThemeColor TextLightOrange)
                            , B.color (getThemeColor TextDeepDarkOrange)
                            ]
                        , transitionStyleSlow
                        , defaultFontSize
                        ]
                    <|
                        text
                            (case cardable of
                                C.Donate _ ->
                                    "Support!"

                                C.Argument _ ->
                                    "Proof Tree!"

                                _ ->
                                    "Read More!"
                            )
                }

        cardInner : String -> String -> Maybe String -> List (Element msg) -> Element msg
        cardInner htmlId title maybeUrl elements =
            column
                [ E.width fill
                , spacing 0
                ]
                [ cardTitleMaker htmlId title maybeUrl
                , (case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        el
                            [ E.width fill
                            , centerX
                            ]

                    ( Tablet, Portrait ) ->
                        el
                            [ E.width fill
                            , centerX
                            ]

                    _ ->
                        cardStuff
                  )
                  <|
                    row
                        [ E.width fill
                        ]
                        elements
                ]

        cardOuter : Element msg -> Element msg
        cardOuter elements =
            contentContainer <|
                el
                    ([ E.width fill
                     ]
                        ++ (case ( device.class, device.orientation ) of
                                ( Phone, Portrait ) ->
                                    []

                                ( Tablet, Portrait ) ->
                                    []

                                _ ->
                                    [ E.width fill
                                    , D.width 5
                                    , D.color (getThemeColor BackgroundDarkGrey)
                                    , D.rounded 32
                                    , glowDeepDarkGrey
                                    ]
                                        ++ (if hasLink then
                                                [ mouseOver
                                                    [ D.color (getThemeColor TextDarkOrange)
                                                    , B.color (getThemeColor TextDarkOrange)
                                                    , glowDeepDarkOrange
                                                    ]
                                                , transitionStyleSlow
                                                ]

                                            else
                                                []
                                           )
                           )
                    )
                    elements

        cardWithImageWithLink : String -> Bool -> String -> String -> String -> List (Element msg) -> Element msg
        cardWithImageWithLink htmlId linkBool title image url content =
            linkChooser
                linkBool
                (cardInner htmlId
                    title
                    (if hasLink then
                        Just url

                     else
                        Nothing
                    )
                    [ cardContentMaker content
                    ]
                )
                url

        cardWithNoImageWithLink : String -> Bool -> String -> String -> List (Element msg) -> Element msg
        cardWithNoImageWithLink htmlId linkBool title url content =
            linkChooser
                linkBool
                (cardInner htmlId
                    title
                    (Just url)
                    [ cardContentMaker content
                    ]
                )
                url

        cardWithImage : String -> String -> String -> List (Element msg) -> Element msg
        cardWithImage htmlId title image content =
            cardOuter <|
                cardInner htmlId
                    title
                    Nothing
                    [ cardContentMaker content
                    ]

        cardWithNoImage : String -> String -> List (Element msg) -> Element msg
        cardWithNoImage htmlId title content =
            cardOuter <|
                cardInner htmlId
                    title
                    Nothing
                    [ cardContentMaker content
                    ]

        linkChooser : Bool -> Element msg -> String -> Element msg
        linkChooser linkBool element url =
            cardOuter <|
                case ( device.class, device.orientation ) of
                    ( Phone, Portrait ) ->
                        el [ E.width fill ] <| element

                    ( Tablet, Portrait ) ->
                        el [ E.width fill ] <| element

                    _ ->
                        (if linkBool then
                            newTabLink

                         else
                            link
                        )
                            [ E.width fill ]
                            { url = url
                            , label = element
                            }
    in
    case cardable of
        C.Contact contact ->
            cardWithImageWithLink
                contact.contactImage
                contact.isNewTabLink
                contact.contactName
                (imagePathMaker M.Contact contact.contactImage)
                contact.contactLink
                contents

        C.Cuck cuck ->
            cardWithImage
                cuck.cuckImage
                cuck.cuckName
                (imagePathMaker M.Cuck cuck.cuckImage)
                contents

        C.BlogArticle blogArticle ->
            cardWithNoImage
                blogArticle.articleImage
                (String.toUpper blogArticle.articleName)
                contents

        C.BlogCard blogArticle ->
            cardWithImageWithLink
                blogArticle.articleImage
                blogArticle.isNewTabLink
                blogArticle.articleName
                (imagePathMaker M.BlogCard blogArticle.articleImage)
                blogArticle.articleLink
                contents

        C.Argument argument ->
            cardWithNoImage
                argument.argumentImage
                argument.argumentTitle
                contents

        C.Gibberish gibberish ->
            cardWithImageWithLink
                gibberish.gibberishImage
                gibberish.isNewTabLink
                gibberish.gibberishTitle
                (imagePathMaker M.Gibberish gibberish.gibberishImage)
                gibberish.gibberishLink
                contents

        C.Service service ->
            cardWithImageWithLink
                service.serviceImage
                service.isNewTabLink
                service.serviceName
                (imagePathMaker M.Service service.serviceImage)
                service.serviceLink
                contents

        C.Debate debate ->
            cardWithImageWithLink
                debate.debateImage
                debate.isNewTabLink
                debate.debateTitle
                (imagePathMaker M.Debate debate.debateImage)
                debate.debateLink
                contents

        C.Donate donate ->
            cardWithImageWithLink
                donate.donateImage
                donate.isNewTabLink
                donate.donateName
                (imagePathMaker M.Donate donate.donateImage)
                donate.donateLink
                contents

        C.Interview interview ->
            cardWithImage
                interview.interviewImage
                interview.interviewName
                (imagePathMaker M.Interviews interview.interviewImage)
                contents

        C.NutriDex nutriDex ->
            cardWithNoImage
                nutriDex.nutriDexTitle
                (String.toUpper nutriDex.nutriDexTitle)
                contents

        C.ServicePage service ->
            cardWithNoImage
                service.serviceImage
                (String.toUpper service.serviceName)
                contents

        C.ContactPage contact ->
            cardWithNoImage
                contact.contactImage
                (String.toUpper contact.contactName)
                contents


cardContentMaker : List (Element msg) -> Element msg
cardContentMaker content =
    column
        [ spacing 8
        , E.width fill
        ]
        content


cardStuff : Element msg -> Element msg
cardStuff content =
    el
        [ E.width fill
        , centerX
        , B.color (getThemeColor BackgroundDarkGrey)
        , padding 10
        , D.roundEach
            { topLeft = 0
            , topRight = 0
            , bottomRight = 26
            , bottomLeft = 26
            }
        ]
    <|
        el
            [ paddingXY 15 0
            , E.width fill
            , height fill
            ]
            content
