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

const useStyles = makeStyles({
    selectedInfo: {
        marginTop: '16px',
    },
    buttonWrapper: {
        alignSelf: 'center',
    },
    item: {
        cursor: 'pointer',
        padding: '2px 6px',
        justifyContent: 'space-between',
    },
    itemSelected: {
        backgroundColor: tokens.colorSubtleBackgroundSelected,
        '@media (forced-colors:active)': {
            background: 'Highlight',
        },
    },
    personaSelected: {
        '@media (forced-colors:active)': {
            forcedColorAdjust: 'none',
            color: 'HighlightText',
        },
    },
});

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

const items: Item[] = [
    'Melda Bevel',
    'Demetra Manwaring',
    'Eusebia Stufflebeam',
    'Israel Rabin',
    'Bart Merrill',
    'Sonya Farner',
    'Kristan Cable',
].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 ListActiveElement = (): JSXElement => {
    const classes = useStyles();
    const [selectedItems, setSelectedItems] = React.useState<SelectionItemId[]>(['Melda Bevel']);
    const onSelectionChange = React.useCallback((_: React.SyntheticEvent | Event, data: {
        selectedItems: SelectionItemId[];
    }) => {
        setSelectedItems(data.selectedItems);
    }, []);
    const onFocus = React.useCallback((event: React.FocusEvent<HTMLLIElement>) => {
        // Ignore bubbled up events from the children
        if (event.target !== event.currentTarget) {
            return;
        }
        setSelectedItems([event.currentTarget.dataset.value as SelectionItemId]);
    }, []);
    return (<div>
      <List selectionMode="single" navigationMode="composite" selectedItems={selectedItems} onSelectionChange={onSelectionChange}>
        {items.map(({ name, avatar }) => (<ListItem key={name} value={name} className={mergeClasses(classes.item, selectedItems.includes(name) && classes.itemSelected)} data-value={name} aria-label={name} onFocus={onFocus} checkmark={null}>
            <Persona name={name} role="gridcell" secondaryText="Available" presence={{ status: 'available' }} className={mergeClasses(selectedItems.includes(name) && classes.personaSelected)} avatar={{
                image: {
                    src: avatar,
                },
            }}/>
            <div role="gridcell" className={classes.buttonWrapper}>
              <Button aria-label={`Mute ${name}`} size="small" icon={<Mic16Regular />} onClick={e => {
                e.stopPropagation();
                alert(`Muting ${name}`);
            }}/>
            </div>
          </ListItem>))}
      </List>
      <div className={classes.selectedInfo}>
        Currently selected:{' '}
        <Text block weight="bold">
          {selectedItems[0]}
        </Text>
      </div>
    </div>);
};

export default ListActiveElement;