 
 (defn animate-function [key f initial-value]
   (letfn [(upd [state]
-            (let [[_ _ value] (:rum/args state)]
+            (let [[_ value] (:rum/args state)]
               #_(.start (animated-spring (key state) #js {:toValue (f value) :friction 10 :tension 60}))
               (.start (animated-timing (key state) #js {:toValue (f value) :duration 200
                                                         :easing  (ease-out ease)}))

                                       :textAlign    "right"
                                       :paddingRight 10}}
                              "Without"))
                  (view {:style {:flex 0.2}} (labelled-vertical-bar palette #(str (to-pc %) "%") br))
                  (view {:style {:flex 0.04}})
                  (view {:style {:flex 0.2}} (labelled-vertical-bar palette #(str (to-pc %) "%") er))
                  (view {:style {:flex           0.3
                                 :justifyContent "center"}}
                        (text {:style {:color     (:text-icons palette)

                       :fontWeight font-weight}}
              (formatter value))))

(defn percentage [value]
  (str (to-pc value) "%"))

(def inner-top-label (partial bar-value-label {:font-size   26
                                               :font-weight "400"
                                               :text-color  :text-icons
                                               :on-edge     :bottom
                                               :formatter   percentage}))

(def outer-bottom-label (partial bar-value-label {:font-size   26
                                                  :font-weight "400"
                                                  :text-color  :dark-primary
                                                  :on-edge     :top
                                                  :formatter percentage}))

(defcs top-bar < rum/static
                 (animate-function ::height #(- 1 %) 0.5)
                 "The top and bottom bars split the vertical flex space in the ratio (1-value) : value.
                 Both are animated views which morph between changed values.
                 Here we only allow 2 bars so we can label them inside if there is space, or above if not.
                 The top bar colours are chosen to be the same as the background"
  [state palette value]
  (animated-view {:style {:flex            (::height state)
                          :backgroundColor (:primary palette)}}
                 (when (< value 0.1)
                   (inner-top-label palette value))))

(defcs bottom-bar < rum/static
                    (animate-function ::height identity 0.5)
  [state palette value]
  (animated-view {:style {:flex            (::height state)
                          :backgroundColor (:light-primary palette)}}
                 (when (>= value 0.1)
                   (outer-bottom-label palette value))))

(defcs labelled-vertical-bar < rum/static
  [state palette value]
  (view {:style {:flex 1}}
        (top-bar palette value)
        (bottom-bar palette value)
        ))

(defcs page < rum/reactive [state]
