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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { partitionAvatarGroupItems } from "@coreai-ds/react-components";
import { AvatarGroup } from "@coreai-ds/react-components";
import { AvatarGroupItem } from "@coreai-ds/react-components";
import { AvatarGroupPopover } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'grid',
        flexDirection: 'column',
        rowGap: '10px',
    },
});

const names = [
    'Johnie McConnell',
    'Allan Munger',
    'Erik Nason',
    'Kristin Patterson',
    'Daisy Phillips',
    'Carole Poland',
    'Carlos Slattery',
    'Robert Tolbert',
    'Kevin Sturgis',
    'Charlotte Waltson',
    'Elliot Woodward',
];

export const Layout = (): JSXElement => {
    const styles = useStyles();
    const partitionedItems = partitionAvatarGroupItems({ items: names });
    const piePartitionedItems = partitionAvatarGroupItems({ items: names, layout: 'pie' });
    return (<div className={styles.root}>
      <AvatarGroup layout="spread">
        {partitionedItems.inlineItems.map(name => (<AvatarGroupItem name={name} key={name}/>))}
        {partitionedItems.overflowItems && (<AvatarGroupPopover>
            {partitionedItems.overflowItems.map(name => (<AvatarGroupItem name={name} key={name}/>))}
          </AvatarGroupPopover>)}
      </AvatarGroup>
      <AvatarGroup layout="stack">
        {partitionedItems.inlineItems.map(name => (<AvatarGroupItem name={name} key={name}/>))}
        {partitionedItems.overflowItems && (<AvatarGroupPopover>
            {partitionedItems.overflowItems.map(name => (<AvatarGroupItem name={name} key={name}/>))}
          </AvatarGroupPopover>)}
      </AvatarGroup>
      <AvatarGroup layout="pie">
        {piePartitionedItems.inlineItems.map(name => (<AvatarGroupItem name={name} key={name}/>))}
        {piePartitionedItems.overflowItems && (<AvatarGroupPopover>
            {piePartitionedItems.overflowItems.map(name => (<AvatarGroupItem name={name} key={name}/>))}
          </AvatarGroupPopover>)}
      </AvatarGroup>
    </div>);
};

export default Layout;