<script setup>
import PlayerComponent from '@/components/PlayerComponent.vue';
import { Space, Button } from 'vant';
import { postRequest } from '@/utils';
import { useBackendStateStore } from '@/stores/backendState'
import { onMounted } from 'vue';
import { usePlayerStateStore } from '@/stores/playersState';
import { QButton } from '@qvant/qui-max'


const backendStateStore = useBackendStateStore()
const playerStateStore = usePlayerStateStore()

backendStateStore.updateCanWatch()

function kill(...names) {
  postRequest("/api/commands/kill", { names })
  playerStateStore.refreshPlayers()
}

function startWatching() {
  postRequest("/api/commands/start-watching")
  playerStateStore.refreshPlayers()
}

onMounted(() => {
  backendStateStore.updateCanWatch()
})
</script>

<template>
  <div id="controls">
    <QButton class="btn-ctrl" @click="kill('mpv')" theme="secondary" :full-width="true">
      Следующая серия
    </QButton>
    <QButton class="btn-ctrl" @click="kill('awatch', 'mpv')" theme="secondary" :full-width="true">
      Закончить потребление
    </QButton>
    <QButton class="btn-ctrl" @click="startWatching()" theme="secondary"
      :disabled="!backendStateStore.backendState.canWatch" :full-width="true">
      Начать потребление
    </QButton>
  </div>
  <PlayerComponent />
</template>

<style>
#controls {
  position: relative;
  top: calc(50% - var(--van-action-bar-height));
  margin-top: calc(-50px - var(--van-action-bar-height));
  width: 100%;
}

.btn-ctrl {
  margin-bottom: 10px;
  height: 60px;
  margin-left: 0 !important;
  border-radius: 10px !important;
}
</style>