import React, { ReactNode } from 'react';
import useNewToken from '@/Hook/useNewToken';
import style from './index.less'
import { CheckOutlined } from '@ant-design/icons';

export type NewStepsItem = {
    title: ReactNode
    description?: ReactNode
    children?: NewStepsItem[]
    checked?: boolean
    isLeaf?: boolean
    id?: string
    onChange?: (item: NewStepsItem) => void
}

interface NewStepsProps {
    items: NewStepsItem[]
    isLeaf?: boolean
    onChange?: (item: NewStepsItem, falterItem?: NewStepsItem) => void
}

/**
 * 自定义步骤条
 * @param param0 
 * @returns 
 */
const NewSteps: React.FC<NewStepsProps> = ({ items = [], onChange, isLeaf }) => {

    /***************************************/
    const { token } = useNewToken()
    /***************************************/

    return <div className={style.newSteps} style={{ '--color': token.colorPrimary } as React.CSSProperties}>
        {items.map((i, index) => <div
            className={`${style['newSteps-item']} ${i.checked ? style['newSteps-item-active'] : ''} ${i.children ? style['newSteps-item-children'] : ''} ${isLeaf ? style['newSteps-item-leaf'] : ''}`}
            key={index}
        >
            <div className={style['newSteps-item-tail']}></div>
            <div className={style['newSteps-item-icon']}>
                <span className={style['newSteps-icon']}>
                    {i.checked ? <CheckOutlined /> : index + 1}
                </span>
            </div>
            <div className={style['newSteps-item-content']}>
                <div
                    className={style['newSteps-item-content-text']}
                    onClick={(e) => {
                        e.stopPropagation()
                        onChange?.(i)
                    }}
                >
                    <div className={style['newSteps-item-title']}>{i.title}</div>
                    {i?.description && <div className={style['newSteps-item-description']}>{i.description}</div>}
                </div>
                {i.children && <div style={{ marginTop: 20 }}>
                    <NewSteps items={i.children} onChange={(e, f) => onChange?.(e, f)} isLeaf={true} />
                </div>}
            </div>
        </div>)}
    </div>;
};

export default React.memo(NewSteps);