import React, { useState, createContext } from 'react'
import cx from 'classnames'
import { IMenuProps, menuType, IMenuContext, IMenuItemProps } from './common'
import { MenuContext } from './conText'



const Menu: React.FC<IMenuProps> = (props) => {
    const { style, color, className, activeIndex, type, onSelect, children, ...restProps } = props
    
    const classes = cx(
        'menu', 
        className, 
        {   [`menu-${type}`]: type,
            [`menu-${style}`]:style,
            [`menu-horizontal`]:Boolean(type!=='vertical')
        })
    const [index, setindex] = useState(activeIndex)
    const handle = (index: number) => {
        setindex(index)
        if (onSelect) {
            onSelect(index)
        }
    }
    const value: IMenuContext = {
        activeIndex: index!, //感嘆號非空，強行告訴編譯器，我這個activeInedx不是空的
        onSelect: handle
    }
    //代碼升級
    const renderChildren = () => {
        return React.Children.map(children, (child, index) => {
            const chlidElement = child as React.FunctionComponentElement<IMenuItemProps>
            if (chlidElement?.type?.displayName !== 'MenuItem') {//傳入的子組件不是MenuItem就報錯
                console.error('Waring: Menu has a child which is not a MenuItem')
            } else {
                return React.cloneElement(chlidElement, {
                    //每次都要傳入index,甚是麻煩，cloneElement,可以複製節點並且附加上屬性，前提是IMenuItemProps裏面有定義的
                    index
                })
            }
        })
    }
    return <ul className={classes} {...restProps} data-testid="test-menu">
        <MenuContext.Provider value={value}>
            {renderChildren()}
        </MenuContext.Provider>
    </ul>
}


Menu.defaultProps = {
    activeIndex: 0,
    type: menuType.Horizontal,
}


export default Menu

import React, { useContext } from 'react'
import cx from 'classnames'
import {MenuContext}  from './conText'
import {IMenuItemProps} from './common'

const MenuItem: React.FC<IMenuItemProps> = (props) => {
    const {index, classNames, disabled, style, children, ...restProps } = props
    const value = useContext(MenuContext);
    const {activeIndex, onSelect} = value
    const classes = cx('menu-item',classNames,{'menu-item-disabled':disabled,'menu-item-active':Boolean(activeIndex===index)})
    const handleClick = () => {
        if(onSelect && !disabled &&(typeof index === 'number')){
            onSelect(index)
        }
    }
    return (
        <li className={classes} style= {style} onClick={handleClick} {...restProps}>{children}</li>
    )
}
MenuItem.defaultProps = {
    disabled:false
}
MenuItem.displayName = 'MenuItem'
export default MenuItem