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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { TagPickerProps } from "@coreai-ds/react-components";
import { Field } from "@coreai-ds/react-components";
import { TagPicker } from "@coreai-ds/react-components";
import { TagPickerControl } from "@coreai-ds/react-components";
import { TagPickerGroup } from "@coreai-ds/react-components";
import { Tag } from "@coreai-ds/react-components";
import { Avatar } from "@coreai-ds/react-components";
import { TagPickerInput } from "@coreai-ds/react-components";
import { TagPickerList } from "@coreai-ds/react-components";
import { TagPickerOption } from "@coreai-ds/react-components";

const options = [
    'John Doe',
    'Jane Doe',
    'Max Mustermann',
    'Erika Mustermann',
    'Pierre Dupont',
    'Amelie Dupont',
    'Mario Rossi',
    'Maria Rossi',
];

export const SingleSelect = (): JSXElement => {
    const [selectedOption, setSelectedOption] = React.useState<string | undefined>();
    const selectedOptions = React.useMemo(() => (selectedOption ? [selectedOption] : []), [selectedOption]);
    const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
        setSelectedOption(selectedOption === data.value ? undefined : data.value);
    };
    return (<Field label="Select Employees" style={{ maxWidth: 400 }}>
      <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
        <TagPickerControl>
          {selectedOption && (<TagPickerGroup aria-label="Selected Employees">
              <Tag key={selectedOption} shape="rounded" media={<Avatar aria-hidden name={selectedOption} color="colorful"/>} value={selectedOption}>
                {selectedOption}
              </Tag>
            </TagPickerGroup>)}
          <TagPickerInput aria-label="Select Employees"/>
        </TagPickerControl>
        <TagPickerList>
          {options
            .filter(option => selectedOption !== option)
            .map(option => (<TagPickerOption secondaryContent="Microsoft FTE" media={<Avatar shape="square" aria-hidden name={option} color="colorful"/>} value={option} key={option}>
                {option}
              </TagPickerOption>))}
        </TagPickerList>
      </TagPicker>
    </Field>);
};

export default SingleSelect;