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 =
    [ spacing 20
    , E.width fill
    , E.height fill
    , E.alignTop
    , E.alignRight
    ]


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


cardFormatter : List (Element msg) -> Element msg
cardFormatter =
    column
        [ E.height fill
        , E.width fill
        , 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
        ]


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
            ]
        ]


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


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