(ns design
  (:require [portfolio.ui :as ui]
            [portfolio.dumdom :as d]
            [portfolio.dom :as r]))


(defn left-bar []
  [:div.m-4.p-4.text-2xl
   [:h1.mb-8 [:i.fa-solid.fa-gear.ml-4] "Oliver Marks - Software Engineer"]
   [:p.m-8 "Example projects"]])

(defn right-bar []
  [:div
   [:div.skew-x-12.bg-slate-400.m-4
    [:ul.flex [:li.m-2 "item 1"] [:li.m-2 "item 2"] [:li.m-2 "item 3"]]]])

(defn split-bar []
  [:div.w-full.p-8
   [:div.p-4.border-t-4.border-slate-900.w-full]])

(defn page-header []
  [:header.flex.mb-12
   (left-bar)
   [:div.grow]
   (right-bar)])


(defn tile [{:keys [title direction image description]}]
  [:div.rounded-lg.mb-8.h-52.w-full
   [:img.rounded-lg.h-24.w-24.ml-4.mr-4
    {:src "https://img.theplantscape.com/api/image/missing.jpg?p=medium"
     :align (if (= direction "right") "right" "left")}]
   [:h3.text-xl title]

   [:p description]])

(defn skills-list [title skills]
  [:div.mb-8
   [:h3.m-4.text-2xl title]
   (into [:ul]
         (mapv (fn skill-item [{:keys [direction icon skill]}]
                 (if (= direction "right") 
                   [:li.m-2.text-xl [:span [:i.mr-4 {:class (str "devicon-" icon "-plain")}] skill]]
                   [:li.m-2.text-xl [:span skill [:i.ml-4 {:class (str "devicon-" icon "-plain")}]]]))
               skills))])

(defn shaped-circle [direction w h]
  (if (= direction "right")
[:div.clear-both.ml-8.opacity-50 {:style {:float "right" :right "0px"
                                              :width (str w "px") :height (str h "px")
                                              :background-color "#666666"
                                              :border-radius (str w "px 0px 0px " w "px")
                                              :shape-outside (str "circle(" w "px at " w "px " w "px)") }}]
    [:div.clear-both.mr-8.opacity-50 {:style {:float "left" 
                                              :width (str w "px") :height (str h "px")
                                              :background-color "#666666"
                                              :border-radius (str "0px " w "px " w "px 0px")
                                              :shape-outside (str "circle(" w "px at 0px " w "px)") }}])
  )

(defn dual-column-circle []
  [:section.w-full.flex {:style {:background-image "url(/img/dev-01.png)"
                                 :background-repeat "no-repeat"
                                 :background-position "center top"
                                 :background-size "800px 800px"}}
   [:div.align-middle.relative.text-right {:class "w-1/2" :style {:width "50%"}}
    #_[:div.ml-8.opacity-50 {:style {:float "right" :right "0px" :width "200px" :height "400px" :background-color "#666666"
                        :border-radius "200px 0px 0px 200px"
                                   :shape-outside "circle(200px at 200px 200px)"}}]
    (shaped-circle "right" "150" "300")
    (shaped-circle "right" "250" "500")
    (skills-list "Operations"
                 [{:icon "googlecloud" :skill "Google Cloud"}
                  {:icon "digitalocean" :skill "Digitalocean"}
                  {:icon "docker" :skill "Docker"}
                  {:icon "kubernetes" :skill "Kubernetes"}])
    (tile {:title "GASP Air quality sensor"
           :direction "right"
           :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium"
           :description "Single page site, which display's data relayed via mqtt from a physical device."})
    (tile {:title "Image scaling & resizing"
           :direction "right"
           :href "https://images.digitaloctave.com/"
           :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium"
           :description "API to upload image's and handle scaling to different sizes"})
    (tile {:title "Image scaling & resizing"
           :direction "right"

           :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium"
           :description "API to upload image's and handle scaling to different sizes"})

    ]
   [:div.align-middle.relative.text-left {:class "w-1/2" :style {:width "50%"}}
    (shaped-circle "left" "150" "300")
    (shaped-circle "left" "250" "500")

    #_[:div.mr-8.opacity-50 {:style {:float "left" :width "200px" :height "400px" :background-color "#666666"
                   :border-radius "0px 200px 200px 0px"
                   :shape-outside "circle(220px at 0px 200px)"}}]
    (skills-list
     "Development"
     [{:direction "right" :icon "clojure" :skill "Clojure"}
      {:direction "right" :icon "javascript" :skill "Javascript"}
      {:direction "right" :icon "python" :skill "Python"}
      {:direction "right" :icon "c" :skill "C / Arduino"}])
    (tile {:title "GASP Air quality sensor"
           :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium"
           :href "https://gasp.digitaloctave.com"
           :description "Single page site, which display's data relayed via mqtt from a physical device."})
    (tile {:title "theplantscape"
           :href "https://theplantscape.com"
           :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium"
           :description "Site for designing and planning gardens"})]])

(d/defscene circle 
  dual-column-circle
  )

(defn footer-blocks [blocks]
  (into [:div.m-8.grid.grid-cols-2.gap-8.sm:gap-6.sm:grid-cols-3]
        (mapv (fn footer-block [{:keys [title children]}]
                [:div [:h2.mb-6.text-sm.font-semibold.text-gray-900.uppercase.dark:text-white title]
                 (into      [:ul.text-gray-500.dark:text-gray-400.font-medium]
                            (mapv (fn footer-link [{:keys [title link]}]
                                    [:li.mb-4 [:a.hover:underline {:href link} title]]) children))])
              blocks)))

(defn page-footer []
  [:section.m-8.flex.flex-row
   [:img.rounded-full {:src "https://img.theplantscape.com/api/image/missing.jpg?p=medium"}]
   (footer-blocks [{:title "Social / Contact Me"
                    :children [{:link "https://matrix.to/#/#theplantscape.com:matrix.org" :title "Chat"}
                               {:link "https://fo.llow.social/u/olymk2@mastodon.social" :title "Masterdon"}]}])])

(d/defscene header
  page-header)

(d/defscene footer
  page-footer)


(d/defscene page
  [:div.bg-slate-200
   [:div {:class "m-4/5"}
    (page-header)
    (dual-column-circle)
    (split-bar)
    (page-footer)]])


(defn launch []
  (ui/start!
   {:config {:css-paths ["/css/styles.css"
                         "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
                         "https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"]}}))

