import Page404 from "@/views/Auth/Page404"
import Home from "@/views/Home"
import Login from "@/views/Login"
import React, { lazy } from "react"
import useRouter from "@render/plugins/useRoute"

export const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>

let delay =
  (Comp: any, duration = 1000) =>
  () =>
    new Promise<any>(resolve =>
      Comp()
        .then((res: any) => {
          setTimeout(() => {
            resolve(res)
          }, duration)
        })
        .catch(() => {
          resolve({
            default: () => <div>Error</div>,
          })
        })
    )

const routesArray =  [
  {
    path: "/about",
    component: lazy(() => import("@/views/About")),
    exact: false,
    root: true,
    meta: {
      auth: false,
    },
    loading: () => <Loading color="red"></Loading>,
    children: [
      {
        path: "/about/test",
        exact: true,
        layout:false,
        meta: {
          auth: false,
        },
        loading: () => <Loading color="green"></Loading>,
        component: lazy(delay(() => import("@/views/Login/Test"))),
      },
    ],
  },
  {
    path: "/float",
    component: lazy(() => import("@/views/Float")),
    exact: true,
    root: true,
    layout:false,
    meta: {
      auth: false,
    },
    children: [],
  },
  {
    path: "/home",
    component: Home,//lazy(() => import("@/views/Home")),
    exact: true,
    // loading: () => <Loading color="blue"></Loading>,
    root: true,
    meta: {
      auth: false,
    },
    children: [],
  },
  {
    path: "/",
    exact: true,
    root: true,
    redirect: "/home",
  },
  {
    path: "/login",
    root: true,
    component: Login //lazy(() => import("@/views/Login")),
  },
  {
    path: "*",
    exact: false,
    root: true,
    component: Page404,
  },
]

export const useRoute = useRouter.bind(null, routesArray)

export default routesArray