import React, { useState, useEffect } from 'react'
import { history, Outlet, useLocation, matchRoutes } from '@umijs/max'
import { Menu, Tabs } from 'antd'
import './SystemContentList.less'
import { formatRoute, getDefaultRoute } from '@/utils/routeUtils'
import {
    conversationStore,
  } from '@/utils/pageConversationStore'
  import { renderPageContent } from '../topnavbar/form/RenderPageContentForm'



const SystemContentList = (props) => {  
    const dynamicRoute = window.dynamicRoute
    const [expandedPage, setExpandedPage] = useState('conversation')
    const conversationExpanded = expandedPage === 'conversation'
    
    const toggleExpand = (page) => {
      setExpandedPage(prev => prev === page ? null : page)
    }
    const [conversationConversations, setConversationConversations] = useState(conversationStore.getConversations())
    const location = useLocation()
    const pathName = location.pathname
    const [openKey, setOpenKey] = useState([])
    const [selectedKey, setSelectedKey] = useState([])
    const [menuItems, setMenuItems] = useState([])
    let defaultKey = ''

    useEffect(() => {
        if (!dynamicRoute || dynamicRoute?.length === 0) return
        let newList = []
        let routes = []

        if (dynamicRoute?.length) {
            let tempRoute = dynamicRoute?.filter(item => pathName.indexOf(item.key) !== -1) ?? []

            newList = formatRoute(tempRoute[0]?.children)
            routes = formatRoute(tempRoute[0]?.children, true)
            defaultKey = getDefaultRoute(routes)
            const mathRoute = matchRoutes(routes, pathName)

            setRouteActive({ key: mathRoute?.length ? pathName : defaultKey }, routes)
        }

        setMenuItems(newList)
    }, [pathName])

    useEffect(() => {
        const unsubscribeConversation = conversationStore.subscribe(({ conversations }) => {
          setConversationConversations(conversations)
        })
      
        return () => {
          unsubscribeConversation()
        }
      }, [])

    const setRouteActive = (value, menu) => {
        const curKey = value.key
        const tempMenu = menu ?? menuItems ?? []
        const mathRoute = matchRoutes(tempMenu, curKey)
        let openKeys = []
        let selectedKeys = []

        mathRoute?.map((item, index) => {
            mathRoute?.length !== index + 1 && (openKeys = [...openKeys, item.pathname])
            mathRoute?.length === index + 1 && (selectedKeys = [...selectedKeys, item.pathname])
        })

        setOpenKey(openKeys)
        setSelectedKey(selectedKeys)
        history.replace(curKey)
    }

    return (
        <div className='pageContainer systemContent' style={{height:'100vh',maxWidth:'1200px',margin:'15px auto',padding:'15px'}}>
            <div style={{display:'flex',height:'100%'}}>
                <div className='leftMenu' style={{width:'200px'}}>
                    <Menu
                        openKeys={openKey}
                        selectedKeys={selectedKey}
                        items={menuItems}
                        onClick={value => setRouteActive(value)}
                        onOpenChange={value => setOpenKey(value)}
                        mode='vertical'
                    />
                    {/* 这是历史会话 */}
                   <div className='contentHistory'>
        {renderPageContent('conversation', conversationConversations, conversationExpanded)}
      </div>
                </div>

                <div className='rightContentMain'>
                    <Outlet />
                </div>
            </div>
        </div>
    )
}

export default SystemContentList