(ns auto-ap.views.pages.admin.companies
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [re-frame.core :as re-frame]
            [reagent.core :as reagent]
            [auto-ap.subs :as subs]
            [auto-ap.events.admin.companies :as events]
            [auto-ap.entities.companies :as entity]
            [auto-ap.views.components.address :refer [address-field]]
            [auto-ap.views.utils :refer [login-url dispatch-value-change bind-field horizontal-field]]
            [auto-ap.views.components.modal :refer [modal]]
            [cljs.reader :as edn]
            [auto-ap.routes :as routes]
            [bidi.bidi :as bidi]))
(defn companies-table []
  (let [companies (re-frame/subscribe [::subs/companies])
        editing-company (:company  @(re-frame/subscribe [::subs/admin]))]
    [:table {:class "table", :style {:width "100%"}}
     [:thead  
      [:tr  
       [:th "Name"]
       [:th "Email"]]]
     [:tbody (for [{:keys [id name email] :as c} @companies]
               ^{:key (str name "-" id )}
               [:tr {:on-click (fn [] (re-frame/dispatch [::events/edit id]))
                     :style {"cursor" "pointer"}}
                [:td name]
                [:td email]])]]))

(defn admin-companies-page []
  [:div
   (let [companies (re-frame/subscribe [::subs/companies])
         editing-company (:company @(re-frame/subscribe [::subs/admin]))]
     
     [:div
      [:h1.title "Companies"]
      [companies-table]
      
      (when editing-company
        [modal {:title (str "Edit " (:name editing-company))
                :foot [:a.button.is-primary {:on-click (fn [] (re-frame/dispatch [::events/save]))}
                       [:span "Save"] 
                       (when (:saving? editing-company)
                         [:span.icon
                          [:i.fa.fa-spin.fa-spinner]])]
                :hide-event [::events/edit nil]}
         [horizontal-field
          [:label.label  "Name"]
          [:div.control
           [bind-field
            [:input.input {:type "text"
                           :field :name
                           :spec ::entity/name
                           :event ::events/change
                           :subscription editing-company}]]]]

         [horizontal-field
          [:label.label "Email"]
          [:div.control
           [bind-field
            [:input.input {:type "email"
                           :field :email
                           :spec ::entity/name
                           :event ::events/change
                           :subscription editing-company}]]]]

         [:h2.subtitle "Address"]
         
         [address-field {:field [:address]
                         :event ::events/change
                         :subscription editing-company}]

         [horizontal-field
          [:label.label "Bank Accounts"]
          [:div.control
           [:ul
            (for [{:keys [number check-number id]} (:bank-accounts editing-company)]
              ^{:key id} [:li number " - " check-number])]]]
         
         
         (when (:saving? editing-company) [:div.is-overlay {:style {"backgroundColor" "rgba(150,150,150, 0.5)"}}])])])])
