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

(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 "Payment Method"]
         [:div
          [:nav.panel
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :type-name nil])}
            [:span.panel-icon]
            "All"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :type-name "CASH"])}
            [:span.panel-icon
             [:span  {:class "icon-accounting-bill" :style {:font-weight "400"}}]]
            "Cash"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :type-name "CARD"])}
            [:span.panel-icon
             [:span  {:class "icon-credit-card-1" :style {:font-weight "400"}}]]
            "Card"]
           
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :type-name "SQUARE_GIFT_CARD"])}
            [:span.panel-icon
             [:span  {:class "icon-gift-box" :style {:font-weight "400"}}]]
            "Gift Card"]
           
           
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :type-name "OTHER"])}
            [:span.panel-icon ] 
            "Other"]]]

         [:p.menu-label "Processor"]
         [:div
          [:nav.panel
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor nil])}
            [:span.panel-icon]
            "All"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "square"])}
            [:span.panel-icon [:img.level-item {:src "/img/square.png"}]] 
            "Square"]
           [: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"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "koala"])}
            [:span.panel-icon [:img.level-item {:src "/img/koala.png"}]] 
            "Koala"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "ezcater"])}
            [:span.panel-icon [:img.level-item {:src "/img/ezcater.png"}]] 
            "EZCater"]
           [:a.panel-block {:on-click (dispatch-event [::data-page/filter-changed data-page :processor "na"])}
            [:span.panel-icon #_[:img.level-item {:src "/img/grubhub.png"}]] 
            "No Processor"]
           ]]
         [:p.menu-label "Category"]
         [:div.field
          [:div.control [:input.input {:placeholder "Fries"
                                       :value       @(re-frame/subscribe [::data-page/filter data-page :category])
                                       :on-change   (dispatch-value-change [::data-page/filter-changed data-page :category])} ]]]])

      (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])}]]])]]))
          
