import { ref, onMounted, onUnmounted } from 'vue';
import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from './usePreviewScale.hook';

export const useScale = localStorageInfo => {
  const entityRef = ref();
  const previewRef = ref();
  const width = ref(localStorageInfo.editCanvasConfig.width);
  const height = ref(localStorageInfo.editCanvasConfig.height);

  // 屏幕适配
  onMounted(() => {
    switch (localStorageInfo.editCanvasConfig.previewScaleType) {
      case 'fit':
        (() => {
          const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(width.value, height.value, previewRef.value);
          calcRate();
          windowResize();
          onUnmounted(() => {
            unWindowResize();
          });
        })();
        break;
      case 'scrollY':
        (() => {
          const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(width.value, height.value, previewRef.value, scale => {
            const dom = entityRef.value;
            dom.style.width = `${width.value * scale.width}px`;
            dom.style.height = `${height.value * scale.height}px`;
          });
          calcRate();
          windowResize();
          onUnmounted(() => {
            unWindowResize();
          });
        })();

        break;
      case 'scrollX':
        (() => {
          const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(width.value, height.value, previewRef.value, scale => {
            const dom = entityRef.value;
            dom.style.width = `${width.value * scale.width}px`;
            dom.style.height = `${height.value * scale.height}px`;
          });
          calcRate();
          windowResize();
          onUnmounted(() => {
            unWindowResize();
          });
        })();

        break;
      case 'full':
        (() => {
          const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(width.value, height.value, previewRef.value);
          calcRate();
          windowResize();
          onUnmounted(() => {
            unWindowResize();
          });
        })();
        break;
    }
  });

  return {
    entityRef,
    previewRef
  };
};
