update-fb-note

(ns your-app.app
  (:require
   [matchbox.core :as m]
   [rum.core :as rum]))

(enable-console-print!)

(def root (m/connect "https://student-realestate.firebaseio.com"))
(m/auth-anon root)

;; real time listen-to listen-children
(m/listen-children
  root [:users :mike :friends]
  (fn [[event-type data]] (println data)))

(def mikes-friends (m/get-in root [:users :mike :friends]))

;; write data
(m/reset! mikes-friends [{:name "Kid A"} {:name "Kid B"}])
(m/conj! mikes-friends {:name "Jean"})

;; read data
;; @ == deref
(m/deref
  mikes-friends
  (fn [k]
      (println k)))


(rum/defc form []
          [:div {:class "mdl-layout mdl-js-layout mdl-color--grey-100"} "\t"
           [:main {:class "mdl-layout__content"} "\t\t"
            [:div {:class "mdl-card mdl-shadow--6dp"} "\t\t\t"
             [:div {:class "mdl-card__title mdl-color--primary mdl-color-text--white"} "\t\t\t\t"
              [:h2 {:class "mdl-card__title-text"} "Something else Co."] "\t\t\t"] "\t  \t"
             [:div {:class "mdl-card__supporting-text"} "\t\t\t\t"
              [:form {:action "#"} "\t\t\t\t\t"
               [:div {:class "mdl-textfield mdl-js-textfield"} "\t\t\t\t\t\t"
                [:input {:class "mdl-textfield__input", :type "text", :id "username"}] "\t\t\t\t\t\t"
                [:label {:class "mdl-textfield__label", :for "username"} "Username"] "\t\t\t\t\t"] "\t\t\t\t\t"
               [:div {:class "mdl-textfield mdl-js-textfield"} "\t\t\t\t\t\t"
                [:input {:class "mdl-textfield__input", :type "password", :id "userpass"}] "\t\t\t\t\t\t"
                [:label {:class "mdl-textfield__label", :for "userpass"} "Password"] "\t\t\t\t\t"] "\t\t\t\t"] "\t\t\t"] "\t\t\t"
             [:div {:class "mdl-card__actions mdl-card--border"} "\t\t\t\t"
              [:button {:class "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"} "Log in"] "\t\t\t"] "\t\t"] "\t"]])

(rum/defc label [text]
          [:div {:class "mdl-layout mdl-js-layout mdl-layout--fixed-header"}
           [:div {:class "android-header mdl-layout__header mdl-layout__header--waterfall"}
            [:div {:class "mdl-layout__header-row"}
             [:span {:class "android-title mdl-layout-title"}
              [:img {:class "android-logo-image", :src "images/android-logo.png"}]]
             [:div {:class "android-header-spacer mdl-layout-spacer"}]
             [:div {:class "android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width"}
              [:label {:class "mdl-button mdl-js-button mdl-button--icon", :for "search-field"}
               [:i {:class "material-icons"} "search"]]
              [:div {:class "mdl-textfield__expandable-holder"}
               [:input {:class "mdl-textfield__input", :type "text", :id "search-field"}]]]
             [:div {:class "android-navigation-container"}
              [:nav {:class "android-navigation mdl-navigation"}
               [:a {:class "mdl-navigation__link mdl-typography--text-uppercase"} "Tablets"]
               [:a {:class "mdl-navigation__link mdl-typography--text-uppercase"} "Wear"]
               [:a {:class "mdl-navigation__link mdl-typography--text-uppercase"} "TV"]
               [:a {:class "mdl-navigation__link mdl-typography--text-uppercase"} "Auto"]
               [:a {:class "mdl-navigation__link mdl-typography--text-uppercase"} "One"]
               [:a {:class "mdl-navigation__link mdl-typography--text-uppercase"} "Play"]]]
             [:span {:class "android-mobile-title mdl-layout-title"}
              [:img {:class "android-logo-image", :src "images/android-logo.png"}]]
             [:button {:class "android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect", :id "more-button"}
              [:i {:class "material-icons"} "more_vert"]]
             [:ul {:class "mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect", :for "more-button"}
              [:li {:class "mdl-menu__item"} "5.0 Lollipop"]
              [:li {:class "mdl-menu__item"} "4.4 KitKat"]
              [:li {:disabled true :class "mdl-menu__item"} "4.3 Jelly Bean"]
              [:li {:class "mdl-menu__item"} "Android History"]]]]
           [:div {:class "android-drawer mdl-layout__drawer"}
            [:span {:class "mdl-layout-title"}
             [:img {:class "android-logo-image", :src "images/android-logo-white.png"}]]
            [:nav {:class "mdl-navigation"}
             [:a {:class "mdl-navigation__link"} "Phones"]
             [:a {:class "mdl-navigation__link"} "Tablets"]
             [:a {:class "mdl-navigation__link"} "Wear"]
             [:a {:class "mdl-navigation__link"} "TV"]
             [:a {:class "mdl-navigation__link"} "Auto"]
             [:a {:class "mdl-navigation__link"} "One"]
             [:a {:class "mdl-navigation__link"} "Play"]
             [:div {:class "android-drawer-separator"}]
             [:span {:class "mdl-navigation__link"} "Versions"]
             [:a {:class "mdl-navigation__link"} "Lollipop 5.0"]
             [:a {:class "mdl-navigation__link"} "KitKat 4.4"]
             [:a {:class "mdl-navigation__link"} "Jelly Bean 4.3"]
             [:a {:class "mdl-navigation__link"} "Android history"]
             [:div {:class "android-drawer-separator"}]
             [:span {:class "mdl-navigation__link"} "Resources"]
             [:a {:class "mdl-navigation__link"} "Official blog"]
             [:a {:class "mdl-navigation__link"} "Android on Google+"]
             [:a {:class "mdl-navigation__link"} "Android on Twitter"]
             [:div {:class "android-drawer-separator"}]
             [:span {:class "mdl-navigation__link"} "For developers"]
             [:a {:class "mdl-navigation__link"} "App developer resources"]
             [:a {:class "mdl-navigation__link"} "Android Open Source Project"]
             [:a {:class "mdl-navigation__link"} "Android SDK"]]]
           [:div {:class "android-content mdl-layout__content"}
            [:a {:name "top"}]
            [:div {:class "android-be-together-section mdl-typography--text-center"}
             [:div {:class "logo-font android-slogan"} "be together. not the same."]
             [:div {:class "logo-font android-sub-slogan"} "welcome to android... be yourself. do your thing. see what's going on."]
             [:div {:class "logo-font android-create-character"}
              [:a {}
               [:img {:src "images/andy.png"}] " create your android character"]]
             [:a {:id "screens"}
              [:button {:class "android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect"}
               [:i {:class "material-icons"} "expand_more"]]]]
            [:div {:class "android-screen-section mdl-typography--text-center"}
             [:a {:name "screens"}]
             [:div {:class "mdl-typography--display-1-color-contrast"} "Powering screens of all sizes"]
             [:div {:class "android-screens"}
              [:div {:class "android-wear android-screen"}
               [:a {:class "android-image-link"}
                [:img {:class "android-screen-image", :src "images/wear-silver-on.png"}]
                [:img {:class "android-screen-image", :src "images/wear-black-on.png"}]]
               [:a {:class "android-link mdl-typography--font-regular mdl-typography--text-uppercase"} "Android Wear"]]
              [:div {:class "android-phone android-screen"}
               [:a {:class "android-image-link"}
                [:img {:class "android-screen-image", :src "images/nexus6-on.jpg"}]]
               [:a {:class "android-link mdl-typography--font-regular mdl-typography--text-uppercase"} "Phones"]]
              [:div {:class "android-tablet android-screen"}
               [:a {:class "android-image-link"}
                [:img {:class "android-screen-image", :src "images/nexus9-on.jpg"}]]
               [:a {:class "android-link mdl-typography--font-regular mdl-typography--text-uppercase"} "Tablets"]]
              [:div {:class "android-tv android-screen"}
               [:a {:class "android-image-link"}
                [:img {:class "android-screen-image", :src "images/tv-on.jpg"}]]
               [:a {:class "android-link mdl-typography--font-regular mdl-typography--text-uppercase"} "Android TV"]]
              [:div {:class "android-auto android-screen"}
               [:a {:class "android-image-link"}
                [:img {:class "android-screen-image", :src "images/auto-on.jpg"}]]
               [:a {:class "android-link mdl-typography--font-regular mdl-typography--text-uppercase mdl-typography--text-left"} "Coming Soon: Android Auto"]]]]
            [:div {:class "android-wear-section"}
             [:div {:class "android-wear-band"}
              [:div {:class "android-wear-band-text"}
               [:div {:class "mdl-typography--display-2 mdl-typography--font-thin"} "The best of Google built in"]
               [:p {:class "mdl-typography--headline mdl-typography--font-thin"} "Android works perfectly with your favourite apps like Google Maps,\n                Calendar and YouTube."]
               [:p
                [:a {:class "mdl-typography--font-regular mdl-typography--text-uppercase android-alt-link"} "See what's new in the Play Store "
                 [:i {:class "material-icons"} "chevron_right"]]]]]]
            [:div {:class "android-customized-section"}
             [:div {:class "android-customized-section-text"}
              [:div {:class "mdl-typography--font-light mdl-typography--display-1-color-contrast"} "Customised by you, for you"]
              [:p {:class "mdl-typography--font-light"} "Put the stuff that you care about right on your home screen: the latest news, the weather or a stream of your recent photos."
               [:br]
               [:a {:class "android-link mdl-typography--font-light"} "Customise your phone"]]]
             [:div {:class "android-customized-section-image"}]]
            [:div {:class "android-more-section"}
             [:div {:class "android-section-title mdl-typography--display-1-color-contrast"} "More from Android"]
             [:div {:class "android-card-container mdl-grid"}
              [:div {:class "mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp"}
               [:div {:class "mdl-card__media"}
                [:img {:src "images/more-from-1.png"}]]
               [:div {:class "mdl-card__title"}
                [:h4 {:class "mdl-card__title-text"} "Get going on Android"]]
               [:div {:class "mdl-card__supporting-text"}
                [:span {:class "mdl-typography--font-light mdl-typography--subhead"} "Four tips to make your switch to Android quick and easy"]]
               [:div {:class "mdl-card__actions"}
                [:a {:class "android-link mdl-button mdl-js-button mdl-typography--text-uppercase"} "Make the switch"
                 [:i {:class "material-icons"} "chevron_right"]]]]
              [:div {:class "mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp"}
               [:div {:class "mdl-card__media"}
                [:img {:src "images/more-from-4.png"}]]
               [:div {:class "mdl-card__title"}
                [:h4 {:class "mdl-card__title-text"} "Create your own Android character"]]
               [:div {:class "mdl-card__supporting-text"}
                [:span {:class "mdl-typography--font-light mdl-typography--subhead"} "Turn the little green Android mascot into you, your friends, anyone!"]]
               [:div {:class "mdl-card__actions"}
                [:a {:class "android-link mdl-button mdl-js-button mdl-typography--text-uppercase"} "androidify.com"
                 [:i {:class "material-icons"} "chevron_right"]]]]
              [:div {:class "mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp"}
               [:div {:class "mdl-card__media"}
                [:img {:src "images/more-from-2.png"}]]
               [:div {:class "mdl-card__title"}
                [:h4 {:class "mdl-card__title-text"} "Get a clean customisable home screen"]]
               [:div {:class "mdl-card__supporting-text"}
                [:span {:class "mdl-typography--font-light mdl-typography--subhead"} "A clean, simple, customisable home screen that comes with the power of Google Now: Traffic alerts, weather and much more, just a swipe away."]]
               [:div {:class "mdl-card__actions"}
                [:a {:class "android-link mdl-button mdl-js-button mdl-typography--text-uppercase"} "Download now"
                 [:i {:class "material-icons"} "chevron_right"]]]]
              [:div {:class "mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp"}
               [:div {:class "mdl-card__media"}
                [:img {:src "images/more-from-3.png"}]]
               [:div {:class "mdl-card__title"}
                [:h4 {:class "mdl-card__title-text"} "Millions to choose from"]]
               [:div {:class "mdl-card__supporting-text"}
                [:span {:class "mdl-typography--font-light mdl-typography--subhead"} "Hail a taxi, find a recipe, run through a temple – Google Play has all the apps and games that let you make your Android device uniquely yours."]]
               [:div {:class "mdl-card__actions"}
                [:a {:class "android-link mdl-button mdl-js-button mdl-typography--text-uppercase"} "Find apps"
                 [:i {:class "material-icons"} "chevron_right"]]]]]]
            [:footer {:class "android-footer mdl-mega-footer"}
             [:div {:class "mdl-mega-footer--top-section"}
              [:div {:class "mdl-mega-footer--left-section"}
               [:button {:class "mdl-mega-footer--social-btn"}]
               [:button {:class "mdl-mega-footer--social-btn"}]
               [:button {:class "mdl-mega-footer--social-btn"}]]
              [:div {:class "mdl-mega-footer--right-section"}
               [:a {:class "mdl-typography--font-light", :id "top"} "Back to Top"
                [:i {:class "material-icons"} "expand_less"]]]]
             [:div {:class "mdl-mega-footer--middle-section"}
              [:p {:class "mdl-typography--font-light"} "Satellite imagery: © 2014 Astrium, DigitalGlobe"]
              [:p {:class "mdl-typography--font-light"} "Some features and devices may not be available in all areas"]]
             [:div {:class "mdl-mega-footer--bottom-section"}
              [:a {:class "android-link android-link-menu mdl-typography--font-light", :id "version-dropdown"}
               [:i {:class "material-icons"} "arrow_drop_up"]]
              [:ul {:class "mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect", :for "version-dropdown"}
               [:li {:class "mdl-menu__item"} "5.0 Lollipop"]
               [:li {:class "mdl-menu__item"} "4.4 KitKat"]
               [:li {:class "mdl-menu__item"} "4.3 Jelly Bean"]
               [:li {:class "mdl-menu__item"} "Android History"]]
              [:a {:class "android-link android-link-menu mdl-typography--font-light", :id "developers-dropdown"} "For Developers"
               [:i {:class "material-icons"} "arrow_drop_up"]]
              [:ul {:class "mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect", :for "developers-dropdown"}
               [:li {:class "mdl-menu__item"} "App developer resources"]
               [:li {:class "mdl-menu__item"} "Android Open Source Project"]
               [:li {:class "mdl-menu__item"} "Android SDK"]
               [:li {:class "mdl-menu__item"} "Android for Work"]]
              [:a {:class "android-link mdl-typography--font-light"} "Blog"]
              [:a {:class "android-link mdl-typography--font-light"} "Privacy Policy"]]]]])

[{:property-type "Duplex, 2 Units"}]

(def key-details-translation
  {:property-type {:en "Property type"
                   :vi "Loai bat dong san"}
   :style         {:en "Style"
                   :vi "Loai bat dong san"}})

(def current-lang :en)

(rum/defc test2 []
          [:div.block
           [:div.text
            {:style {:font-weight "bold"}}
            "Bold text"]
           [:ul
            [:li "list 1"]
            [:li "list 2"]]])

  ;; atom la gi
  ;; vi sao la atom
  ;; lam viec atom nhu the nao
;; state > thay doi
;; a: a  1 -> 0 , a = 1, a= 2, function access a, ref a
;; atom : @atom
;; (swap! atom (function)) swap! atom fn
;;  reset! atom value


;; style

(rum/defcs stateful < (rum/local false ::show-details)
  [state label]
  (let [show-details? (::show-details state)]
    [:div {:on-click (fn [_]
                       (reset! show-details? (not @show-details?))) }
     (if @show-details? "Hide details" "Show details")]))

(rum/defcs property-details < (rum/local false ::show-hide)
           [state property]
           (let [show-hide? (::show-hide state)]
             [:div.project-details.mdl-layout.mdl-grid
              ;; TODO: 2 , chia 2, 4 tro len > doc tren mobile
              [:div.block.mdl-cell--4-col-phone
               {:style {:background-color "red"}}]
              [:div.block.mdl-cell--4-col-phone
                [:h6
                 {:style {:text-transform "uppercase"}}
                 "Key details"]
              ;  [:div.main
              ;   [:h6.header
              ;    "31 days on redfin"
               ;
              ;    [:table {:class "mdl-data-table mdl-js-data-table mdl-data-table--selectable"}
              ;     [:tbody
              ;      (let [data (:property/details property)]
              ;        (let [xs (seq data)] ;; > ([:k v] [:k1 v1])
              ;          (map
              ;           (fn [[k v]] ;; [:k v]
              ;             [:tr [:td {:class "mdl-data-table__cell--non-numeric"}
              ;                   (get-in key-details-translation [k current-lang])]
              ;              [:td v]])
              ;           xs)))]]
                  ;; toggle
                ;  [:div {:on-click (fn [_] (reset! show-hide? (not @show-hide?)))}
                ;   (if @show-hide?
                ;     [:button {:id "demo-show-snackbar", :class "mdl-button mdl-js-button mdl-button--raised", :type "button"} "Hide"]
                ;     [:button {:id "demo-show-snackbar", :class "mdl-button mdl-js-button mdl-button--raised", :type "button"} "Show"])]

                    ;; Card
                    [:div {:class "demo-card-wide mdl-card mdl-shadow--2dp"}
                     [:div
                      [:h7 {:class "mdl-card__supporting-text"} "31 days on redfin"]]
                                      [:table {:class "mdl-data-table mdl-js-data-table "}
                                       [:tbody
                                        (let [data (:property/details property)]
                                          (let [xs (seq data)] ;; > ([:k v] [:k1 v1])
                                            (map
                                             (fn [[k v]] ;; [:k v]
                                               [:tr [:td {:class "mdl-data-table__cell--non-numeric"}
                                                     (get-in key-details-translation [k current-lang])]
                                                [:td v]])
                                             xs)))]]
                     [:div {:class "mdl-card__actions mdl-card--border" :on-click (fn [_] (reset! show-hide? (not @show-hide?)))}

                      (when @show-hide?

                         (let [info_detail [{:name "bedroom uper" :detail ["acd" "dfasfd"]} {:name "2 bath upper" :detail ["bbb"]}]]
                           (map
                            (fn [{:keys [name detail] :as x}]
                              [:ul {:class "mdl-data-table__cell--non-numeric"} name (for [y detail] [:li {:class "mdl-data-table__cell--non-numeric"} y])])
                            info_detail)))
                            (if @show-hide?
                             [:a {:class "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"} "Hide"]
                             [:a {:class "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"} "Show"])]
                     ]]]))

;; c (a ,b ) lifecycle
;; enter, rerender, unmount
;; init << goi fb lay data > assign local state

;; firebase , lay data
;; save len fb


;; properties
(def input {:land      123456
            :additions 321
            :total     32153
            :tax       453534})

(def property-tax-fb (m/get-in root [:projects :property-tax]))

;; write data
(m/reset! property-tax-fb input)
(m/deref
  property-tax-fb
  (fn [v]
      (println v)
      #_(assoc s :local-props v)
      ))

(def current-lang :en)

(def translation {:en {:land      "Land"
                       :additions "Additions"
                       :total     "Total"
                       :tax       "Tax"}
                  :vi {:land "Dat"}})


;; redfin , details page
;; details > load toan bo data project
;; project-details (property-tax data))
(def deepstream-mixin
  {:will-mount             (fn [s]
(do
  ;; doc data ve
  ;; listen-children, > data thay doi > update local data
  ;; :should-update > update len firebase
     (m/deref
       property-tax-fb
       (fn [v]
           (println "abc")
           #_(assoc s :local-props v)
           ))
     )
                         )})

(rum/defcs property-tax < rum/static
                          (rum/local false ::show-details)
                          (rum/local {} :local-props)
           deepstream-mixin
  [state props]
  (let [x props]
       #_(js/console.log @(:local-props state))
    [:div.project-details.mdl-layout.mdl-grid
     [:div.block.mdl-cell--4-col-phone
      [:h6
       {:style {:text-transform "uppercase"}}
       "Property Tax"]

      ;; <div class="main">
      ;; div.main
      ;; .main
      [:.main
       [:table {:class "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"}
        [:thead
         [:tr
          [:th {:class "mdl-data-table__cell--non-numeric"}]
          [:th "Taxable Value"]]]

        [:tbody
         (map (fn [item]
                (let [[label v] item]
                  [:tr
                   [:td {:class "mdl-data-table__cell--non-numeric"}
                    (get-in translation [current-lang label])
                    #_(label translation)]
                   [:td v]
                   ])) x)]]]]]))


(defn init []
  (rum/mount (property-tax input)
             (. js/document (getElementById "container"))))

#_(rum/mount (property-details
            {:property/details {:property-type "Duplex, 2 Units"
                                :style         "Traditional"}})
           (. js/document (getElementById "container")))