<template>
  <div
    class="window_class window_flag"
    :class="
      $props.window.uuid == $store.state.selected_window
        ? 'window_selected'
        : 'window_normal'
    "
    @mousedown="onMouseDown"
    @click="onClick"
    :style="{
      background: $props.window.client_color,
    }"
  >
    <q-popup-proxy context-menu>
      <q-list>
        <q-item
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('edit_volume', $props.window.window_id)"
          v-if="false && !$props.window.muted && is_audo_player_window"
        >
          <q-item-section> {{ $t("edit volume") }} </q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('mute_unmute', $props.window.window_id)"
          v-if="false && is_audo_player_window"
        >
          <q-item-section>
            {{ $props.window.muted ? $t("unmute") : $t("mute") }}
          </q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('close_this_window', $props.window.window_id)"
        >
          <q-item-section> {{ $t("close this window") }} </q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('close_other_windows', $props.window.window_id)"
        >
          <q-item-section>
            {{ $t("close other windows") }}
          </q-item-section>
        </q-item>
        <q-item
          v-if="false"
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('close_all_windows', $props.window.window_id)"
        >
          <q-item-section> {{ $t("close all windwos") }} </q-item-section>
        </q-item>
        <q-item
          v-if="false"
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('top_window', $props.window.window_id)"
        >
          <q-item-section>
            {{ $t("top window") }}
          </q-item-section>
        </q-item>
        <q-item
          v-if="false"
          clickable
          v-close-popup
          :disable="$props.disable"
          @click="$emit('lower_window', $props.window.window_id)"
        >
          <q-item-section>
            {{ $t("lower window") }}
          </q-item-section>
        </q-item>
        <div v-if="!is_clock_window">
          <q-item
            clickable
            v-close-popup
            :disable="$props.disable"
            @click="$emit('start_polling', $props.window.window_id)"
            v-if="!$props.window.polling"
          >
            <q-item-section> {{ $t("start polling") }} </q-item-section>
          </q-item>
          <q-item
            clickable
            v-close-popup
            :disable="$props.disable"
            @click="$emit('stop_polling', $props.window.window_id)"
            v-else
          >
            <q-item-section>
              {{ $t("stop polling") }}
            </q-item-section>
          </q-item>
          <q-item
            clickable
            v-close-popup
            :disable="$props.disable || $props.window.polling"
            @click="$emit('polling_setting', $props.window.window_id)"
          >
            <q-item-section> {{ $t("polling setting") }} </q-item-section>
          </q-item>
        </div>
      </q-list>
    </q-popup-proxy>
    <div class="row title_bar full-width">
      <q-icon
        size="1.5em"
        :name="
          getItemIcon(
            $props.window.polling
              ? $props.window.polling_window_type
              : signal_source.window_type
          )
        "
        class="q-mr-xs"
      />
      <span v-if="$props.window.polling">{{
        $props.window.polling_title
      }}</span>
      <span v-else>{{ signal_source.name }}</span>
      <q-space />
      <div>
        <q-spinner-box
          v-if="$props.window.polling"
          color="primary"
          size="1.5em"
        />
        <q-tooltip>{{ $t("polling now") }}</q-tooltip>
      </div>
      <div>
        <q-icon
          v-if="
            $props.window.polling
              ? calc_is_audio_player_window($props.window.polling_window_type)
              : is_audo_player_window
          "
          size="1.5em"
          :name="$props.window.muted ? 'volume_off' : 'volume_up'"
        />
        <q-tooltip>{{
          $t($props.window.muted ? "muted now" : "unmuted now")
        }}</q-tooltip>
      </div>
    </div>
  </div>
</template>

<style scoped>
.window_class {
}

.window_flag {
}

.window_selected {
  outline-style: dashed;
  outline-color: #166fab;
}

.window_normal {
  border: 1px solid #166fab;
}

.title_bar {
  border: 1px solid black;
}

.top {
  z-index: 1;
}
</style>

<script lang="ts">
import { Common } from "src/common/Common";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import GlobalData from "src/common/GlobalData";
import { defineComponent, ref, watch, onUnmounted, computed } from "vue";
import { useStore } from "src/store";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";

class _Flags {
  get up_flag() {
    return 0x0001;
  }
  get down_flag() {
    return 0x0002;
  }
  get left_flag() {
    return 0x0004;
  }
  get right_flag() {
    return 0x0008;
  }
}

export default defineComponent({
  name: "ComponentWindow",

  components: {},
  props: {
    signal_source_table_uuid: {
      type: String,
      required: true,
    },
    window: {
      type: Object,
      required: true,
    },
    disable: {
      type: Boolean,
    },
    mouse_area_flag: {
      type: Boolean,
    },
  },
  emits: [
    "close_this_window",
    "close_other_windows",
    "close_all_windows",
    "top_window",
    "lower_window",
    "edit_volume",
    "mute_unmute",
    "stop_polling",
    "start_polling",
    "polling_setting",
  ],
  setup(props, { emit }) {
    const $store = useStore();

    const signal_source = ref(new SignalSourceEntity());

    const reload_signal_source = () => {
      SignalSourceEntity.copy(
        signal_source.value,
        GlobalData.getInstance().getSignalSource(props.signal_source_table_uuid)
      );
    };

    const calc_is_audio_player_window = (window_type: string) => {
      return (
        window_type == "EwindowType::Multimedia" ||
        window_type == "EwindowType::Rtsp" ||
        window_type == "EwindowType::HdmiIn"
      );
    };

    const is_audo_player_window = computed(() =>
      calc_is_audio_player_window(signal_source.value.window_type)
    );

    const is_clock_window = computed(() => {
      return signal_source.value.window_type == "EwindowType::Clock";
    });

    reload_signal_source();

    const flags = new _Flags();
    let ctrl_press_flag = false;

    return {
      signal_source,
      flags,
      is_audo_player_window,
      is_clock_window,

      calc_is_audio_player_window,
      onMouseDown(evt: MouseEvent) {
        if (evt.ctrlKey) {
          ctrl_press_flag = true;
        }
      },
      onClick(evt: MouseEvent) {
        if (ctrl_press_flag) {
          ctrl_press_flag = false;
          return;
        }
        if (!props.mouse_area_flag) {
          evt.stopPropagation();
          $store.commit("setSelectedWindow", props.window.uuid);
        }
      },

      getItemIcon(item_type: string) {
        return Common.getSignalSourceIcon(item_type);
      },
    };
  },
});
</script>
