(ns auto-ap.ssr.components.periods 
  (:require
   [auto-ap.ssr.components.buttons :as buttons]
   [auto-ap.ssr.components.inputs :as inputs]
   [auto-ap.ssr.components.tabs :as tabs]
   [auto-ap.ssr.components.tags :as tags]
   [auto-ap.ssr.hx :as hx]
   [auto-ap.ssr.svg :as svg]
   [auto-ap.time :as atime]))

(defn periods-dropdown- [{:keys [value]}]
  [:div {:x-data (hx/json {:periods (map (fn [p]
                                           {:start (atime/unparse-local (:start p) atime/normal-date)
                                            :end (atime/unparse-local (:end p) atime/normal-date)})
                                         value)
                           :source_date (-> value
                                            first
                                            :end
                                            (atime/unparse-local atime/normal-date))})

         :x-effect "console.log('periods are', periods)"
         :x-init "$watch('periods', ds => source_date= ds.length > 0 ? ds[0].end : null)" }
   [:template {:x-for "(v,n) in periods" ":key" "n"}
    [:div
     [:input {:type "hidden"
              ":name" "'periods[' + n + '][start]'"
              :x-model "v.start"}]
     [:input {:type "hidden"
              ":name" "'periods[' + n + '][end]'"
              :x-model "v.end"}]]]
   (buttons/a-button- {"x-tooltip.on.click.theme.dropdown.placement.bottom.interactive" "{content: ()=> $refs.tooltip.innerHTML, allowHTML: true, appendTo: $root}"
                  :indicator? false}
                 [:template {:x-if "periods.length == 0"}
                  [:span.text-left.text-gray-400 "None selected"]]
                 [:template {:x-if "periods.length < 3 && periods.length > 0"}
                  [:span.inline-flex.gap-2
                   [:template {:x-for "p in periods"}
                    (tags/pill- {:color :secondary}
                              [:span {:x-text "p.start"}]
                              " - "
                              [:span {:x-text "p.end"}])]]]
                 [:template {:x-if "periods.length >= 3"}
                  (tags/pill- {:color :secondary}
                            [:span {:x-text "periods.length"}]
                            " periods selected")]
                 [:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
                  svg/drop-down])
   [:template {:x-ref "tooltip"}
    [:div.p-4.gap-2 {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1 p-4 w-[700px] "}
     [:div.flex.flex-col.gap-2
      (tabs/tabs-
        {:tabs [{:name "Quick"
                 :content [:div.flex.flex.gap-2
                           (inputs/calendar-input- {:placeholder "12/21/2020" :x-model "source_date"})
                           [:div.flex.flex-col.gap-2
                            (buttons/a-button- {"@click" "periods=getFourWeekPeriodsPeriods(source_date)"} [:span "13 periods, ending "
                                                                                                            [:span {:x-text "source_date"}]])
                            (buttons/a-button- {"@click" "periods=[calendarYearPeriod(source_date)]"} [:span "Calendar year ("
                                                                                                            [:span {:x-text "parseMMDDYYYY(source_date).getFullYear()"}]
                                                                                                       ")"])
                            (buttons/a-button- {"@click" "periods=getTwelveCalendarMonthsPeriods(source_date)"} [:span "12 months, ending "
                                                                                                            [:span {:x-text "parseMMDDYYYY(source_date).toLocaleString('default', { month: 'long' })"}]])
                            [:hr {:class "h-px my-1 bg-gray-200 border-0 dark:bg-gray-700"} ]
                            (buttons/a-button- {"@click" "periods=getLastMonthPeriods()"} "Last Month")
                            (buttons/a-button- {"@click" "periods=getMonthToDatePeriods()"} "Month to date")
                            (buttons/a-button- {"@click" "periods=getYearToDatePeriods()"} "Year to date")
                            (buttons/a-button- {"@click" "periods=[]"} "Clear")]]}
                {:name "Advanced"
                 :content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"
                                            :x-data (hx/json {:calendarTarget "0"
                                                              :calendarWhich "start"}) 
                                            "@change-date.camel" "$el.querySelectorAll('.text-inputs.' + calendarWhich)[calendarTarget].focus()"}
                           (inputs/calendar-input- {:x-model "periods[calendarTarget][calendarWhich]"})
                           [:div.flex.flex-col.gap-4.p-2
                            [:div.overflow-y-scroll.flex.flex-col.gap-4
                             [:template {:x-for "(p, i) in periods" ":key" "i"}
                              [:div.flex.gap-4.
                               (inputs/text-input- { :class "text-inputs start" :x-model "periods[i].start" "@focus" "calendarTarget =i; calendarWhich='start'" })
                               (inputs/text-input- { :class "text-inputs end" :x-model "periods[i].end" "@focus" "calendarTarget =i; calendarWhich='end'"})
                               (buttons/a-icon-button- {"@click.prevent.stop" "periods=periods.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)]
                              #_(com/pill {:color :secondary}
                                          [:span {:x-text "p.start"}]
                                          " - "
                                          [:span {:x-text "p.end"}])]]
                            (buttons/button- {"@click.prevent.stop" "periods.push({start: '', end: ''}); calendarTarget=0" :class "w-32"} "Add new period")]
                           ]}]
         :active "Quick"}) ]]]])

(defn dates-dropdown- [{:keys [value name]}]
  [:div {:x-data (hx/json {:dates (map #(atime/unparse-local % atime/normal-date) value)})}
   [:template {:x-for "v in dates"}
    [:input {:type "hidden"
             :name name
             :x-model "v"}]]
   (buttons/a-button- {"x-tooltip.on.click.theme.dropdown.placement.bottom.interactive" "{content: ()=> $refs.tooltip.innerHTML, allowHTML: true, appendTo: $root}"
                       :indicator? false}

                      [:template {:x-if "dates.length == 0"}
                       [:span.text-left.text-gray-400 "None selected"]]
                      [:template {:x-if "dates.length < 3 && dates.length > 0"}
                       [:span.inline-flex.gap-2
                        [:template {:x-for "v in dates"}
                         (tags/pill- {:color :secondary}
                                     [:span {:x-text "v"}])]]]
                      [:template {:x-if "dates.length >= 3"}
                       (tags/pill- {:color :secondary}
                                   [:span {:x-text "dates.length"}]
                                   " dates")]
                      [:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
                       svg/drop-down])
   [:template {:x-ref "tooltip"}
    [:div.p-4 {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1 p-4"}
     [:div.flex.flex-col.gap-2
      (tabs/tabs-
       {:tabs [{:name "Quick"
                :content [:div.flex.flex.gap-2
                          (inputs/multi-calendar-input- {:placeholder "12/21/2020"
                                                         :x-model "dates"})
                          [:div.flex.flex-col.gap-2
                           (buttons/a-button- {"@click" "dates=getFourWeekPeriods(dates[dates.length -1])"} "13 periods")
                           (buttons/a-button- {"@click" "dates=withLastYear(dates[dates.length -1])"} "Add prior year")
                           (buttons/a-button- {"@click" "dates=[]"} "Clear")]]}
               {:name "Advanced oooo"
                :content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"
                                           :x-data (hx/json {:calendarTarget "0" })
                                           "@change-date.camel" "$el.querySelectorAll('.text-inputs')[calendarTarget].focus();"}
                          (inputs/calendar-input- {:x-model "dates[calendarTarget]" })
                          [:div.flex.flex-col.gap-4.p-2
                           [:div.overflow-y-scroll.flex.flex-col.gap-4
                            [:template {:x-for "(p, i) in dates" ":key" "i"}
                             [:div.flex.gap-4.
                              (inputs/text-input- {:x-model "dates[i]" 
                                                   "@focus" "calendarTarget =i;  "
                                                   :class "text-inputs"})
                              (buttons/a-icon-button- {"@click.prevent.stop" "dates=dates.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)] ]]
                           (buttons/button- {"@click.prevent.stop" "dates.push(null); calendarTarget=0" :class "w-32"} "Add new period")]]}]
        :active "Quick"})]]]])