import React, { useState } from 'react';
import TreeItem from './treeItem';
import { IChildren, ITree } from './types';

export const Tree = function({ options, mode, onChange }: ITree) {
    const [selected, setSelected] = useState();
    return <>{recursiveMapping(options, selected, setSelected, onChange)}</>;
};
Tree.defaultProps = {
    mode: 'select',
};
export default Tree;

function recursiveMapping(options: IChildren, selected: any, setSelected: any, onChange: any) {
    return options.map(o => (
        <TreeItem
            key={o.value}
            label={o.label}
            defaultOpen
            value={o.value}
            selected={selected === o.value}
            onChange={(value: any) => {
                setSelected(value);
                onChange && onChange(value);
            }}
        >
            {o.children && recursiveMapping(o.children, selected, setSelected, onChange)}
        </TreeItem>
    ));
}