// 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 type { TagPickerProps } from "@coreai-ds/react-components";
import * as React from 'react';
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 useStyles = makeStyles({
    darkBG: {
        backgroundColor: tokens.colorNeutralBackgroundInverted,
        color: tokens.colorNeutralForegroundInverted2,
        padding: '20px',
        marginBlock: '10px',
        borderRadius: tokens.borderRadiusMedium,
    },
});

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

const Example = ({ appearance }: Pick<TagPickerProps, 'appearance'>) => {
    const [selectedOptions, setSelectedOptions] = React.useState<string[]>([options[0]]);
    const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
        if (data.value === 'no-options') {
            return;
        }
        setSelectedOptions(data.selectedOptions);
    };
    const tagPickerOptions = options.filter(option => !selectedOptions.includes(option));
    const labelColor = appearance === 'filled-lighter' || appearance === 'filled-darker'
        ? tokens.colorNeutralForegroundInverted2
        : tokens.colorNeutralForeground1;
    const label = <span style={{ color: labelColor }}>Select Employees</span>;
    return (<Field label={label} style={{ maxWidth: 400 }}>
      <TagPicker appearance={appearance} 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 secondaryContent="Microsoft FTE" 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 const Appearance = (): JSXElement => {
    const styles = useStyles();
    return (<>
      <div>
        <h1>Outline</h1>
        <Example appearance="outline"/>
      </div>
      <div>
        <h1>Underline</h1>
        <Example appearance="underline"/>
      </div>
      <div className={styles.darkBG}>
        <h1>Filled Darker</h1>
        <Example appearance="filled-darker"/>
      </div>
      <div className={styles.darkBG}>
        <h1>Filled Lighter</h1>
        <Example appearance="filled-lighter"/>
      </div>
    </>);
};

export default Appearance;