import * as React from "react";
import * as Styles from "./style";
import HierarchyList from "../HierarchyList";
import { CheckItem } from "../../types/global";
export interface ListBarProps {
    toggleItem?: (item: CheckItem) => void;
    checkedItems?: CheckItem[];
    displayItems?: CheckItem[];
    children?: React.ReactNode;
}

export const ListBar: React.StatelessComponent<ListBarProps> = props => (
    <Styles.ListWrapper>
        {React.Children.map(props.children, (child: any) => {
            if (child.props.keyPrefix) {
                return React.cloneElement(child, {
                    checkClicked: props.toggleItem,
                    items: props.checkedItems,
                    checkedItems: props.checkedItems,
                });
            } else if (child.type === HierarchyList) {
                return React.cloneElement(child, {
                    checkClicked: props.toggleItem,
                    items: props.displayItems,
                    checkedItems: props.checkedItems,
                });
            }
            return child;
        })}
    </Styles.ListWrapper>
);

export default ListBar;