(ns auto-ap.views.pages.page-stack
  (:require
   [auto-ap.views.utils :refer [switch-transition transition]]
   [reagent.core :as r]))

(defn page-stack []
  (let [last-stack-size (r/atom (->> (r/current-component)
                                     r/children
                                     (filter identity) count))
        forward? (r/atom false)]
    (fn [{:keys [pages active]}]
      (let [current-stack-size (->> pages
                                    (take-while #(not= (:key %)
                                                       active))
                                    count)
            current-child (->> pages
                               (filter #(= (:key %)
                                           active))
                               first)]
        (when (not= current-stack-size @last-stack-size)
          (reset! forward? (> current-stack-size @last-stack-size))
          (reset! last-stack-size current-stack-size))
        [:div
         [:h1.title (:breadcrumb current-child)]
         [switch-transition {:mode "in-out"} 
          ^{:key current-stack-size}
          [transition
           {:timeout 100
            :exit    true
            :in      true #_(= current-stack- (:key (meta child)))
            :appear  (> current-stack-size 1)}
           (clj->js (fn [state]
                      (r/as-element 
                        [:div {:style {
                                       :position (cond
                                                   (= "entered" state)
                                                   ""

                                                   (= "entering" state)
                                                   "absolute"

                                                   (= "exiting" state)
                                                   "absolute"

                                                   (= "exited" state)
                                                   "")
                                       :transition "opacity 300ms ease-in-out, transform 300ms ease-in-out"
                                       :opacity (cond
                                                  (= "entered" state)
                                                  ""

                                                  (= "entering" state)
                                                  0.0

                                                  (= "exiting" state)
                                                  1.0

                                                  (= "exited" state)
                                                  0.0)
                                       :transform (if @forward?
                                                    (cond
                                                      (= "entered" state)
                                                      ""

                                                      (= "entering" state)
                                                      "translateX(100%)"

                                                      (= "exiting" state)
                                                      "translateX(-100%)"

                                                      (= "exited" state)
                                                      "translateX(0%)")
                                                    (cond
                                                      (= "entered" state)
                                                      ""

                                                      (= "entering" state)
                                                      "translateX(-100%)"

                                                      (= "exiting" state)
                                                      "translateX(100%)"

                                                      (= "exited" state)
                                                      "translateX(0%)"))}}
                         (:content current-child)])))]]]))))