   (:refer-clojure :exclude [chars])
   (:require [om.core :as om :include-macros true]
             [om.dom :as dom :include-macros true]
+            [sablono.core :as html :refer-macros [html]]
             [clojure.string :as string]))
 
 (defn- hidden [^boolean bool]


(defn- word-index [index owner]
  (om/component
    (dom/span #js {:className "word-index"} (om/value index))))

(defn- word-count [count owner]
  (om/component
    (dom/span #js {:className "word-count"} (om/value count))))

(defn- word [the-word owner]
  (om/component
    (dom/span #js {:className "word"} (om/value the-word))))

(defn- item [the-item owner]
  (om/component
    (dom/li #js {:style (hidden (:hidden the-item))}
      (om/build word-index (:index the-item))
      (dom/span #js {:className "word-index-sep"} " ")
      (om/build word (:word the-item))
      (dom/span #js {:className "word-count-sep"} " ")
      (om/build word-count (:count the-item)))))

(defn- stripe [text bgc]
  (let [st #js {:backgroundColor bgc}]
    (dom/li #js {:style st} text)))

(defn- change [e owner]
  (om/set-state! owner :text (.. e -target -value)))

    om/IRenderState
    (render-state [_ {:keys [text]}]
      (let [words (:words data)]
        (html
         [:div
          [:h2 {:class "typeahead"} "Search"]
          [:input {:type "text"
                   :ref "text-field"
                   :value text
                   :class "search"
                   :on-change #(change % owner)}]
          [:ul (om/build-all item words
                             {:fn (fn [x]
                                    (if-not (string/blank? text)
                                      (cond-> x
                                        (not (zero? (.indexOf (:word x) text)))
                                        (assoc :hidden true))
                                      x))})]])))))
