<script lang="ts" setup>
  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
  import { option } from './config';
  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
  import { computed } from 'vue';
  import { VideoJsPlayerOptions } from 'video.js';
  import { AccessMode } from '/@/views/camera/manage/config.data';
  import { onMounted } from 'vue';
  import { unref } from 'vue';
  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
  import { ref } from 'vue';
  import { Spin } from 'ant-design-vue';

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

  const loading = ref(true);

  const getIsSelectPreviewMode = computed(() => {
    return props.config.option.mode === ComponentMode.SELECT_PREVIEW;
  });

  const getIsStreamingMode = computed(() => {
    const { option } = props.config;
    const { videoConfig } = option;
    return videoConfig?.accessMode === AccessMode.Streaming;
  });

  const playSource = ref<Record<'src' | 'type', string>>(
    {} as unknown as Record<'src' | 'type', string>
  );

  const exampleVideoPlay =
    'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm';

  const getVideoPlaySources = computed(() => {
    const { option } = props.config;
    const { videoConfig } = option;
    const { url } = videoConfig || {};
    return Object.assign(
      {
        src: unref(getIsSelectPreviewMode) ? exampleVideoPlay : url,
        type: getVideoTypeByUrl(url || ''),
      },
      unref(playSource)
    );
  });

  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: unref(getVideoPlaySources).src
        ? ([unref(getVideoPlaySources)] as VideoJsPlayerOptions['sources'])
        : [],
    };
  });

  const handleGetVideoPlayUrl = async () => {
    try {
      if (unref(getIsStreamingMode) && !unref(getVideoPlaySources).src) {
        const { option } = props.config;
        const { videoConfig } = option;
        if (!videoConfig?.id) return;
        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(videoConfig?.id);
        playSource.value = {
          src: url,
          type: getVideoTypeByUrl(url),
        };
      }
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    handleGetVideoPlayUrl();
  });
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center p-2">
    <Spin :spinning="loading" wrapper-class-name="video-spin">
      <BasicVideoPlay :options="getOptions" />
    </Spin>
  </main>
</template>

<style lang="less" scoped>
  .video-spin {
    @apply w-full h-full;

    :deep(.ant-spin-container) {
      @apply w-full h-full;
    }
  }
</style>