<template>
  <div
    class="window_class window_flag"
    :class="
      $props.window.uuid == $store.state.selected_window
        ? 'window_selected'
        : 'window_normal'
    "
    @mousedown="onMouseDown"
    @click="onClick"
    @touchend="onTouchEnd"
    :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('replace_this_window', $props.window.window_id)"
        >
          <q-item-section> {{ $t("replace window") }} </q-item-section>
        </q-item>
        <q-item
          clickable
          v-if="$store.state.isLedPlayer()"
          v-close-popup
          :disable="$props.disable"
          @click="$emit('edit_rect', $props.window.window_id)"
        >
          <q-item-section> {{ $t("edit window rect") }} </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 windows") }} </q-item-section>
        </q-item>
        <q-item clickable v-if="false">
          <q-item-section>{{ $t("trimming window") }}</q-item-section>
          <q-item-section side>
            <q-icon name="keyboard_arrow_right" />
          </q-item-section>

          <q-menu anchor="top end" self="top start">
            <q-list>
              <q-item v-close-popup :disable="$props.disable" clickable>
                <q-item-section>{{ $t("trimming window pos") }}</q-item-section>
              </q-item>
              <q-item v-close-popup :disable="$props.disable" clickable>
                <q-item-section>{{
                  $t("trimming window size")
                }}</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </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>
          <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
            v-if="show_pollong_setting_context_menu"
            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 GlobalData from "src/common/GlobalData";
import { defineComponent, ref, watch, computed, getCurrentInstance } 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,
    },
    plan_running: {
      type: Boolean,
    },
    show_pollong_setting_context_menu: {
      type: Boolean,
      default: false,
    },
  },
  emits: [
    "close_this_window",
    "close_other_windows",
    "close_all_windows",
    "replace_this_window",
    "top_window",
    "lower_window",
    "edit_volume",
    "mute_unmute",
    "stop_polling",
    "start_polling",
    "polling_setting",
    "dbtouch",
    "edit_rect",
  ],
  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)
    );

    watch(
      () => props.window,
      (n, o) => {
        reload_signal_source();
      }
    );
    reload_signal_source();

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

    let prev_touch_time = 0;

    const onclick = (evt: UIEvent) => {
      if (props.plan_running) {
        return;
      }
      if (ctrl_press_flag) {
        ctrl_press_flag = false;
        return;
      }
      if (!props.mouse_area_flag) {
        // evt.stopPropagation();
        if (props.window.uuid != $store.state.selected_window) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.focusIn(props.window.window_id);
        }
        $store.commit("setSelectedWindow", props.window.uuid);
      }
    };

    return {
      signal_source,
      flags,
      is_audo_player_window,

      calc_is_audio_player_window,
      onMouseDown(evt: MouseEvent) {
        if (evt.ctrlKey) {
          ctrl_press_flag = true;
        }
      },
      onTouchEnd(evt: TouchEvent) {
        if ((<any>window).touchPriority) {
          let time = Date.now();
          if (time - prev_touch_time < 300) {
            emit("dbtouch");
          } else {
            onclick(evt);
          }
          prev_touch_time = time;
        }
      },
      onClick(evt: MouseEvent) {
        if ((<any>window).touchPriority) {
          return;
        }
        onclick(evt);
      },

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