(page "index.html"
   (:require [cuerdas.core :as str]
             [hoplon.svg :as svg]
             [clojure.pprint :refer [cl-format]]))
 
 (defc state
   {:elapsed-time 0
    :total-time 300
    :date-range [1776 2076]
    :selected-date 1926
    :topics ["American History" "European History"]})
 
 (defn fraction-to-date [fraction start-date end-date]
   (.floor js/Math
           (+ start-date
              (* fraction
                 (- end-date
                    start-date)))))
 
 
 (defc= start-date (get-in state [:date-range 0]))
 (defc= end-date (get-in state [:date-range 1]))
 (defc= date-range (- end-date start-date))
 
 (defc hovering nil)
 (defc hovered-fraction 0)
 (defc= hovered-date
   (fraction-to-date hovered-fraction start-date end-date))
 (defc= hovered-date-as-fraction
   (/ (- hovered-date start-date)
      date-range))
 
 (defc= selected-date
   (:selected-date state)
   (partial swap! state assoc-in [:selected-date]))
 
 (defc= selected-fraction (/ (- selected-date
                                start-date)
                             date-range))
 
 (defc= topics
   (:topics state))
 
 (defc= elapsed-time
   (:elapsed-time state)
   (partial swap! state assoc-in [:elapsed-time]))
 
 ;;; Update total-time with the _difference_ between current and desired;
 (defc= total-time
   (:total-time state)
   (partial swap! state update-in [:total-time] +))
 
 (defc= remaining-time
   (- total-time elapsed-time))
 
 (defc= time-percentage
   (* 100 (/ elapsed-time total-time)))
 
 (defn num-to-time [num]
   (cl-format nil "~2d:~2,'0d" (quot num 60) (mod num 60)))
 
 (defelem time-display [_ _ _]
   (div (div :class "remaining-time" :style "display: inline-block; margin: 0 1em;"
             (cell= (str "Remaining Time: " (num-to-time remaining-time))))
        (div :class "elapsed-time" :style "display: inline-block; margin: 0 1em;"
             (cell= (str "Time Spent:" (num-to-time elapsed-time))))))
 
 (defelem progress-bar [_ _ _]
   (div {:style (cell= (str "background: hsl(" (- 117 (* 115 (/ time-percentage 100))) ", 75%, 50%); "
                            "height: 0.2em; position: fixed;top:0;left:0;width: "
                            (.floor js/Math (+ 1 (/ (* 99 time-percentage) 100))) "vw;"))}))
 
 (defmethod do! :viewBox
     [elem _ value]
     (if (= false value)
         (.removeAttribute elem "viewBox")
         (.setAttribute elem "viewBox" value)))
 
 (defmethod do! :preserveAspectRatio
     [elem _ value]
     (if (= false value)
         (.removeAttribute elem "preserveAspectRatio")
         (.setAttribute elem "preserveAspectRatio" value)))
 
 (definterval elapsed-update-interval-id 1000
   (swap! elapsed-time inc))
 
 (cell= (print "The state is:" state))
 
 (html
  (head
   (link :href "app.css" :rel "stylesheet")
   (style "#line { width: 100%; display: block;}"))
  
  (body
   (progress-bar)
   (div :id "container"
        (h1 "You're bad at history")
        (time-display)
        (h2 "When did World War 1 start?")
        (div :class "timeline"
             :style "position: relative;"
             (svg/svg :id "line" :height "20"
                      :click #(this-as this
                                (let* [bbox-width (.-width (.getBBox this))
                                       bbox-left (.-x (.getBBox this))
                                       click-x (.-offsetX %)]
                                  (reset! selected-date
                                          (fraction-to-date
                                           (/ (- click-x bbox-left)
                                              bbox-width)
                                           @start-date
                                           @end-date))))
                      :mousemove #(this-as this
                                    (reset! hovering true)
                                    (let* [bbox-width (.-width (.getBBox this))
                                           bbox-left (.-x (.getBBox this))
                                           click-x (.-offsetX %)]
                                      (reset! hovered-fraction
                                              (/ (- click-x bbox-left)
                                                 bbox-width))))
                      (svg/line :x1 "0" :y1 "12" :x2 "100%" :y2 "12" :stroke "blue")
                      (when-tpl hovering
                        (let [hovered-percentage (cell= (cl-format nil "~d%" (* 100 hovered-date-as-fraction)))]
                          (svg/g (svg/circle :id "date-cursor"
                                             {:cx hovered-percentage}
                                             :cy "12" :r "10" :fill "transparent" :stroke-width 2 :stroke "red")
                                 (svg/text :id "cursor-text" {:x hovered-percentage} :y "32" :dx "-0.75em"
                                           hovered-date ))))
                      (svg/circle :id "date-sel" {:cx (cell= (str (* 100 selected-fraction) "%"))}
                                  :cy "12" :r "9" :fill "#88f")
                      (svg/text :id "cursor-text" {:x (cell= (cl-format nil "~d%" (* 100 selected-fraction)))} :y "32" :dx "-0.75em"
                                           selected-date))
             
             (div :style "position: absolute; display:inline-block; margin-top: 1em;left: 0%" 1776)
             (div :style "position: absolute; display:inline-block; margin-top: 1em; left: 33%" 1876)
             (div :style "position: absolute; display:inline-block; margin-top: 1em; right: 33%" 1976)
             (div :style "position: absolute; display:inline-block; margin-top: 1em; right: 0%" 2076)
 
             ))))