// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { useHeadlessFlatTree_unstable } from "@coreai-ds/react-components";
import type { HeadlessFlatTreeItemProps } from "@coreai-ds/react-components";
import { FlatTree } from "@coreai-ds/react-components";
import { FlatTreeItem } from "@coreai-ds/react-components";
import { TreeItemLayout } from "@coreai-ds/react-components";
import * as React from 'react';

type CustomItem = HeadlessFlatTreeItemProps & {
    content: string;
};

const items: CustomItem[] = [
    { value: '1', content: 'Level 1, item 1' },
    { value: '1-1', parentValue: '1', content: 'Level 2, item 1' },
    { value: '1-2', parentValue: '1', content: 'Level 2, item 2' },
    { value: '2', content: 'Level 1, item 2' },
    { value: '2-1', parentValue: '2', content: 'Level 2, item 1' },
    { value: '2-1-1', parentValue: '2-1', content: 'Level 3, item 1' },
    { value: '2-2', parentValue: '2', content: 'Level 2, item 2' },
    { value: '2-2-1', parentValue: '2-2', content: 'Level 3, item 1' },
    { value: '2-2-2', parentValue: '2-2', content: 'Level 3, item 2' },
    { value: '3', content: 'Level 1, item 3' },
];

const SELECTION_MODE = 'multiselect'; // change to "single" for single selection


export const Selection = (): JSXElement => {
    const flatTree = useHeadlessFlatTree_unstable(items, {
        defaultOpenItems: ['1', '2', '2-1', '2-2'],
        defaultCheckedItems: ['1-2'],
        selectionMode: SELECTION_MODE,
    });
    return (<FlatTree {...flatTree.getTreeProps()} aria-label="Selection">
      {Array.from(flatTree.items(), flatTreeItem => {
            const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
            return (<FlatTreeItem {...treeItemProps} key={flatTreeItem.value}>
            <TreeItemLayout>{content}</TreeItemLayout>
          </FlatTreeItem>);
        })}
    </FlatTree>);
};

export default Selection;