(ns auto-ap.views.components.layouts
  (:require
   [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]]))

(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"}
      [: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
         [: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 {:class "footer"}
   [:div {:class "container"}
    [:div {:class "content has-text-centered"}
     [:p  
      [:strong "Integreat"]]
     [:p  
      [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
       [:i {:class "fa fa-github"}]]]]]])

(defn side-bar-layout [{:keys [side-bar main ap bottom]}]
  (let [ap @(re-frame/subscribe [::subs/active-page])
        client @(re-frame/subscribe [::subs/client])]
    [:div 
     [navbar ap]
     [:div {:class "columns ", :id "mail-app"}
      [:aside {:class "column is-narrow aside menu hero is-fullheight"}
       [:div.main.left-nav
        side-bar]]
      [:div {:class "column messages hero is-fullheight", :id "message-feed"}
       ^{:key (str "active-page-" (:name client))}
       [:div.inbox-messages main]]]
     [footer]
     bottom
     [:div#dz-hidden]]))