module Content.Media exposing
  ( empty
  , image, video, audio
  , container
  )

{-| Constructors for basic media content (image, video, audio)

# Constructors
@docs empty, image, video, audio

# Rendering
@docs container

-}

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


{-| Construct empty media content as a placeholder

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

    --> <figure></figure>

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


{-| Construct image content

    ( "mountain.jpg"
    , "A photograph of a mountain"
    )
      |> Content.Media.image
      |> Content.Media.container "figure"
      |> Dom.Element.toNode

    --> <figure>
    --    <img src="mountain.jpg" alt="A photograph of a mountain">
    --  </figure>

-}
image : (String, String) -> Content.Media msg
image (path, altText) =
  [ [ "src"
      |> Dom.Property.string path
    , "alt"
      |> Dom.Property.string altText
    ]
      |> Dom.Node.leaf "img"
  ]
    |> Content.Media


{-| Construct video content

    [ ("movie.mp4", "video/mp4")
    , ("movie.ogg", "video/ogg")
    ]
      |> Content.Media.video
      |> Content.Media.container "div"
      |> Dom.Element.toNode


    --> <div>
    --    <video controls>
    --      <source src="movie.mp4" type="video/mp4">
    --      <source src="movie.ogg" type="video/ogg">
    --      <p>Video file 'movie.mp4' cannot be loaded. Verify that your browser
    --      is up to date and can play 'video/mp4' files.</p>
    --      <p>Video file 'movie.ogg' cannot be loaded. Verify that your browser
    --      is up to date and can play 'video/ogg' files.</p>
    --    </video>
    --  </div>

-}
video : List (String, String) -> Content.Media msg
video sourceList =
  let
    toSourceNode (path, filetype) =
      [ "src"
        |> Dom.Property.string path
      , "type"
        |> Dom.Property.string filetype
      ]
        |> Dom.Node.leaf "source"

    toErrorMessage (path, filetype) =
      ( "Video file '"
        ++ path
        ++ "' cannot be loaded. "
        ++ "Verify that your browser is up to date and can play '"
        ++ filetype
        ++ "' files."
      )
        |> Dom.Node.textWrapper "p" []

  in
    [ [ sourceList
        |> List.map toSourceNode
      , sourceList
        |> List.map toErrorMessage
      ]
        |> List.concat
        |> Dom.Node.container "video"
          [ "controls"
            |> Dom.Property.bool True
          ]
    ]
      |> Content.Media


{-| Construct audio content

    [ ("horse.ogg", "audio/ogg")
    , ("horse.mp3", "audio/mpeg")
    ]
      |> Content.Media.audio
      |> Content.Media.container "div"
      |> Dom.Element.toNode


    --> <div>
    --    <audio controls>
    --      <source src="horse.ogg" type="audio/ogg">
    --      <source src="horse.mp3" type="audio/mpeg">
    --      <p>Audio file 'horse.ogg' cannot be loaded. Verify that your browser
    --      is up to date and can play 'audio/ogg' files.</p>
    --      <p>Audio file 'horse.mp3' cannot be loaded. Verify that your browser
    --      is up to date and can play 'audio/mpeg' files.</p>
    --    </audio>
    --  </div>

-}
audio : List (String, String) -> Content.Media msg
audio sourceList =
  let
    toSourceNode (path, filetype) =
      [ "src"
        |> Dom.Property.string path
      , "type"
        |> Dom.Property.string filetype
      ]
        |> Dom.Node.leaf "source"

    toErrorMessage (path, filetype) =
      ( "Audio file '"
        ++ path
        ++ "' cannot be loaded. "
        ++ "Verify that your browser is up to date and can play '"
        ++ filetype
        ++ "' files."
      )
        |> Dom.Node.textWrapper "p" []

  in
    [ [ sourceList
        |> List.map toSourceNode
      , sourceList
        |> List.map toErrorMessage
      ]
        |> List.concat
        |> Dom.Node.container "audio"
          [ "controls"
            |> Dom.Property.bool True
          ]
    ]
      |> Content.Media


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