(defwidget mycpu_bottombar [coreid]
  (box
    :space-evenly false
    :orientation "v"
    (label
      :class "bg-cool-text"
      :text "Core ${coreid}"
    )
    (box
      :class "bg-graph-container"
      (graph
        :class "bg-graph"
        :width 100
        :height 50
        :thickness 3
        :min 0
        :max 100
        :value {EWW_CPU.cores[coreid].usage}
        :time-range "30s"
        :line-style "round"
      )
    )
  )
)

(defwidget cavacol [nth dir]
  (box
    :valign "${dir == 'up' ? 'end' : (
      dir == 'down' ? 'start' : 'fill'
    )}"
    :halign "${dir == 'right' ? 'start' : (
      dir == 'left' ? 'end' : 'fill'
    )}"
    :class "cava-column"
    ; background-color: mix(
      ;     ${mcover.color.colors.color4 == 'null' ? 'white' : mcover.color.colors.color4},
      ;     rgba(40, 40, 40, 0.7),
      ;     {(((nth / 90 * RES_WIDTH) > mousepos[0] ? ((nth / 90 * RES_WIDTH) - mousepos[0]) : (mousepos[0] - (nth / 90 * RES_WIDTH))) / RES_WIDTH)}
    ; );
    :style "
    background-color: ${mcover.color.colors.color4 == 'null' ? 'white' : mcover.color.colors.color4};
    transition: 0ms;
    min-${dir == 'up' || dir == 'down' ? 'height' : 'width'}: ${cavajson[nth] / 4}px;
    "
  )
)

(defwidget bottomline_widget []
  (eventbox
    :onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
    :onclick "scripts/toggle-bottombar.sh &"
    (box
      :class "bottombar-closed-hitbox"
      :width {RES_WIDTH} :height 1
      (revealer :reveal false
        :transition "slideup"
        ; (label :text "${cavajson[0]}")
      )
    )
  )
)

(defwidget bottombar_widget []
  (box
    :orientation "v"
    :space-evenly false
    :style "
    transition: ${anim_open_bottombar ? MD3_DECEL : MD3_ACCEL};
    ${rev_bottombar ? '' : 'margin-bottom: -500px; margin-top: 500px;'}
    "
    (eventbox
      :onclick "scripts/toggle-bottombar.sh --close &"
      :onmiddleclick "scripts/toggle-bottombar.sh --close &"
      :onrightclick "scripts/toggle-bottombar.sh --close &"
      (box
        :class "box-that-is-there" :style "min-height: 1px;"
      )
    )
    (overlay
      ; Background
      (box
        :class "bottombar-bg-front"
        ; (label
          ;   :text {(((40 / 90 * RES_WIDTH) > mousepos[0] ? ((40 / 90 * RES_WIDTH) - mousepos[0]) : (mousepos[0] - (40 / 90 * RES_WIDTH))) / RES_WIDTH)}
        ; )
      )
      ; Cava
      (box
        ; :class "bottombar-bg"
        (box :orientation "h"
          ; it IS necessary NOT to use a for loop
          (cavacol :dir "up" :nth 0)
          (cavacol :dir "up" :nth 1)
          (cavacol :dir "up" :nth 2)
          (cavacol :dir "up" :nth 3)
          (cavacol :dir "up" :nth 4)
          (cavacol :dir "up" :nth 5)
          (cavacol :dir "up" :nth 6)
          (cavacol :dir "up" :nth 7)
          (cavacol :dir "up" :nth 8)
          (cavacol :dir "up" :nth 9)
          (cavacol :dir "up" :nth 10)
          (cavacol :dir "up" :nth 11)
          (cavacol :dir "up" :nth 12)
          (cavacol :dir "up" :nth 13)
          (cavacol :dir "up" :nth 14)
          (cavacol :dir "up" :nth 15)
          (cavacol :dir "up" :nth 16)
          (cavacol :dir "up" :nth 17)
          (cavacol :dir "up" :nth 18)
          (cavacol :dir "up" :nth 19)
          (cavacol :dir "up" :nth 20)
          (cavacol :dir "up" :nth 21)
          (cavacol :dir "up" :nth 22)
          (cavacol :dir "up" :nth 23)
          (cavacol :dir "up" :nth 24)
          (cavacol :dir "up" :nth 25)
          (cavacol :dir "up" :nth 26)
          (cavacol :dir "up" :nth 27)
          (cavacol :dir "up" :nth 28)
          (cavacol :dir "up" :nth 29)
          (cavacol :dir "up" :nth 30)
          (cavacol :dir "up" :nth 31)
          (cavacol :dir "up" :nth 32)
          (cavacol :dir "up" :nth 33)
          (cavacol :dir "up" :nth 34)
          (cavacol :dir "up" :nth 35)
          (cavacol :dir "up" :nth 36)
          (cavacol :dir "up" :nth 37)
          (cavacol :dir "up" :nth 38)
          (cavacol :dir "up" :nth 39)
          (cavacol :dir "up" :nth 40)
          (cavacol :dir "up" :nth 41)
          (cavacol :dir "up" :nth 42)
          (cavacol :dir "up" :nth 43)
          (cavacol :dir "up" :nth 44)
          (cavacol :dir "up" :nth 45)
          (cavacol :dir "up" :nth 46)
          (cavacol :dir "up" :nth 47)
          (cavacol :dir "up" :nth 48)
          (cavacol :dir "up" :nth 49)
          (cavacol :dir "up" :nth 50)
          (cavacol :dir "up" :nth 51)
          (cavacol :dir "up" :nth 52)
          (cavacol :dir "up" :nth 53)
          (cavacol :dir "up" :nth 54)
          (cavacol :dir "up" :nth 55)
          (cavacol :dir "up" :nth 56)
          (cavacol :dir "up" :nth 57)
          (cavacol :dir "up" :nth 58)
          (cavacol :dir "up" :nth 59)
          (cavacol :dir "up" :nth 60)
          (cavacol :dir "up" :nth 61)
          (cavacol :dir "up" :nth 62)
          (cavacol :dir "up" :nth 63)
          (cavacol :dir "up" :nth 64)
          (cavacol :dir "up" :nth 65)
          (cavacol :dir "up" :nth 66)
          (cavacol :dir "up" :nth 67)
          (cavacol :dir "up" :nth 68)
          (cavacol :dir "up" :nth 69)
        )
      )
      ; Track time
      (box
        :space-evenly false :orientation "h"
        :halign "center" :valign "end"
        :style "margin-bottom: 5px;"
        (label
          :halign "start"  :valign "center"
          :class "music-time-label"
          :style "
          margin-top: 5px;
          color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};
          "
          :text "${music.position_time} / ${music.length}"
        )
      )
      ; Track name
      (box
        :space-evenly false :orientation "h" :spacing 20
        :halign "start" :valign "start"
        :class "bottombar-musicinfo-box"
        (box
          :valign "center"
          :class "bottombar-music-cover"
          :style "background-image: url('${mcover.image}')"
        )
        (box
          :space-evenly false :orientation "v"
          :spacing 5
          (label :xalign 0
            :class "bottombar-title"
            :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
            :text {mname.title == '' ? 'Media controls' : mname.title}
          )
          (label
            :halign "start" :valign "end"
            :xalign 0
            :class "bottombar-artist"
            :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
            :text {mname.title == '' ? 'Nothing...' : mname.artist}
          )
          (centerbox
            :halign "start"
            :class "music-button-box"
            ; :style "margin-top: 5px;"
            (button
              :class "song-button"
              :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
              :onclick "playerctl previous" ""
            )
            (button
              :class "song-button"
              :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
              :onclick "playerctl play-pause"
              "${music.status != '' ? music.status : ''}"
            )
            (button
              :class "song-button"
              :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
              :onclick "playerctl next || playerctl position `bc <<< \"100 * $(playerctl metadata mpris:length) / 1000000 / 100\"`"
              ""
            )
          )
        )
      )
    )
    (box
      :class "bottombar-mixer-bg"
      :halign "end"
      :width 650
      :style "
      margin-top: -300px;
      margin-right: 10px;
      "
      (scroll
        :width 650
        :hscroll true
        :vscroll false
        (box
          :space-evenly false
          :orientation "h"
          :halign "end"
          ; :class "sliders"
          (for app in audiojson
            (box
              :orientation "v" :space-evenly false
              (image
                :class "onotify-app-icon"
                :path {app.icon}
                :image-width 25
                :image-height 25
              )
              (box
                :orientation "v"
                :space-evenly false
                (scroll
                  :vscroll false
                  :hscroll true
                  :style "min-width: 150px;"
                  (box
                    :orientation "v"
                    ; :space-evenly false
                    (for ser in {app["volume"]}
                      (eventbox
                        :onscroll "pactl set-sink-input-volume ${ser[0]} $(echo {} | sed -e \"s/up/+5/g\" -e \"s/down/-5/g\")%"
                        :onrightclick "pactl set-sink-input-volume ${ser[0]} 100%"
                        :onclick "pactl set-sink-input-volume ${ser[0]} 0%"
                        (centerbox
                          :space-evenly false
                          :orientation "h"
                          :class "onotify-app-volbox"
                          :style "min-width: 69px;"
                          (label
                            :xalign "${app.count > 3 ? '0.5' : '0'}"
                            :class "onotify-app-ser"
                            :style "
                            ${app.count > 3 ? 'margin-bottom: 5px;' : 'padding: 0 5px;'}
                            "
                            :text "#${ser[0]}"
                          )
                          (box)
                          (circular-progress
                            :halign "${app.count > 3 ? 'center' : 'end'}"
                            :value {ser[1] <= 100 ? ser[1] : 100}
                            :class "onotify-app-vol-circle"
                            :thickness 4
                            :start-at 75
                            :width 45
                            :height 45
                            (label :class "onotify-app-text" :text "${ser[1]}")
                          )
                        )
                      )
                    )
                  )
                )
              )
            )
          )
        )
      )
    )
  )
)

(defwidget bottombar_bg_widget []
  (box
    :orientation "v"
    :space-evenly false
    :style "
    transition: ${anim_open_bottombar ? MD3_DECEL : MD3_ACCEL};
    ${rev_bottombar ? '' : 'margin-bottom: -500px; margin-top: 500px;'}
    "
    (box
      :class "bottombar-bg"
      :style "
      background-image: url('${mcover.image}');
      "
      (box :space-evenly false :orientation "v"
        :halign "start" :valign "start"
        :class "bottombar-musicinfo-box"
        (label :xalign 0
          :class "bottombar-title"
          :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
          :text {mname.title}
        )
        (label :xalign 0
          :class "bottombar-artist"
          :style "color: ${mcover.color.colors.color7 == 'null' ? 'white' : mcover.color.colors.color7};"
          :text "${mname.artist}"
        )
      )
    )
  )
)

(defwindow bottombar
  :stacking "fg"
  :windowtype "normal"
  :wm-ignore true
  :geometry (geometry
    :x 0
    :y 0
    :width "100%"
    :anchor "center bottom"
  )
  :monitor 0
  (bottombar_widget)
)

(defwindow bottombar-back
  :stacking "fg"
  :windowtype "normal"
  :wm-ignore true
  :namespace "bottombar-back"
  :geometry (geometry
    :x 0
    :y 0
    :width "100%"
    :anchor "center bottom"
  )
  :monitor 0
  (bottombar_bg_widget)
)

(defwindow bottomline
  :stacking "overlay"
  :windowtype "normal"
  :wm-ignore true
  :geometry (geometry
    :x 0
    :y 0
    :width "100%"
    :anchor "center bottom"
  )
  :monitor 0
  (bottomline_widget)
)