/**
 * 用于 page 根目录的样式等设置
 */
import { View, Video, Image } from "@tarojs/components";
import React, { useEffect, useState } from "react";
import pageStyle from "./index.module.less";

import { useAppStore } from "@/store/appStore";
import { DEFAULT_AVATAR_BG } from '@/config'
interface Props {
  styleBg?: string|null;
}

const Index: React.FC<Props> = ({styleBg}) => {
  // 自定义背景样式
  const {windowHeight, windowWidth} = useAppStore()
  // const [offsetMargin, setOffsetMargin] = useState({ x: 0, y: 0 });
  // const [bgSize, setBgSize] = useState({ width: windowWidth, height: windowHeight });

  const  bg =  styleBg || ''  
  
  const bgImageStyle = {
    height: `${(750 / windowWidth) * windowHeight}rpx`,
    backgroundImage: `url(${bg})`,
    backgroundSize: 'auto 100%!important',
    backgroundPosition: 'center center'
  };

  const isMp4 = bg?.lastIndexOf('.mp4') > -1

  //todo: 无法计算图的大小来设置位置，因为获取图片宽，高信息需要异步获取
  if(!bg) {
    return <></>
  }

  // 如果是默认背景
  if(bg === DEFAULT_AVATAR_BG){
    return <View className={pageStyle.bg} style={bgImageStyle}></View>
  }

  if(isMp4){ 
    return <Video
      controls={false}
      showCenterPlayBtn={false}
      loop={true}
      muted={true}
      autoplay
      objectFit="cover"
      className={pageStyle.bg}
      style={bgImageStyle}
      src={bg}
    />
  }

  
  
  return <Image className={pageStyle.bg} style={bgImageStyle} src={bg} mode='aspectFill'></Image>
};

export default Index;
