(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 appearing css-transition-group]]
   [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]]
   
   [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]]))


(defn navbar-drop-down-contents [{:keys [id]} children ]
  (let [toggle-fn (fn [] (re-frame/dispatch [::events/toggle-menu id]))]
    (reagent/create-class {:component-did-mount (fn [] (.addEventListener js/document "click" toggle-fn))
                           :component-will-unmount (fn [] (.removeEventListener js/document "click" toggle-fn))
                           :reagent-render
                           (fn [children]
                             children)})))

(defn navbar-drop-down [{:keys [ header id class]} child]
  (let [menu-active? (re-frame/subscribe [::subs/menu-active? id])]
    (reagent/create-class
     {:reagent-render (fn [{:keys [header id]} child]
                        (let [menu-active? @(re-frame/subscribe [::subs/menu-active? id])]
                          [:div { :class (str "navbar-item has-dropdown " (when menu-active? "is-active " ) " " class)}
                           [:a {:class "navbar-link login" :on-click (fn [e]
                                                                       (.preventDefault e)
                                                                       (.stopPropagation e)
                                                                       (re-frame/dispatch [::events/toggle-menu id])
                                                                       true)} header]
                           [appearing {:visible? menu-active? :enter-class "appear" :exit-class "disappear" :timeout 200}
                            [:div {:class "navbar-dropdown"}
                             [navbar-drop-down-contents {:id id}
                              [:div child]]]]]))})))

(defn login-dropdown []
  (let [user (re-frame/subscribe [::subs/user])
        menu (re-frame/subscribe [::subs/menu])]
    (if @user
      [navbar-drop-down {:header [:span [:span.icon [:i.fa.fa-user] ]
                                  [:span (:user/name @user)]] :id ::account}
       [:div
        [:a {:class "navbar-item"} "My profile"]
        (when (= "admin" (:user/role @user))
          [:a {:class "navbar-item" :href (bidi/path-for routes/routes :admin)} "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" ]
         [:a.navbar-item {:class [(active-when ap = :ledger)]
                          :href (bidi/path-for routes/routes :ledger)}
          "Ledger" ]]
        [:div {:class "navbar-burger burger", :data-target "navMenu"}
         [:span]
         [:span]
         [:span]] 
        [:div.navbar-end
         [:div.navbar-item
          [:a.button.is-primary.is-outlined
           {:on-click (dispatch-event [::events/modal-status :auto-ap.views.main/user-editing-vendor {:visible? true}])}
           [:span.icon [:i.fa.fa-plus] ] [:span "Vendor"]]]
         

         (when (> (count @clients) 1)
           [navbar-drop-down {:header (str "Client: " (if @client (:name @client)
                                                          "All"))
                              :id ::select-client}
            [:div
             [:a {:class "navbar-item"
                  :on-click (fn []
                              (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/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 ]
  [appearing {:visible? visible? :enter-class "slide-in-right" :exit-class "slide-out-right" :timeout 500}
   [:aside  {:class "column is-4 aside menu" :style {:height "calc(100vh - 46px)" :overflow "auto"}}
    (into [:div.sub-main {} ] children )]])

(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}]
  (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 "calc(100vh - 46px)" } :id "mail-app" }
      [:aside {:class "column aside menu is-2 " }
       [:div.main.left-nav 
        [:div side-bar
         ]]]
      [:div {:class "column messages hero " :style { :overflow "auto" }, :id "message-feed"}
       ^{:key (str "active-page-" (:name client))}
       [:div.inbox-messages
        (when-let [error  @(re-frame/subscribe [::subs/page-failure])]
          [:div.notification.is-warning.animated.fadeInUp
           error])
        main]]
      (when right-side-bar
        right-side-bar)
      ]
     #_[footer]
     [:div 
      [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor])
                      :save-event [::events/save-vendor]
                      :change-event [::events/change-nested-form-state [:user-editing-vendor]] :id :auto-ap.views.main/user-editing-vendor}]
      bottom]
     [:div#dz-hidden]]))


(defn side-bar [{:keys [on-close]} children]
  [:div [:a.delete.is-pulled-right {:on-click on-close}] [:div children]])