(ns auto-ap.views.components.layouts
  (:require
   [cljsjs.react-transition-group]
   [reagent.core :as reagent]
   [re-frame.core :as re-frame]
   [bidi.bidi :as bidi]
   [auto-ap.routes :as routes]
   [auto-ap.subs :as subs]
   [auto-ap.events :as events]
   [auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event]]
   
   [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]]))
(def css-transition-group
  (reagent/adapt-react-class js/ReactTransitionGroup.CSSTransition))
(defn login-dropdown []
  (let [user (re-frame/subscribe [::subs/user])
        menu (re-frame/subscribe [::subs/menu])]
    (if @user
      [:div {:class (str "navbar-item has-dropdown " (when (get-in @menu [:account :active?]) "is-active"))}
       [:a {:class "navbar-link login" :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} (:user/name @user)]
       [:div {:class "navbar-dropdown"}
        [:a {:class "navbar-item"} "My profile"]
        (when (= "admin" (:user/role @user))
          [:a {:class "navbar-item" :href (bidi/path-for routes/routes :admin)
               :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} "Administration"])
        [:hr {:class "navbar-divider"}]
        [:a.navbar-item {:on-click (fn [e] (.preventDefault e) (re-frame/dispatch [::events/logout]))} "Logout"]]]
      [:a.navbar-item {:href login-url} "Login"])))

(defn navbar [ap]
  (let [client (re-frame/subscribe [::subs/client])
        clients (re-frame/subscribe [::subs/clients])
        menu (re-frame/subscribe [::subs/menu])]
    [:nav {:class "navbar has-shadow is-fixed-top"}
      [:div {:class "container"}
       [:div {:class "navbar-brand"}
        [:a {:class "navbar-item", :href "../"}
         [:img {:src "/img/logo.png"}]]]
       [:div.navbar-menu
        [:div.navbar-start
         [:a.navbar-item {:class [(active-when ap = :index)]
                          :href (bidi/path-for routes/routes :index)}
          "Home" ]
         [:a.navbar-item {:class [(active-when ap #{:unpaid-invoices :paid-invoices})]
                          :href (bidi/path-for routes/routes :unpaid-invoices)}
          "Invoices" ]
         [:a.navbar-item {:class [(active-when ap = :checks)]
                          :href (bidi/path-for routes/routes :checks)}
          "Payments" ]
         [:a.navbar-item {:class [(active-when ap = :transactions)]
                          :href (bidi/path-for routes/routes :transactions)}
          "Transactions" ]]
        [:div {:class "navbar-burger burger", :data-target "navMenu"}
         [:span]
         [:span]
         [:span]] 
        [:div.navbar-end
         (when (> (count @clients) 1)
           [:div { :class (str "navbar-item has-dropdown " (when (get-in @menu [:client :active?]) "is-active"))}
            [:a {:class "navbar-link login" :on-click (fn [] (re-frame/dispatch [::events/toggle-menu :client]))} "Client: " (if @client (:name @client)
                                                                                                                                 "All")]
            [:div {:class "navbar-dropdown"}
             [:a {:class "navbar-item"
                  :on-click (fn []
                              (re-frame/dispatch [::events/toggle-menu :client])
                              (re-frame/dispatch [::events/swap-client nil]))
                  } "All"]
             [:hr {:class "navbar-divider"}]
             (for [{:keys [name id] :as client} @clients]
               ^{:key id }
               [:a {:class "navbar-item"
                    :on-click (fn []
                                (re-frame/dispatch [::events/toggle-menu :client])
                                (re-frame/dispatch [::events/swap-client client]))
                    } name])]])]]
       [login-dropdown]]]))

(defn footer []
  [:footer {:style {:padding "1em"}}
   [:div {:class "content has-text-centered"}
    [:p  
     [:strong "Integreat"] ]]])

(defn appearing-side-bar [{:keys [visible?]} & children ]
  (let [final-state (reagent/atom visible?)]
    (fn [{:keys [visible?]} & children]
      [css-transition-group {:in visible? :class-names {:exitDone "bounce animated" :exit "fadeOutRight animated" :enter "fadeInRight animated"} :timeout 300 :onEnter (fn [] (reset! final-state true )) :onExited (fn [] (reset! final-state false))} 
       (if (or @final-state visible?)
         [:aside  {:class "column is-3 aside menu hero is-fullheight" :style {:height "100vh" :overflow "auto"}}
          [:div.sub-main {:style  {:padding-bottom "80px"}}children ]]
         [:div])])))

(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar right-side-bar-visible?]}]
  (let [ap @(re-frame/subscribe [::subs/active-page])
        client @(re-frame/subscribe [::subs/client])]
    [:div 
     [navbar ap]
     [:div {:class "columns has-shadow", :style {:margin-bottom "0px" :height "100vh"} :id "mail-app" }
      [:aside {:class "column aside menu is-2 " }
       [:div.main.left-nav 
        [:div side-bar
         ]]]
      [:div {:class "column messages hero is-fullheight " :style { :overflow "auto" }, :id "message-feed"}
       ^{:key (str "active-page-" (:name client))}
       [:div.inbox-messages main]]
      [appearing-side-bar {:visible? right-side-bar-visible?} right-side-bar]]
     #_[footer]
     bottom
     [:div#dz-hidden]]))

