<script setup>
import {
  MetroWidget,
  VERTICAL,
  useFocusHub,
} from "jsview";
import Item from "./Item.vue";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import data from "./data.js";

const router = useRouter();
const focusHub = useFocusHub();

const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: 10,
    marginBottom: 10,
  };
};

const onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router.go(-1);
  }
  return true;
};

const provideData = () => {
  return data;
};

onMounted(() => {
  focusHub.setFocus("myFocusWidget");
});
</script>

<template>
  <jsv-focus-block
    ref="focusNode"
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#007788',
    }"
    :onKeyDown="onKeyDown"
  >
    <metro-widget
      name="myFocusWidget"
      :top="50"
      :left="50"
      :width="1000"
      :height="550"
      :direction="VERTICAL"
      :provideData="provideData"
      :measures="measures"
      :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
      :enableItemRenderBreak="true"
      :placeHolderSetting="{
        backgroundColor: 'rgba(78,105,127, 0.8)',
        focusBackgroundColor: '#770088aa',
        borderRadius: 10,
        gap: 10,
      }"
    >
      <template #renderItem="{ data, query, onEdge, onAction }">
        <item
          :data="data"
          :query="query"
          :onEdge="onEdge"
          :onAction="onAction"
        />
      </template>
    </metro-widget>
  </jsv-focus-block>
</template>
