// 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 * as React from 'react';
import type { SelectionItemId } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { List } from "@coreai-ds/react-components";
import { ListItem } from "@coreai-ds/react-components";
import { Persona } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    buttonControls: {
        display: 'flex',
        columnGap: '8px',
        marginBottom: '16px',
    },
});

type Item = {
    name: string;
    id: string;
    avatar: string;
};

const items: Item[] = [
    'Melda Bevel',
    'Demetra Manwaring',
    'Eusebia Stufflebeam',
    'Israel Rabin',
    'Bart Merrill',
    'Sonya Farner',
].map(name => ({
    name,
    id: name,
    avatar: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png',
}));

export const SingleActionSelectionControlled = (): JSXElement => {
    const classes = useStyles();
    const [selectedItems, setSelectedItems] = React.useState<SelectionItemId[]>(['Demetra Manwaring', 'Bart Merrill']);
    return (<div>
      <div className={classes.buttonControls}>
        <Button onClick={e => setSelectedItems(items.map(({ id }) => id))}>Select all</Button>
      </div>

      <List selectionMode="multiselect" selectedItems={selectedItems} onSelectionChange={(_, data) => setSelectedItems(data.selectedItems)} aria-label="People example">
        {items.map(({ name, avatar }) => (<ListItem key={name} value={name} aria-label={name} checkmark={{ 'aria-label': name }}>
            <Persona name={name} secondaryText="Available" presence={{ status: 'available' }} avatar={{
                image: {
                    src: avatar,
                },
            }}/>
          </ListItem>))}
      </List>
    </div>);
};

export default SingleActionSelectionControlled;