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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { TreeItemValue } from "@coreai-ds/react-components";
import type { TreeOpenChangeEvent } from "@coreai-ds/react-components";
import type { TreeOpenChangeData } from "@coreai-ds/react-components";
import { Tree } from "@coreai-ds/react-components";
import { TreeItem } from "@coreai-ds/react-components";
import { TreeItemLayout } from "@coreai-ds/react-components";
import { SubtractSquare16Regular } from "@fluentui/react-icons";
import { AddSquare16Regular } from "@fluentui/react-icons";

export const ExpandIcon = (): JSXElement => {
    const [openItems, setOpenItems] = React.useState<TreeItemValue[]>([]);
    const handleOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
        setOpenItems(curr => (data.open ? [...curr, data.value] : curr.filter(value => value !== data.value)));
    };
    return (<Tree aria-label="Expand Icon" openItems={openItems} onOpenChange={handleOpenChange}>
      <TreeItem itemType="branch" value="tree-item-2">
        <TreeItemLayout expandIcon={openItems.includes('tree-item-2') ? <SubtractSquare16Regular /> : <AddSquare16Regular />}>
          level 1, item 1
        </TreeItemLayout>
        <Tree>
          <TreeItem itemType="branch" value="tree-item-3">
            <TreeItemLayout expandIcon={openItems.includes('tree-item-3') ? <SubtractSquare16Regular /> : <AddSquare16Regular />}>
              level 2, item 1
            </TreeItemLayout>
            <Tree>
              <TreeItem itemType="leaf">
                <TreeItemLayout>level 3, item 1</TreeItemLayout>
              </TreeItem>
            </Tree>
          </TreeItem>
        </Tree>
      </TreeItem>
      <TreeItem itemType="branch" value="tree-item-1">
        <TreeItemLayout expandIcon={openItems.includes('tree-item-1') ? <SubtractSquare16Regular /> : <AddSquare16Regular />}>
          level 1, item 2
        </TreeItemLayout>
        <Tree>
          <TreeItem itemType="leaf">
            <TreeItemLayout>level 2, item 1</TreeItemLayout>
          </TreeItem>
          <TreeItem itemType="leaf">
            <TreeItemLayout>level 2, item 2</TreeItemLayout>
          </TreeItem>
        </Tree>
      </TreeItem>
    </Tree>);
};

export default ExpandIcon;