(ns auto-ap.views.components.modal
  (:require [re-frame.core :as re-frame]
            [reagent.core :as r]
            [auto-ap.events :as events]
            [auto-ap.subs :as subs]
            [auto-ap.views.utils :refer [with-keys appearing]]))

(defn modal [{:keys [title foot hide-event class]} & body]
  [:div.modal.is-active (cond-> {}
                          class (assoc :class class))
   [:div.modal-background {:on-click (fn [] (re-frame/dispatch hide-event ))}]
   
   [:div.modal-card
    [:header.modal-card-head
     [:p.modal-card-title
      title]
     [:button.delete {:on-click (fn [] (re-frame/dispatch hide-event))}]]
    (into [:section.modal-card-body]
          (r/children (r/current-component)))
    
    (when foot
      [:footer.modal-card-foot
       foot])]])

(defn action-modal [{:keys [title class warning action-text id save-event can-submit? status-from] :or {can-submit? true}} & rest]
  (let [{:keys [visible? saving? error-message]} @(re-frame/subscribe [::subs/modal-state id status-from])]
    (println id visible?)
    (when visible?
      [:form {:id id
              :on-submit (fn [e]
                           (.preventDefault e)
                           (re-frame/dispatch [::events/modal-status id {:saving? true :error-message nil}])
                           (re-frame/dispatch save-event))}
       (-> [modal {:title [:span title]
                   :class class
                   :foot [:input.button.is-primary (cond-> {:type "submit"
                                                            :form id
                                                            :class (when saving?
                                                                     "is-loading")
                                                            :value action-text}
                                                     saving? (assoc :disabled "disabled")
                                                     (not can-submit?) (assoc :disabled "disabled"))
                          ]
                   :id id
                   :hide-event [::events/modal-status id {:visible? false}]}
            [appearing {:visible? error-message
                        :timeout 200
                        :enter-class "appear"
                        :exit-class "disappear"}
             [:div.notification.is-warning error-message]]
            [appearing {:visible? warning
                        :timeout 200
                        :enter-class "appear"
                        :exit-class "disappear"}
             [:div.notification.is-info warning]]]
           (into (r/children (r/current-component)))
           (into [(when saving? [:div.is-overlay {:style {"backgroundColor" "rgba(150,150,150, 0.5)"}}])]))])))