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

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

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 SingleActionSelectionDifferentPrimary = (): JSXElement => {
    const [selectedItems, setSelectedItems] = React.useState<SelectionItemId[]>(['Demetra Manwaring', 'Bart Merrill']);
    // This will be triggered by user pressing Enter or clicking on the list item
    const onAction = React.useCallback((event: React.SyntheticEvent | Event, { value: val }: {
        value: ListItemProps['value'];
    }) => {
        // This prevents the change in selection on click/Enter
        event.preventDefault();
        alert(`Triggered custom action on ${val}`);
    }, []);
    return (<List aria-label="People example" selectionMode="multiselect" selectedItems={selectedItems} onSelectionChange={(_, data) => setSelectedItems(data.selectedItems)}>
      {items.map(({ name, avatar }, index) => (<ListItem key={name} value={name} aria-label={name} onAction={onAction} checkmark={{ 'aria-label': name }} disabledSelection={index === 2}>
          <Persona name={name} secondaryText="Available" presence={{ status: 'available' }} avatar={{
                image: {
                    src: avatar,
                },
            }}/>
        </ListItem>))}
    </List>);
};

export default SingleActionSelectionDifferentPrimary;