<template>
  <q-dialog
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card
      class="overflow-hidden"
      style="overflow-y: scroll; max-width: 60vw; max-height: 40vh"
    >
      <q-card-section style="width: 30vw; height: 10vh">
        <q-item>
          <q-item-section avatar>{{ $t("volume") }} :</q-item-section>
          <q-item-section>
            <q-slider
              v-model="volume"
              :min="0"
              :max="100"
              label
              label-always
              @change="volume_changed"
            />
          </q-item-section>
        </q-item>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import { useQuasar, date, copyToClipboard } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";

export default defineComponent({
  name: "ComponentEditVolumeDialog",

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);
    let volume = ref(0);

    let window_id = 0;
    return {
      loading,
      show_dialog,
      volume,

      showDialog(_window_id: number, _volume: number) {
        if (_volume < 0) {
          _volume = 0;
        }
        if (_volume > 100) {
          _volume = 100;
        }
        window_id = _window_id;
        volume.value = _volume;
        show_dialog.value = true;
      },
      volume_changed(val: number) {
        GlobalData.getInstance()
          .getCurrentClient()
          ?.setWindowVolume(window_id, volume.value);
      },
    };
  },
});
</script>
