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

import type { JSXElement } 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 { Important16Regular } from "@fluentui/react-icons";
import type { FluentIconsProps } from "@fluentui/react-icons";
import { CounterBadge } from "@coreai-ds/react-components";
import * as React from 'react';

const iconStyleProps: FluentIconsProps = {
    primaryFill: 'red',
};

const AsideContent = ({ isImportant, messageCount }: {
    isImportant?: boolean;
    messageCount?: number;
}) => (<>
    {isImportant && <Important16Regular {...iconStyleProps}/>}
    {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small"/>}
  </>);

export const Aside = (): JSXElement => (<Tree aria-label="Aside">
    <TreeItem itemType="branch" aria-description="Important, 3 message">
      <TreeItemLayout aside={<AsideContent isImportant={true} messageCount={3}/>}>level 1, item 1</TreeItemLayout>
      <Tree>
        <TreeItem itemType="leaf" aria-description="Important">
          <TreeItemLayout aside={<AsideContent isImportant={true}/>}>level 2, item 1</TreeItemLayout>
        </TreeItem>
        <TreeItem itemType="leaf" aria-description="2 messages">
          <TreeItemLayout aside={<AsideContent messageCount={2}/>}>level 2, item 2</TreeItemLayout>
        </TreeItem>
      </Tree>
    </TreeItem>
    <TreeItem itemType="branch" aria-description="Important, 1 message">
      <TreeItemLayout aside={<>
            <AsideContent isImportant={true} messageCount={1}/>
          </>}>
        level 1, item 2
      </TreeItemLayout>

      <Tree>
        <TreeItem itemType="branch" aria-description="1 message">
          <TreeItemLayout aside={<AsideContent messageCount={1}/>}>level 2, item 1</TreeItemLayout>

          <Tree>
            <TreeItem itemType="leaf">
              <TreeItemLayout aside={<AsideContent />}>level 3, item 1</TreeItemLayout>
            </TreeItem>
          </Tree>
        </TreeItem>
      </Tree>
    </TreeItem>
  </Tree>);

export default Aside;