// 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";

export const NoPopover = (): JSXElement => {
    const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
    const [inputValue, setInputValue] = React.useState('');
    const onOptionSelect: TagPickerProps['onOptionSelect'] = (_, data) => {
        setSelectedOptions(data.selectedOptions);
    };
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(event.currentTarget.value);
    };
    const handleKeyDown = (event: React.KeyboardEvent) => {
        if (event.key === 'Enter' && inputValue) {
            setInputValue('');
            setSelectedOptions(curr => (curr.includes(inputValue) ? curr : [...curr, inputValue]));
        }
    };
    return (<Field label="Add Employees" style={{ maxWidth: 400 }}>
      <TagPicker noPopover onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
        <TagPickerControl>
          <TagPickerGroup aria-label="Selected Employees">
            {selectedOptions.map((option, index) => (<Tag key={index} shape="rounded" media={<Avatar aria-hidden name={option} color="colorful"/>} value={option}>
                {option}
              </Tag>))}
          </TagPickerGroup>
          <TagPickerInput value={inputValue} onChange={handleChange} onKeyDown={handleKeyDown} aria-label="Add Employees"/>
        </TagPickerControl>
      </TagPicker>
    </Field>);
};

export default NoPopover;