module Styles exposing (..)

import Base exposing (WordStatus(..))
import Css exposing (..)
import Css.Global exposing (global, selector)
import Html
import Html.Styled exposing (..)


styledButton : List (Attribute msg) -> List (Html msg) -> Html msg
styledButton =
    styled
        button
        [ marginTop (px 12)
        , marginBottom (px 12)
        , paddingTop (px 12)
        , paddingBottom (px 12)
        , paddingLeft (px 0)
        , paddingRight (px 12)
        , fontFamily monospace
        , border (px 0)
        , backgroundColor (hex "#fff")
        , borderRadius (px 4)
        ]


correctInputStyle : Style
correctInputStyle =
    color (hex "#000")


wrongInputStyle : Style
wrongInputStyle =
    wrongWordStyle


styledInput : Bool -> List (Attribute msg) -> List (Html msg) -> Html msg
styledInput inputStatus =
    styled
        input
        [ fontFamily monospace
        , if inputStatus then
            correctInputStyle

          else
            wrongInputStyle
        , border zero
        , paddingTop (px 12)
        , paddingBottom (px 12)
        , width (pct 95)
        ]


styledListItem : List (Attribute msg) -> List (Html msg) -> Html msg
styledListItem =
    styled
        li
        [ display inline
        ]


styledUnorderedList : List (Attribute msg) -> List (Html msg) -> Html msg
styledUnorderedList =
    styled
        ul
        [ listStyle Css.none
        , padding (px 0)
        ]


styledTextBox : List (Attribute msg) -> List (Html msg) -> Html msg
styledTextBox =
    styled
        div
        [ color (hex "#000")
        , fontFamily monospace
        , border (px 0)
        , borderRadius (px 4)
        , paddingTop (px 12)
        , paddingBottom (px 12)
        , display inlineBlock
        ]


actionContainer : List (Attribute msg) -> List (Html msg) -> Html msg
actionContainer =
    styled
        div
        [ padding (px 12)
        , width (pct 100)
        ]


wrongWordStyle : Style
wrongWordStyle =
    color (hex "#f07178")


correctWordStyle : Style
correctWordStyle =
    color (hex "#13CA91")


todoWordStyle : Style
todoWordStyle =
    color (hex "#787878")


currentWordStyle : Style
currentWordStyle =
    textDecoration underline


wordStyle : WordStatus -> Style
wordStyle w =
    case w of
        Correct ->
            correctWordStyle

        Wrong ->
            wrongWordStyle

        Todo ->
            todoWordStyle

        CurrentWord ->
            currentWordStyle