module Config.CardFormat exposing (..)

import Config.Colour exposing (..)
import Config.Format exposing (..)
import Cuckery.Types exposing (..)
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B exposing (..)
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared
import View exposing (View)


topLevelBox =
    [ E.width fill
    , E.height fill
    , E.alignTop
    , E.alignRight
    , paddingEach
        { top = 10
        , bottom = 10
        , left = 10
        , right = 10
        }
    ]


cardMaker : List (Element msg) -> Element msg
cardMaker =
    column
        [ E.width fill
        , D.width 5
        , centerX
        , D.color colourTheme.backgroundDarkGrey
        , D.rounded 32
        ]


cardFormatter : List (Element msg) -> Element msg
cardFormatter =
    column
        [ E.height fill
        , E.width fill
        , centerX
        , B.color colourTheme.backgroundDarkGrey
        , paddingEach
            { top = 10
            , bottom = 10
            , left = 10
            , right = 10
            }
        , D.roundEach
            { topLeft = 0
            , topRight = 0
            , bottomRight = 26
            , bottomLeft = 26
            }
        , spacing 8
        ]


cardSubTitleMaker : List (Element msg) -> Element msg
cardSubTitleMaker =
    paragraph
        (paragraphFormat
            ++ [ F.size 18
               , centerX
               , F.center
               ]
        )


cardContentSpacing : List (Element msg) -> Element msg
cardContentSpacing =
    column
        [ paddingEach
            { top = 0
            , bottom = 0
            , left = 15
            , right = 15
            }
        , spacing 8
        , width fill
        ]


cardImageMaker : { src : String, description : String } -> Element msg
cardImageMaker image =
    column
        [ E.width <| px 115
        , E.height <| px 115
        , alignTop
        , alignRight
        ]
        [ column
            [ D.rounded 100
            , D.width 5
            , D.color colourTheme.backgroundDarkGrey
            , B.color colourTheme.backgroundDarkGrey
            , mouseOver [ D.color colourTheme.textDarkOrange ]
            , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
            ]
            [ E.image
                [ alignRight
                , alignTop
                , D.rounded 100
                , clip
                , E.width <| px 90
                , E.height <| px 90
                ]
                image
            ]
        ]


cardImageMakerMobile : { src : String, description : String } -> Element msg
cardImageMakerMobile image =
    column
        [ alignTop
        , centerX
        , alignLeft
        , paddingEach
            { top = 0
            , bottom = 10
            , left = 0
            , right = 0
            }
        ]
        [ column
            [ D.rounded 100
            , D.width 5
            , centerX
            , alignBottom
            , D.color colourTheme.backgroundLightGrey
            , B.color colourTheme.backgroundLightGrey
            , mouseOver [ D.color colourTheme.textDarkOrange ]
            , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
            ]
            [ E.image
                [ D.rounded 100
                , clip
                , centerX
                , E.width <| px 45
                , E.height <| px 45
                ]
                image
            ]
        ]


cardTitleMaker : String -> Element msg
cardTitleMaker title =
    paragraph
        (nonHighlightedTitleFormat
            ++ [ F.size 20
               , B.color colourTheme.textDarkOrange
               , paddingEach
                    { top = 6
                    , bottom = 3
                    , left = 25
                    , right = 15
                    }
               , alignBottom
               , width fill
               , centerX
               , F.center
               , D.roundEach
                    { topLeft = 26
                    , topRight = 26
                    , bottomRight = 0
                    , bottomLeft = 0
                    }
               ]
        )
        [ text title ]


fieldSpacer : List (Attribute msg)
fieldSpacer =
    [ spacing 8
    , width fill
    ]