import React, { ReactElement } from "react"
import style from "./index.module.scss"
import { useLocation } from "react-router-dom"
import { Icon } from "@blueprintjs/core"
import route from "@render/route"

// interface IProps {
//   render(): ReactElement
// }

function foundRoute(route:any, name:string, arrIndex?: number[]):any{
  if(!arrIndex){
    arrIndex = []
  }
  for (let i = 0; i < route.length; i++) {
    const element = route[i];
    if(element.root){
      arrIndex = []
    }
    arrIndex.push(i);
    let lena = element.path.split("/").length
    let lenb =name.split("/").length
    console.log(element.path, name,lena,lenb, element.path == name && lena==lenb);
    if(element.path == name && lena==lenb){
      return arrIndex
    } else if(element.children){
      let a = foundRoute(element.children, name, arrIndex);
      if(a){
        return a
      }
    }
  }
}

export default function (props: any) {
  const {pathname} = useLocation()

  console.log(pathname);
  console.log(route);
  let oroute = JSON.parse(JSON.stringify(route))
  let index = foundRoute(route, pathname)
  console.log(index);
  let isLayout = true;
  if(index&&index.length){
    let res = oroute[index[0]];
    let cur = res;
    for (let i = 1; i < index.length; i++) {
      const element = index[i];
      cur.children = [cur.children[element]]
      cur = cur.children[element]
    }
    if(cur){
      cur.children = [];
    }
    console.log(cur);
    if(cur.layout!=undefined){
      isLayout = !!cur.layout
    }
    console.log(res);
  }
  
  return (
    isLayout?(
      <div className={style.Layout}>
      <div className={style.left}>
        <div className={style.leftList}>
          <div className={style.leftItem} title={"添加闹钟"}>
            <Icon icon="time" size={20}/>
            <div>闹钟</div>
          </div>
        </div>
        <div className={style.leftListBottom}>
          <div className={style.leftItem} title={"设置"}>
            <Icon icon="settings" size={20} />
          </div>
        </div>
      </div>
      <div className={style.right}>
        <props.render></props.render>
      </div>
      <div>sad</div>
    </div>
    ):(<props.render></props.render>)
  )
}