import { Icon, IconName } from "@blueprintjs/core"
import route, { useRoute } from "@render/route"
import React, { Fragment } from "react"
import { NavLink, useLocation } from "react-router-dom"
import style from "./index.module.scss"
import cs from "classnames"

function ActionItem(){
  
}

export default function Layout(props: any) {
  let isLayout = true
  let [curRoute, routeList] = useRoute()
  if (curRoute.layout != undefined) {
    isLayout = !!curRoute.layout
  }

  interface TList {
    icon: IconName
    path: string
    title: string
    text: string
  }
  const list: TList[] = [
    {
      path: "/home",
      icon: "time",
      title: "首页",
      text: "首页",
    },
    {
      path: "/about",
      icon: "mugshot",
      title: "添加闹钟",
      text: "关于",
    },
  ]

  return (
    <div className={cs(style.Layout, !isLayout ? style.NoLayout : "")}>
      <div className={style.left}>
        <div className={style.leftList}>
          {list.map((v, i) => (
            <NavLink key={i} replace to={v.path} style={{ display: "block" }}>
              <div className={style.leftItem} title={v.title}>
                <Icon icon={v.icon} size={22} />
                <div>{v.text}</div>
                {v.path == curRoute.path && <div className={style.activeLine}></div>}
              </div>
            </NavLink>
          ))}
        </div>
        <div className={style.leftListBottom}>
          <div className={style.leftItem} title={"设置"}>
            <Icon icon="settings" size={22} />
          </div>
          <div className={style.leftItem} title={"设置"}>
            <Icon icon="settings" size={22} />
          </div>
        </div>
      </div>
      <div className={style.right}>
        <props.render></props.render>
      </div>
    </div>
  )
}