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

import type { ComboboxProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import * as React from 'react';
import { Combobox } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";
import { Persona } from "@coreai-ds/react-components";
import type { PresenceBadgeStatus } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    root: {
        // Stack the label above the field with a gap
        display: 'grid',
        justifyItems: 'start',
        gap: '20px',
        maxWidth: '400px',
    },
    field: {
        display: 'grid',
        justifyItems: 'start',
        gap: '2px',
    },
});

const optionData = [
    { text: 'Katri Athokas', value: 'kathok', presence: 'available', secondaryText: 'Available' },
    { text: 'Elvia Atkins', value: 'eatkins', presence: 'busy', secondaryText: 'Busy' },
    { text: 'Cameron Evans', value: 'cevans', presence: 'away', secondaryText: 'Away' },
    { text: 'Wanda Howard', value: 'whoward', presence: 'out-of-office', secondaryText: 'Out of office' },
];

export const Controlled = (props: Partial<Omit<ComboboxProps, "label" | "dynamicWidth">>): JSXElement => {
    const comboId = useId('combo-controlled');
    const styles = useStyles();
    const [selectedOptions, setSelectedOptions] = React.useState<string[]>(['eatkins']);
    const [value, setValue] = React.useState('Elvia Atkins');
    const [open, setOpen] = React.useState(false);
    const onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => {
        setSelectedOptions(data.selectedOptions);
        setValue(data.optionText ?? '');
    };
    const onInput = (ev: React.ChangeEvent<HTMLInputElement>) => {
        setValue(ev.target.value);
    };
    // Reset the typed value when the Combobox closes to reflect the selected options
    React.useEffect(() => {
        if (!open) {
            setValue(selectedOptions.join(', '));
        }
    }, [open, selectedOptions]);
    return (<div className={styles.root}>
      <div className={styles.field}>
        <label htmlFor={`${comboId}-default`}>Schedule a meeting (default selection)</label>
        <Combobox id={`${comboId}-default`} {...props} defaultValue="Elvia Atkins" defaultSelectedOptions={['eatkins']}>
          {optionData.map(opt => (<Option key={opt.value} text={opt.text} value={opt.value}>
              <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name={opt.text} presence={{
                status: opt.presence as PresenceBadgeStatus,
            }} secondaryText={opt.secondaryText}/>
            </Option>))}
        </Combobox>
      </div>

      <div className={styles.field}>
        <label htmlFor={`${comboId}-controlled`}>Schedule a meeting (controlled selection)</label>
        <Combobox id={`${comboId}-controlled`} {...props} value={value} selectedOptions={selectedOptions} onInput={onInput} onOptionSelect={onOptionSelect} onOpenChange={(_, data) => setOpen(data.open)}>
          {optionData.map(opt => (<Option key={opt.value} text={opt.text} value={opt.value}>
              <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name={opt.text} presence={{
                status: opt.presence as PresenceBadgeStatus,
            }} secondaryText={opt.secondaryText}/>
            </Option>))}
        </Combobox>
      </div>
    </div>);
};

export default Controlled;