<script lang="ts" setup>
  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
  import { option } from './config';
  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
  import { BasicVideoPlay } from '/@/components/Video';
  import { computed } from 'vue';
  import { VideoJsPlayerOptions } from 'video.js';

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const getOptions = computed<VideoJsPlayerOptions>(() => {
    const { option } = props.config;
    const { itemHeightRatio, itemWidthRatio, widthPx, heightPx } = option;
    const currentW = widthPx * (itemWidthRatio / 100);
    const currentH = heightPx * (itemHeightRatio / 100);
    return {
      width: currentW - 8,
      height: currentH - 8,
      sources: [
        {
          src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
        },
      ],
    };
  });

  const updateFn: DataFetchUpdateFn = (_message) => {};

  useDataFetch(props, updateFn);
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center p-2">
    <BasicVideoPlay :options="getOptions" />
  </main>
</template>