(ns aome.core
  (:require [reagent.core :as r]
            [reagent.dom.client :as rdclient]
            [aome.org-file :as aorg-file]))

(defn header []
  [:fieldset
   [:div {:class ["field" "label" "border" "small"] :style {:display :inline-block :margin-top :auto}}
    [:input {:type :text :placeholder " " :value @aorg-file/current-file-name
             :on-change #(reset! aorg-file/current-file-name (.. % -target -value))}]
    [:label "File name"]]
   [:div {:class ["field" "label" "suffix" "border" "small"] :style {:width :fit-content :display :inline-block :margin-top :auto}}
    [:select {:on-change #(reset! aorg-file/current-file-extension (.. % -target -value))}
     [:option {:selected (= @aorg-file/current-file-extension ".org")} ".org"]
     [:option {:selected (= @aorg-file/current-file-extension ".org.gpg")} ".org.gpg"]]
    [:label "File extension"]
    [:i "arrow_drop_down"]]
   [:button {:class ["responsive" "border"] :style {:display :inline-block :width :fit-content} :on-click aorg-file/save-to-file-picker!}
    [:i "save"]
    [:span "Save"]]
   [:button {:class ["responsive" "border"] :style {:width :fit-content} :on-click aorg-file/load-from-file-picker!}
    [:i "file_open"]
    [:span "Read file"]]])

(defn editor []
  [:textarea {:style {:resize :none :width "100%" :height "50em"}
              :on-change #(reset! aorg-file/content (.. % -target -value))
              :value @aorg-file/content}])

(defn render []
  [:div
   [header]
   [editor]])

(defn init! []
  (-> js/document
      (.getElementById "app")
      rdclient/create-root
      (rdclient/render [render])))