(ns auto-ap.views.pages.payments.side-bar
  (:require [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.components.typeahead :refer [typeahead-v3]]
            [auto-ap.views.pages.data-page :as data-page]
            [auto-ap.views.utils :refer [dispatch-event dispatch-value-change]]
            [re-frame.core :as re-frame]))

(defn side-bar [{:keys [data-page]}]
  (let [ap @(re-frame/subscribe [::subs/active-page])
        user @(re-frame/subscribe [::subs/user])]
    [:div
     [:div 
      [:p.menu-label "Vendor"]
      [:div
       [typeahead-v3 {:entities-by-id @(re-frame/subscribe [::subs/vendors-by-id])
                      :entity-index @(re-frame/subscribe [::subs/searchable-vendors-index])
                      :on-change #(re-frame/dispatch [::data-page/filter-changed data-page :vendor (some-> % (select-keys [:name :id]))])
                      :include-keys [:name :id]
                      :entity->text :name
                      :type "typeahead-v3"
                      :value @(re-frame/subscribe [::data-page/filter data-page :vendor])}]]

      [: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 "Amount"]
      [:div
       [number-filter
        {:on-change-event [::data-page/filter-changed data-page :amount-range]
         :value @(re-frame/subscribe [::data-page/filter data-page :amount-range])}]]

      [:p.menu-label "Check #"]
      [:div.field
       [:div.control [:input.input {:placeholder "10001"
                                    :value @(re-frame/subscribe [::data-page/filter data-page :check-number-like])
                                    :on-change (dispatch-value-change [::data-page/filter-changed data-page :check-number-like])} ]]]

      [:p.menu-label "Invoice #"]
      [:div.field
       [:div.control [:input.input {:placeholder "SJ-12345"
                                    :value @(re-frame/subscribe [::data-page/filter data-page :invoice-number])
                                    :on-change (dispatch-value-change [::data-page/filter-changed data-page :invoice-number])} ]]]

      [:p.menu-label "Payment Type"]
      [:div.field.has-addons
       [:p.control [:a.button.is-small {:on-click
                                        (dispatch-event [::data-page/filter-changed data-page :payment-type :cash])
                                        :class (when (= :cash @(re-frame/subscribe [::data-page/filter data-page :payment-type]))
                                                 ["is-selected" "is-success"])}
                    "Cash" ]]
       [:p.control [:a.button.is-small {:on-click
                                        (dispatch-event [::data-page/filter-changed data-page :payment-type :check])
                                        :class (when (= :check @(re-frame/subscribe [::data-page/filter data-page :payment-type]))
                                                 ["is-selected" "is-success"])}
                    "Check" ]]
       [:p.control [:a.button.is-small {:on-click
                                        (dispatch-event [::data-page/filter-changed data-page :payment-type :debit])
                                        :class (when (= :debit @(re-frame/subscribe [::data-page/filter data-page :payment-type]))
                                                 ["is-selected" "is-success"])}
                    "Debit"]]
       [:p.control [:a.button.is-small {:on-click
                                        (dispatch-event [::data-page/filter-changed data-page :payment-type nil])}
                    "All"]]]

      (when-let [exact-match-id @(re-frame/subscribe [::data-page/filter data-page :exact-match-id])]
        [:div
         [:p.menu-label "Specific Payment"]
         [: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])}]]])]]))
