gem 'clearwater', '~> 1.0.0.rc2'
gem 'opal-rails' # Only needed for Rails apps

class Blog
  # All components need a set of behavior, but don't worry it's not a massive list.
  include Clearwater::Component

  # This method needs to return a virtual-DOM element using the element DSL.
  # The DSL is provided by the Clearwater::Component mixin.
  def render
    div([
      Articles.new,
      Biography.new,
    ])
  end
end

# <div id="foo">
#   <h1>Heading</h1>
#   <article>hello!</article>
# </div>
def render
  div({ id: 'foo' }, [
    h1('Heading'),
    article('hello!'),
  ])
end

# <div>Hello, world!</div>
def render
  div('Hello, world!')
end

# <div>123</div>
def render
  div(123)
end

# <div></div>
def render
  div
end

router = Clearwater::Router.new do
  # A route with a block contains subordinate routes
  route 'blog' => Blog.new do # /blog
    route 'new_article' => NewArticle.new # /blog/new_article

    # This path contains a dynamic segment. Inside this component, you can use
    # router.params[:article_id] to return the value for this segment of the
    # URL. So for "/articles/123", router.params[:article_id] would be "123".
    route ':article_id' => ArticleReader.new # /blog/123
  end
end

# file: app/assets/javascripts/application.rb
require 'opal' # Not necessary if you load Opal from a CDN
require 'clearwater'

class Layout
  include Clearwater::Component

  def render
    h1('Hello, world!')
  end
end

app = Clearwater::Application.new(component: Layout.new)
app.call

require 'opal'
require 'clearwater'
require 'ostruct'

class Layout
  include Clearwater::Component

  def render
    div({ id: 'app' }, [
      header({ class_name: 'main-header' }, [
        h1('Hello, world!'),
      ]),
      outlet, # This is what renders subordinate routes
    ])
  end
end

class Articles
  include Clearwater::Component

  def render
    div({ id: 'articles-container '}, [
      input({ class_name: 'search-articles', onkeyup: method(:search) }),
      ul({ id: 'articles-index' }, articles.map { |article|
        ArticlesListItem.new(article)
      }),
      outlet, # This is what renders subordinate routes (e.g. Article)
    ])
  end

  def articles
    @articles ||= MyStore.fetch_articles

    if @query
      @articles.select { |article| article.match?(@query) }
    else
      @articles
    end
  end

  def search(event)
    @query = event.target.value
    call # Rerender the app
  end
end

class ArticlesListItem
  include Clearwater::Component

  attr_reader :article

  def initialize(article)
    @article = article
  end

  def render
    # Note the "key" key in this hash. This is a hint to the virtual DOM that
    # if this node is moved around, it can still reuse the same element.
    li({ key: article.id, class_name: 'article' }, [
      # The Link component will rerender the app for the new URL on click
      Link.new({ href: "/articles/#{article.id}" }, article.title),
      time({ class_name: 'timestamp' }, article.timestamp.strftime('%m/%d/%Y')),
    ])
  end
end

class Article
  include Clearwater::Component

  def render
    # In addition to using HTML5 tag names as methods, you can use the `tag`
    # method with a query selector to generate a tag with those attributes.
    tag('article.selected-article', nil, [
      h1({ class_name: 'article-title' }, article.title),
      time({ class_name: 'article-timestamp' }, article.timestamp.strftime('%m-%d-%Y')),
      section({ class_name: 'article-body' }, article.body),
    ])
  end

  def article
    # params[:article_id] is the section of the URL that contains what would be
    # the `:article_id` parameter in the router below.
    MyStore.article(params[:article_id])
  end

  def match? query
    query.split.all? { |token|
      title.include?(token) || body.include?(token)
    }
  end
end

module MyStore
  extend self
  DB = 5.times.map do |n|
    OpenStruct.new(id: n, timestamp: Time.new, title: "Random thoughts n.#{n}", body: 'Some deep stuff')
  end

  def fetch_articles
    DB
  end

  def article(id)
    id = id.to_i
    DB.find {|a| a.id == id}
  end
end

router = Clearwater::Router.new do
  route 'articles' => Articles.new do
    route ':article_id' => Article.new
  end
end

MyApp = Clearwater::Application.new(
  component: Layout.new,
  router: router,
  element: Bowser.document.body # This is the default target element
)

MyApp.call # Render the app.