import { View } from "@tarojs/components";
import Taro, { FC } from "@tarojs/taro";
import { AtProgress } from "taro-ui";
import { useEffect } from "react";
import { usePreloader } from "../../hooks/usePreloader";
import "./index.scss";

export interface LoadingPageProps {}

const getList = () => {
  const list: string[] = [];

  for (let i = 1; i <= 26; i++) {
    list.push(
      `https://houseoss.4dkankan.com/project/wx-csbwg-public/line-sights/${i}.png`,
      `https://houseoss.4dkankan.com/project/wx-csbwg-public/sights/${i}.png`
    );
  }

  return list;
};

export const LoadingPage: FC<LoadingPageProps> = () => {
  const { start, percent } = usePreloader({
    list: [...getList()],
    success() {
      setInterval(() => {
        Taro.switchTab({
          url: "/pages/home/index",
        });
      }, 500);
    },
  });

  useEffect(() => {
    start();
  }, []);

  return (
    <View className="loading-page">
      <View className="loading-main margin-safe-area-bottom">
        <View className="loading-progress">
          <AtProgress
            percent={Number(percent)}
            isHidePercent={true}
            color="#FF8888"
          />
        </View>

        <View className="loading-main__txt">LOADING...</View>
      </View>
    </View>
  );
};
