module Flex exposing (..)

{-| Companion library to elm-html. Helps with flexbox layout

# Flex Types
@docs Direction, Alignment, WrapValue

# Flex Mixins
Mixins can be used alone or as a combinator to specify flex-related styles.
@docs display, flow, direction, wrap, alignItems, justifyContent, grow, shrink, basis, flex, order, alignSelf

-}

import Vendor
import Material.Options as Options exposing (css, many)


{-| The `Direction` type specifies all the direction values possible for the
`flexDirection` mixin.

  - Horizontal: Default value. The flexible items are displayed horizontally, as a row.
  - Vertical: The flexible items are displayed vertically, as a column.
  - HorizontalReverse: Same as `Horizontal`, but in reverse order.
  - verticalReverse: Same as `Vertical`, but in reverse order.
-}
type Direction
  = Horizontal
  | Vertical
  | HorizontalReverse
  | VerticalReverse


{-| The `Alignment` type specifies all the values possible for the `alignItems`
and `justifyConteent` mixins.

  - Start: Content is left-aligned.
  - Center: Content is center-aligned.
  - End: Content is right-aligned.
  - Stretch: Content-width is stretched to fill up the space.
  - Surround: Extra space is devided into equal spaces around the content.
-}
type Alignment
  = Start
  | Center
  | End
  | Stretch
  | Surround


{-| The `WrapValue` type specifies all the wrapping values possible for the
`wrap` mixin.

  - Wrap: Specifies that the flexible items will wrap if necessary.
  - NoWrap: Default value. Specifies that the flexible items will not wrap.
  - WrapReverse: Specifies that the flexible items will wrap, if necessary, in reverse order.
-}
type WrapValue
  = Wrap
  | NoWrap
  | WrapReverse


{-| Displays an element as an block-level flex container. -}
display : Options.Property c m
display =
  let displayValue =
        if Vendor.prefix == Vendor.Webkit
        then "-webkit-flex"
        else "flex"
  in
      css "display" displayValue


{-| The `flow` mixin specifies how much the item will grow relative to the rest
of the flexible items inside the same container.
-}
flow: Direction -> WrapValue -> Options.Property c m
flow directionValue wrapValue =
  many 
    [ direction directionValue
    , wrap wrapValue
    ]


{-| The `direction` mixin specifies the direction of the flexible items.
-}
direction : Direction -> Options.Property c m
direction directionValue =
  let (boxDirection, boxOrientation, value) =
        case directionValue of
          Horizontal ->
            ("normal", "horizontal", "row")

          Vertical ->
            ("normal", "vertical", "column")

          HorizontalReverse ->
            ("reverse", "horizontal", "row-reverse")

          VerticalReverse ->
            ("reverse", "vertical", "column-reverse")
  in
      [ css "-webkit-box-direction" boxDirection
      , css "-webkit-box-orient" boxOrientation
      , css "-webkit-flex-direction" value
      , css "-ms-flex-direction" value
      , css "flex-direction" value
      ] |> many


{-| The `wrap` mixin specifies whether the flexible items should wrap or not.
-}
wrap : WrapValue -> Options.Property c m
wrap wrapValue =
  let (vendorValue, value) =
     case wrapValue of
        Wrap ->
          ("wrap", "wrap")

        NoWrap ->
          ("none", "nowrap")

        WrapReverse ->
          ("wrap-reverse", "wrap-reverse")
  in
      [ css "-webkit-flex-wrap" value
      , css "-ms-flex-wrap" vendorValue
      , css "flex-wrap" value
      ] |> many



{-| The `alignItems` mixin specifies the default alignment for items inside
the flexible container.
-}
alignItems : Alignment -> Options.Property c m
alignItems alignment =
  let (vendorValue, value) =
        case alignment of
          Start ->
            ("start", "flex-start")

          Center ->
            ("center", "center")

          End ->
            ("end", "flex-end")

          Stretch ->
            ("stretch", "stretch")

          Surround ->
            ("baseline", "baseline")
  in
      [ css "-webkit-box-align" vendorValue
      , css "-webkit-align-items" value
      , css "-ms-flex-align" vendorValue
      , css "align-items" value
      ] |> many


{-| The `justifyContent` mixin aligns the flexible container's items when the
items do not use all available space on the main-axis.
-}
justifyContent : Alignment -> Options.Property c m
justifyContent alignment =
  let (webkitValue, msValue, value) =
        case alignment of
          Start ->
            ("start", "start", "flex-start")

          Center ->
            ("center", "center", "center")

          End ->
            ("end", "end", "flex-end")

          Stretch ->
            ("justify", "justify", "space-between")

          Surround ->
            ("none", "distribute", "space-around")
  in
      [ css "-webkit-box-pack" webkitValue
      , css "-webkit-justify-content" value
      , css "-ms-flex-pack" msValue
      , css "justify-content" value
      ] |> many


{-| The `grow` mixin specifies how much the item will grow relative to the rest
of the flexible items inside the same container.
-}
grow : Float -> Options.Property c m
grow growValue =
  let
      string =
        toString growValue
  in
      [ css"-webkit-box-flex" string
      , css "-webkit-flex-grow" string
      , css "-ms-flex-positive" string
      , css "flex-grow" string
      ] |> many


{-| The `shrink` mixin specifies how the item will shrink relative to the rest
of the flexible items inside the same container.
-}
shrink : Float -> Options.Property c m
shrink shrinkValue =
  let
      string =
        toString shrinkValue
  in
      [ css"-webkit-flex-shrink" string
      , css "-ms-flex-negative" string
      , css "flex-shrink" string
      ] |> many


{-| The `basis` mixin specifies the initial length of a flexible item.
-}
basis : String -> Options.Property c m
basis basisValue =
  [ css"-webkit-flex-basis" basisValue
  , css "-ms-flex-preferred-size" basisValue
  , css "flex-basis" basisValue
  ] |> many


{-| The `flex` mixin specifies the length of the item, relative to the rest of
the flexible items inside the same container.

It's a style shorthand for flexGrow, flexShrink and flexBasis
-}
flex : Float -> Float -> String -> Options.Property c m
flex grow shrink basis =
  let
      growString =
        toString grow

      shrinkString =
        toString shrink

      value =
        growString  ++ " " ++ shrinkString ++ " " ++ basis
  in
      [ css "-webkit-box-flex" growString
      , css "-webkit-flex" value
      , css "-ms-flex" value
      , css "flex" value
      ] |> many


{-| The `order` mixin specifies the order of a flexible item relative to the
rest of the flexible items inside the same container.
-}
order : Int -> Options.Property c m
order value =
  let string =
        toString value
  in
      [ css"-webkit-box-ordinal-group" string
      , css "-webkit-order" string
      , css "-ms-flex-order" string
      , css "-order" string
      ] |> many


{-| The `alignSelf` mixin specifies the alignment for the selected item inside
the flexible container.
-}
alignSelf : Alignment -> Options.Property c m
alignSelf alignment =
  let value =
        case alignment of
          Start ->
            "flex-start"

          Center ->
            "center"

          End ->
            "flex-end"

          Stretch ->
            "stretch"

          Surround ->
            "baseline"
  in
      [ css"-webkit-align-self" value
      , css "-ms-flex-item-align" value
      , css "align-self" value
      ] |> many