module Content.Icon exposing
  ( empty, fontAwesome, material, ionicons, openIconic, container )

{-| Constructors for icon font character content

# Constructors
@docs empty, fontAwesome, material, ionicons, openIconic

# Rendering
@docs container

-}


import Dom
import Dom.Node
import Dom.Property
import Dom.Attribute
import Dom.Element
import Content


{-| Construct empty icon content as a placeholder

    Content.Icon.empty
      |> Content.Icon.container "span"
      |> Dom.Element.toNode

    --> <span></span>

-}
empty : Content.Icon msg
empty =
  []
    |> Content.Icon


{-| Construct an icon from the [Font Awesome](http://fontawesome.io/)
collection, licensed under
[SIL OFL 1.1](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)

    "bicycle"
      |> Content.Icon.fontAwesome
      |> Content.Icon.container "span"
      |> Dom.Element.toNode

    --> <span>
    --    <i class="fa fa-bicycle"></i>
    --  </span>

-}
fontAwesome : String -> Content.Icon msg
fontAwesome name =
  [ [ "className"
      |> Dom.Property.string ("fa fa-" ++ name)
    ]
      |> Dom.Node.leaf "i"
  ]
    |> Content.Icon


{-| Construct an icon from Google's
[Material Design](https://material.io/icons/) collection, licensed under
[Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt)

    "directions_bike"
      |> Content.Icon.material
      |> Content.Icon.container "span"
      |> Dom.Element.toNode

    --> <span>
    --    <i class="material-icons">directions_bike</i>
    --  </span>

-}
material : String -> Content.Icon msg
material name =
  [ name
    |> Dom.Node.textWrapper "i"
      [ "className"
        |> Dom.Property.string "material-icons"
      ]
  ]
    |> Content.Icon


{-| Construct an icon from the [Ionicons](http://ionicons.com/) collection,
licensed under [MIT](https://opensource.org/licenses/MIT)

    "android-bicycle"
      |> Content.Icon.ionicons
      |> Content.Icon.container "span"
      |> Dom.Element.toNode

    --> <span>
    --    <i class="icon ion-android-bicycle"></i>
    --  </span>

-}
ionicons : String -> Content.Icon msg
ionicons name =
  [ [ "className"
      |> Dom.Property.string ("icon ion-" ++ name)
    ]
      |> Dom.Node.leaf "i"
  ]
    |> Content.Icon


{-| Construct an icon from the [Open Iconic](http://useiconic.com/open)
collection, licensed under [MIT](https://opensource.org/licenses/MIT)

    "bug"
      |> Content.Icon.openIconic
      |> Content.Icon.container "p"
      |> Dom.Element.toNode

    --> <p>
    --    <span class="oi" data-glyph="bug"></span>
    --  </p>

-}
openIconic : String -> Content.Icon msg
openIconic name =
  [ [ "className"
      |> Dom.Property.string "oi"
    , "data-glyph"
      |> Dom.Attribute.string name
    ]
      |> Dom.Node.leaf "span"
  ]
    |> Content.Icon


{-| Place icon content in a `Dom.Element` container, with the HTML tag given
in the first argument
-}
container : String -> Content.Icon msg -> Dom.Element msg
container htmlTag iconContent =
  { tag = htmlTag
  , attributes = []
  , classes = []
  , children =
    ( case iconContent of
        Content.Icon nodeList ->
          nodeList
    )
  , text = ""
  , namespace = ""
  , keys = []
  }