<template>
  <div
    class="aplayer-pic"
    :style="{backgroundColor: theme}"
    @mousedown="onDragBegin"
    @click="onClick"
  >
    <img v-if="pic" ref="thumbnailPic" :src="pic" @load="imgLoad" />
    <div class="aplayer-button" :class="playing ? 'aplayer-pause' : 'aplayer-play'">
      <icon-button
        :icon="playing ? 'pause' : 'play'"
        :class="playing ? 'aplayer-icon-pause' : 'aplayer-icon-play'"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import IconButton from './aplayer-iconbutton.vue'
import { themeColor } from '../utils'

const props = withDefaults(defineProps<{
  pic?: string
  theme: string
  playing: boolean
  enableDrag: boolean
}>(), {
  playing: false,
  enableDrag: false
})

const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay', 'adaptingTheme'])

const hasMovedSinceMouseDown = ref(false)
const dragStartX = ref(0)
const dragStartY = ref(0)
const thumbnailPic = ref<unknown>(null)

const onDragBegin = (e: MouseEvent) => {
  if (props.enableDrag) {
    hasMovedSinceMouseDown.value = false
    emit('dragbegin')
    dragStartX.value = e.clientX
    dragStartY.value = e.clientY
    document.addEventListener('mousemove', onDocumentMouseMove)
    document.addEventListener('mouseup', onDocumentMouseUp)
  }
}
const onDocumentMouseMove = (e: MouseEvent) => {
  hasMovedSinceMouseDown.value = true
  emit('dragging', {offsetLeft: e.clientX - dragStartX.value, offsetTop: e.clientY - dragStartY.value})
}
const onDocumentMouseUp = () => {
  document.removeEventListener('mouseup', onDocumentMouseUp)
  document.removeEventListener('mousemove', onDocumentMouseMove)
  emit('dragend')
}
const onClick = () => {
  if (!hasMovedSinceMouseDown.value) {
    emit('toggleplay')
  }
}
const imgLoad = () => {
  const color = themeColor(<HTMLImageElement>thumbnailPic.value)
  emit('adaptingTheme', `rgb(${color.r},${color.g},${color.b})`)
}
watch(() => props.pic, (pic?: string) => {
  if (!pic) emit('adaptingTheme', null)
}, { immediate: true })
</script>

<style lang="less" scoped>
@import "../less/variables";
.aplayer-float {
  .aplayer-pic:active {
    cursor: move;
  }
}
.aplayer-pic {
  flex-shrink: 0;
  position: relative;
  height: @aplayer-height;
  width: @aplayer-height;
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    .aplayer-button {
      opacity: 1;
    }
  }
  .aplayer-button {
    position: absolute;
    border-radius: 50%;
    opacity: 0.8;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
    .aplayer-fill {
      fill: #fff;
    }
  }
  .aplayer-play {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    bottom: 50%;
    right: 50%;
    margin: 0 -15px -15px 0;
    .aplayer-icon-play {
      position: absolute;
      top: 3px;
      left: 4px;
      height: 20px;
      width: 20px;
    }
  }
  .aplayer-pause {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    bottom: 4px;
    right: 4px;
    .aplayer-icon-pause {
      position: absolute;
      top: 2px;
      left: 2px;
      height: 12px;
      width: 12px;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>