(defwidget BarMediaPlayer [?cover]
  (eventbox
    :cursor "pointer"
    
    (box
      :class "bar-media-player"
      :orientation "v"
      :space-evenly false
      :spacing spacing-default
      
      (eventbox
        :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
        :visible cover
        
        (image :path { music_cover == "" ? "./assets/image/emptympd.png" : music_cover } :image-width 20 :image-height 20))
      
      (box
        :class "player-controls"
        :orientation "v"
        :space-evenly false
        :spacing spacing-default
        
        
        (button :onclick "playerctl previous"
          (label :text "󰒮"))
        (button :onclick "playerctl play-pause"
          (label :text  { music_status == "Playing" ? "" : ""}))
        (button :onclick "playerctl next"
          (label :text "󰒭"))))))

(defwidget MediaPlayer [height]
  (box
    :class "media-player"
    (overlay
      (box
        :orientation "v"
        :halign "fill"
        :height {height}
        :class { music_cover != "" ? "player-cover" : ""}
        :style "background-image: url('${music_cover}')")
      
      (box
        :orientation "h"
        :space-evenly false
        :halign "center"
        :valign "center"
        :spacing spacing-large
        
        (image :image-width 100 :image-height 100 :path { music_cover == "" ? "./assets/image/emptympd.png" : music_cover })
        
        (box
          :orientation "v"
          :space-evenly false
          :width 200
          :halign "center"
          :valign "center"
          :class "player-info"
          :spacing spacing-small
          
          (box
            :orientation "v"
            :space-evenly false
            :visible true
            
            (scroll
              :hscroll true
              :vscroll false
              (label :text music_title))
            
            (scroll
              :hscroll true
              :vscroll false
              (label :text music_artist))
          )
          
          (box
            :orientation "h"
            :class "player-controls"
            (button :onclick "playerctl previous"
              (label :text "󰒮"))
            (button :onclick "playerctl play-pause"
              (label :text { music_status == "Playing" ? "" : ""} ))
            (button :onclick "playerctl next"
              (label :text "󰒭"))))))
  )
)


(defwindow MusicPlayerPopup
  :geometry (geometry
    :width "440"
    :height "200"
  :anchor "center left")
  :stacking "overlay"
  :monitor 0
  (box
    :class "popup"
    (box
      :orientation "h"
      :class "widget"
      :space-evenly false
      :spacing 20
      (image :style "margin: 5px;" :image-height 190 :image-width 190 :path { music_cover == "" ? "./assets/image/emptympd.png" : music_cover})
      (box
        :orientation "v"
        :space-evenly false
        :width 210
        :height 200
        (scroll
          :hscroll true
          :vscroll false
          (label :class "mtitle" :text music_title))
        (scroll
          :hscroll true
          :vscroll false
          (label :class "mauthor" :text music_artist))
        (box
          :orientation "h"
          :class "mpd_controls"
          :style "margin-top: 10px;"
          (button :onclick "playerctl previous"
            (label :text "󰒮"))
          (button :style "padding-right: 3px;" :onclick "playerctl play-pause"
            (label :text { music_status == "Playing" ? "" : ""}))
          (button :onclick "playerctl next" (label :text "󰒭")))
        (scale
          :class "seektime"
          :value { music_time.position}
          :orientation "h"
          ;; :onchange "playerctl position {}"
          :min 0
          :max { music_time.duration}
        :tooltip { music_time.readable})))))
