// 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 { makeStyles } 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 { mergeClasses } 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";

type Option = {
    value: string;
    fixedWidth?: boolean;
};

const options: Option[] = [
    { value: 'John Doe' },
    { value: 'Jane Doe' },
    { value: 'Max Mustermann' },
    { value: 'Erika Mustermann' },
    { value: 'Pierre Dupont' },
    { value: 'Amelie Dupont' },
    { value: 'Maria Rossi' },
    {
        value: 'This tag has text truncation based on a fixed width of 50px',
        fixedWidth: true,
    },
    {
        value: 'This tag has text truncation based on its container width. This is a long text that will be truncated when it reaches the end of the container.',
    },
];

const useStyles = makeStyles({
    tagTruncatedPrimaryText: {
        whiteSpace: 'nowrap',
        overflowX: 'hidden',
        textOverflow: 'ellipsis',
    },
    tagPrimaryTextFixedWidth: {
        width: '50px',
    },
    optionContent: {
        whiteSpace: 'nowrap',
        overflowX: 'hidden',
        textOverflow: 'ellipsis',
    },
    optionSecondaryContent: {
        whiteSpace: 'nowrap',
    },
});

export const TruncatedText = (): JSXElement => {
    const [selectedOptions, setSelectedOptions] = React.useState<Option[]>(options);
    const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
        if (data.value === 'no-options') {
            return;
        }
        setSelectedOptions(data.selectedOptions.map(option => options.find(o => o.value === option)!));
    };
    const tagPickerOptions = options.filter(option => !selectedOptions.includes(option));
    const styles = useStyles();
    return (<Field label="Select Employees" style={{ maxWidth: 400 }}>
      <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions.map(option => option.value)}>
        <TagPickerControl>
          <TagPickerGroup aria-label="Selected Employees">
            {selectedOptions.map(option => (<Tag key={option.value} shape="rounded" media={<Avatar aria-hidden name={option.value} color="colorful"/>} value={option.value} title={option.value} primaryText={{
                className: mergeClasses(styles.tagTruncatedPrimaryText, option.fixedWidth && styles.tagPrimaryTextFixedWidth),
            }}>
                {option.value}
              </Tag>))}
          </TagPickerGroup>
          <TagPickerInput aria-label="Select Employees"/>
        </TagPickerControl>
        <TagPickerList>
          {tagPickerOptions.length > 0 ? (tagPickerOptions.map(option => (<TagPickerOption secondaryContent={{ children: 'Microsoft FTE', className: styles.optionSecondaryContent }} media={<Avatar shape="square" aria-hidden name={option.value} color="colorful"/>} value={option.value} key={option.value} title={option.value} text={option.value}>
                <div className={styles.optionContent}>{option.value}</div>
              </TagPickerOption>))) : (<TagPickerOption value="no-options">No options available</TagPickerOption>)}
        </TagPickerList>
      </TagPicker>
    </Field>);
};

export default TruncatedText;