module Layout.Flex exposing
  ( Wrap(..)
  , Basis(..)
  , alignContent
  , alignItems
  , justifyContent
  , wrap
  , alignSelf
  , flex
  , basis
  , grow
  , shrink
  , order
  , column
  , columnReverse
  , row
  , rowReverse
  )

{-| Functions for creating flexible box layouts.

# Options

## Containers

@docs Wrap
@docs alignContent
@docs alignItems
@docs justifyContent
@docs wrap

## Items

@docs Basis
@docs alignSelf
@docs flex
@docs basis
@docs grow
@docs shrink
@docs order

# Nodes

@docs column
@docs columnReverse
@docs row
@docs rowReverse

-}

import Html exposing (..)
import Html.Attributes exposing (..)

import Layout.Common exposing (..)

-- OPTIONS ---------------------------------------

{-| Specifies the wrapping of the items in a container. -}
type Wrap
  = Forward
  | Reverse

{-| Specifies the size of an item before remaining space is distributed. -}
type Basis
  = Auto
  | Size String

{-| Specifies the alignment of the lines of items in a container along the cross axis. -}
alignContent : Align -> Rule
alignContent option = case option of
  Start -> Just ("align-content", "flex-start")
  Center -> Just ("align-content", "center")
  End -> Just ("align-content", "flex-end")
  Around -> Just ("align-content", "space-evenly")
  Between -> Just ("align-content", "space-between")
  Stretch -> Nothing

{-| Specifies the alignment of the items in a container along the cross axis. -}
alignItems : Align -> Rule
alignItems option = case option of
  Start -> Just ("align-items", "flex-start")
  Center -> Just ("align-items", "center")
  End -> Just ("align-items", "flex-end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("align-items", "stretch")

{-| Specifies the alignment of the items in a container along the main axis. -}
justifyContent : Align -> Rule
justifyContent option = case option of
  Start -> Just ("justify-content", "flex-start")
  Center -> Just ("justify-content", "center")
  End -> Just ("justify-content", "flex-end")
  Around -> Just ("justify-content", "space-evenly")
  Between -> Just ("justify-content", "space-between")
  Stretch -> Nothing

{-| Specifies the wrapping of the items in a container. -}
wrap : Maybe Wrap -> Rule
wrap option = case option of
  Just Forward -> Just ("flex-wrap", "wrap")
  Just Reverse -> Just ("flex-wrap", "wrap-reverse")
  Nothing -> Just ("flex-wrap", "nowrap")

{-| Specifies the alignment of an item in a container along the cross axis.  -}
alignSelf : Align -> Rule
alignSelf option = case option of
  Start -> Just ("align-self", "flex-start")
  Center -> Just ("align-self", "center")
  End -> Just ("align-self", "flex-end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("align-self", "stretch")

{-| Shorthand for the combination of `grow`, `shrink`, and `basis`. -}
flex : Int -> Float -> String -> Rule
flex grow shrink basis = Just ("flex", (toString grow) ++ " " ++ (toString shrink) ++ " " ++ basis)

{-| Specifies the proportion of available space an item in a container should grow into. -}
grow : Int -> Rule
grow option = Just ("flex-grow", toString option)

{-| Specifies the proportion of missing space an item in a container should shrink into. -}
shrink : Float -> Rule
shrink option = Just ("flex-shrink", toString option)

{-| Specifies the proportion of total space an item in a container should initially occupy. -}
basis : String -> Rule
basis option = Just ("flex-basis", option)

{-| Specifies the relative order an item in a container should appear in. -}
order : Int -> Rule
order option = Just ("order", toString option)

-- NODES -----------------------------------------

element : String -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
element direction options attributes children =
  let styles = ("display", "flex") :: (("flex-direction", direction) :: (List.filterMap identity options))
  in div ((style styles) :: attributes) children

{-| Returns a `div` node which is styled as a flexible box with a column layout. -}
column : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
column = element "column"

{-| Returns a `div` node which is styled as a flexible box with a reverse column layout. -}
columnReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
columnReverse = element "column-reverse"

{-| Returns a `div` node which is styled as a flexible box with a row layout. -}
row : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
row = element "row"

{-| Returns a `div` node which is styled as a flexible box with a reverse row layout. -}
rowReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
rowReverse = element "row-reverse"