// 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 Default = (): JSXElement => {
    const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
    const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
        if (data.value === 'no-options') {
            return;
        }
        setSelectedOptions(data.selectedOptions);
    };
    const tagPickerOptions = options.filter((option) => !selectedOptions.includes(option));
    return (<Field label="Select Employees" style={{ maxWidth: 400 }}>
      <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
        <TagPickerControl>
          <TagPickerGroup aria-label="Selected Employees">
            {selectedOptions.map((option) => (<Tag key={option} shape="rounded" media={<Avatar aria-hidden name={option} color="colorful"/>} value={option}>
                {option}
              </Tag>))}
          </TagPickerGroup>
          <TagPickerInput aria-label="Select Employees"/>
        </TagPickerControl>
        <TagPickerList>
          {tagPickerOptions.length > 0 ? (tagPickerOptions.map((option) => (<TagPickerOption media={<Avatar shape="square" aria-hidden name={option} color="colorful"/>} value={option} key={option}>
                {option}
              </TagPickerOption>))) : (<TagPickerOption value="no-options">No options available</TagPickerOption>)}
        </TagPickerList>
      </TagPicker>
    </Field>);
};

export default Default;