"use client";

import {Flex} from "antd";

import {getCookie} from "cookies-next";
import {useRouter} from "next/navigation";
import {useEffect, useState} from "react";

import PuffLoader from "react-spinners/PuffLoader";

import styles from "./page.module.css";
import {displayModeIsDark} from "./_modules/func";

//浅色
const lightColor = "white";
//深色
const darkColor = "black";
//主要颜色
const color = "#1677ff";

export default function Home() {
  const { push } = useRouter();

  //是否深色模式
  const [backgroundColor, setBackgroundColor] = useState(lightColor);

  useEffect(() => {
    const token = getCookie("token");
    if (token === "") {
      push("/login");
    } else {
      push("/home");
    }

    setBackgroundColor(displayModeIsDark() ? darkColor : lightColor);
  }, []);

  return (
    <Flex
      vertical
      className={styles.bodyContent}
      style={{ backgroundColor: backgroundColor }}
      justify="center"
      align="center"
    >
      <PuffLoader
        color={color}
        loading={true}
        size={150}
        aria-label="Loading"
      />
      <span style={{ color: color, marginTop: "16px" }}>
        正在加载...请稍后...
      </span>
    </Flex>
  );
}