// 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 type { AvatarSize } 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',
];

const sizes: AvatarSize[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];

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

export default SizePie;