import React from 'react'
import config from '../router.config'
import { Link, useHistory, useRouteMatch } from 'react-router-dom'
import style from './style.module.css'
import { RouteProps } from '../@types'
import { fullRouteParams } from '../util'

function Slide(props: RouteProps) {
  const match = useRouteMatch()
  const sid = (match?.params as any).sid
  const history = useHistory()
  let router = config.filter(item => item.navigation)
  let query = (item: any, currItem: any) : boolean => {
    if (!currItem) return false
    if (currItem === item) return true
    if (currItem.parent) {
      return query(item, currItem.parent)
    } else {
      return false
    }
  }
  const currItem = props.match && config.find(item => item.path === props.match.path)

  if (!sid) {
    history.push('/scene')
  }

  return (
    <div className={style.slidelayer + ' ' + props.className}>
      {router.map(item => (
        <Link to={fullRouteParams(item.path, {sid})} key={item.path} className={query(item, currItem) ? style.active : ''} >
          <img src={item.icon} alt={item.icon} />
          {item.title}
        </Link>
      ))}
    </div>
  )
}

export default Slide