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

import type { DropdownProps } 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 { Dropdown } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";
import { Persona } from "@coreai-ds/react-components";

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

export const ActiveOptionChange = (props: Partial<Omit<DropdownProps, "label" | "dynamicWidth">>): JSXElement => {
    const dropdownId = useId('dropdown');
    const styles = useStyles();
    const [activeOptionText, setActiveOptionText] = React.useState('');
    const onActiveOptionChange = React.useCallback<NonNullable<DropdownProps['onActiveOptionChange']>>((_, data) => {
        if (data?.nextOption?.text) {
            setActiveOptionText(data?.nextOption?.text);
        }
    }, [setActiveOptionText]);
    const onMouseEnter = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {
        setActiveOptionText(`${e.currentTarget.textContent} (Mouse enter)`);
    }, [setActiveOptionText]);
    return (<div className={styles.root}>
      {activeOptionText}
      <label htmlFor={dropdownId}>Schedule a meeting</label>
      <Dropdown id={dropdownId} onActiveOptionChange={onActiveOptionChange} {...props}>
        <Option text="Katri Athokas" onMouseEnter={onMouseEnter}>
          <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Katri Athokas" presence={{
            status: 'available',
        }} secondaryText="Available"/>
        </Option>
        <Option text="Elvia Atkins" onMouseEnter={onMouseEnter}>
          <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Elvia Atkins" presence={{
            status: 'busy',
        }} secondaryText="Busy"/>
        </Option>
        <Option text="Cameron Evans" onMouseEnter={onMouseEnter}>
          <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Cameron Evans" presence={{
            status: 'away',
        }} secondaryText="Away"/>
        </Option>
        <Option text="Wanda Howard" onMouseEnter={onMouseEnter}>
          <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Wanda Howard" presence={{
            status: 'out-of-office',
        }} secondaryText="Out of office"/>
        </Option>
      </Dropdown>
    </div>);
};

export default ActiveOptionChange;