(ns auto-ap.views.pages.pos.side-bar
  (:require [auto-ap.routes :as routes]
            [auto-ap.subs :as subs]
            [auto-ap.views.utils :refer [active-when dispatch-event]]
            [auto-ap.views.components.date-range-filter :refer [date-range-filter]]
            [auto-ap.views.components.number-filter :refer [number-filter]]
            [bidi.bidi :as bidi]
            [re-frame.core :as re-frame]
            [auto-ap.views.pages.data-page :as data-page]))

(defn side-bar [{:keys [data-page]}]
  (let [ap @(re-frame/subscribe [::subs/active-page])]
    [:div
     [:div [:p.menu-label "Type"]
      [:ul.menu-list
       [:li.menu-item
        [:a.item {:href (bidi/path-for routes/routes :sales-orders)
                  :class [(active-when ap = :sales-orders)]}
         [:span {:class "icon icon-accounting-invoice-mail" :style {:font-size "25px"}}]
         [:span {:class "name"} "Sales Orders"]]]
       [:li.menu-item
        [:a.item {:href (bidi/path-for routes/routes :expected-deposits)
                  :class [(active-when ap = :expected-deposits)]}
         [:span {:class "icon icon-accounting-invoice-mail" :style {:font-size "25px"}}]
         [:span {:class "name"} "Expected Deposits"]]]]]

     [:div
      [:p.menu-label "Date Range"]
      [:div
       [date-range-filter
        {:on-change-event [::data-page/filter-changed data-page :date-range]
         :value @(re-frame/subscribe [::data-page/filter data-page :date-range])}]]

      [:p.menu-label "Total"]
      [:div
       [number-filter
        {:on-change-event [::data-page/filter-changed data-page :total-range]
         :value @(re-frame/subscribe [::data-page/filter data-page :total-range])}]]
      
      (when (= :sales-orders ap)
        [:<>
         [:p.menu-label "Processor"]
         [:div
          [:nav.panel
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "doordash"])}
            [:span.panel-icon [:img.level-item {:src "/img/doordash.png"}]] 
            "Doordash"]
           
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "uber-eats"])}
            [:span.panel-icon [:img.level-item {:src "/img/ubereats.png"  }]]
            "Uber Eats"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "grubhub"])}
            [:span.panel-icon [:img.level-item {:src "/img/grubhub.png"}]] 
            "Grubhub"]]]])

      (when-let [exact-match-id @(re-frame/subscribe [::data-page/filter data-page :exact-match-id])]
        [:div
         [:p.menu-label "Specific Expected Deposit"]
         [:span.tag.is-medium exact-match-id " "
          [:button.delete.is-small {:on-click
                                    (dispatch-event [::data-page/filter-changed data-page :exact-match-id nil])}]]])]]))
          
