module Content.Graphic exposing
  ( empty, png, svg, glyph
  , container
  )

{-| Contructors for graphic content (e.g., a brand logo) that may be stored
as a raster image, a vector graphics file, or a font icon

# Constructors
@docs empty, png, svg, glyph

# Rendering
@docs container

-}

import Dom
import Content exposing (Graphic(..))
import Content.Media
import Content.Source
import Content.Icon


{-| Construct empty graphic content as a placeholder

    Content.Graphic.empty
      |> Content.Graphic.container "figure"
      |> Dom.Element.toNode

    --> <figure></figure>

-}
empty : Content.Graphic msg
empty =
  Content.Media.empty
    |> Png


{-| Construct PNG graphic content, with alt text

    ( "logo.png"
    , "Company Logo"
    )
      |> Content.Graphic.png
      |> Content.Graphic.container "div"
      |> Dom.Element.toNode

    --> <div>
    --    <img src="logo.png" alt="Company Logo">
    --  </div>

-}
png : (String, String) -> Content.Graphic msg
png (path, alt) =
  (path, alt)
    |> Content.Media.image
    |> Png


{-| Construct SVG graphic content, with a raster image fallback and alt text

    ( "logo.svg"
    , "logo.png"
    , "Company Logo"
    )
      |> Content.Graphic.svg
      |> Content.Graphic.container "div"
      |> Dom.Element.toNode

    --> <div>
    --    <object data="logo.svg" type="image/svg+xml">
    --      <img src="logo.png" alt="Company Name">
    --    </object>
    --  </div>

-}
svg : (String, String, String) -> Content.Graphic msg
svg (path, fallback, alt) =
  ( case (fallback, alt) of
    ("", "") ->
      Content.Media.empty

    (_, _) ->
      (fallback, alt)
        |> Content.Media.image
  )
    |> (,) path
    |> Content.Source.svg
    |> Svg


{-| Construct font-icon graphic content

    "android"
      |> Content.Icon.material
      |> Content.Graphic.glyph
      |> Content.Graphic.container "div"
      |> Dom.Element.toNode

    --> <div>
    --    <i class="material-icons">android</i>
    --  </div>

-}
glyph : Content.Icon msg -> Content.Graphic msg
glyph =
  Glyph


{-| Place graphic content in a `Dom.Element` container, with the HTML tag given
in the first argument
-}
container : String -> Content.Graphic msg -> Dom.Element msg
container htmlTag graphic =
  case graphic of
    Png media ->
      media
        |> Content.Media.container htmlTag

    Svg source ->
      source
        |> Content.Source.container htmlTag

    Glyph icon ->
      icon
        |> Content.Icon.container htmlTag