(ns auto-ap.views.pages.payments.side-bar
  (:require [auto-ap.routes :as routes]
            [auto-ap.subs :as subs]
            [auto-ap.views.utils :refer [active-when dispatch-value-change]]
            [auto-ap.views.components.vendor-filter :refer [vendor-filter]]
            [auto-ap.views.components.date-range-filter :refer [date-range-filter]]
            [auto-ap.views.components.number-filter :refer [number-filter]]
            [auto-ap.views.components.bank-account-filter :refer [bank-account-filter]]
            [auto-ap.views.components.typeahead :refer [typeahead-entity]]
            [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])
        user @(re-frame/subscribe [::subs/user])]
    [:div
     [:div 
      [:p.menu-label "Vendor"]
      [:div
       [typeahead-entity {:matches @(re-frame/subscribe [::subs/searchable-vendors])
                          :on-change #(re-frame/dispatch [::data-page/filter-changed data-page :vendor %])
                          :include-keys [:name :id]
                          :match->text :name
                          :type "typeahead-entity"
                          :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])} ]]]]]))