// 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',
        justifyItems: 'start',
        gap: '20px',
        maxWidth: '400px',
    },
    field: {
        display: 'grid',
        justifyItems: 'start',
        gap: '2px',
    },
});

export const Controlled = (props: Partial<Omit<DropdownProps, "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 onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => {
        setSelectedOptions(data.selectedOptions);
        setValue(data.optionText ?? '');
    };
    return (<div className={styles.root}>
      <div className={styles.field}>
        <label htmlFor={`${comboId}-default`}>Schedule a meeting (default selection)</label>
        <Dropdown id={`${comboId}-default`} {...props} defaultValue="Elvia Atkins" defaultSelectedOptions={['eatkins']}>
          <Option text="Katri Athokas" value="kathok">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Katri Athokas" presence={{
            status: 'available',
        }} secondaryText="Available"/>
          </Option>
          <Option text="Elvia Atkins" value="eatkins">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Elvia Atkins" presence={{
            status: 'busy',
        }} secondaryText="Busy"/>
          </Option>
          <Option text="Cameron Evans" value="cevans">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Cameron Evans" presence={{
            status: 'away',
        }} secondaryText="Away"/>
          </Option>
          <Option text="Wanda Howard" value="whoward">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Wanda Howard" presence={{
            status: 'out-of-office',
        }} secondaryText="Out of office"/>
          </Option>
        </Dropdown>
      </div>

      <div className={styles.field}>
        <label htmlFor={`${comboId}-controlled`}>Schedule a meeting (controlled selection)</label>
        <Dropdown id={`${comboId}-controlled`} {...props} value={value} selectedOptions={selectedOptions} onOptionSelect={onOptionSelect}>
          <Option text="Katri Athokas" value="kathok">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Katri Athokas" presence={{
            status: 'available',
        }} secondaryText="Available"/>
          </Option>
          <Option text="Elvia Atkins" value="eatkins">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Elvia Atkins" presence={{
            status: 'busy',
        }} secondaryText="Busy"/>
          </Option>
          <Option text="Cameron Evans" value="cevans">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Cameron Evans" presence={{
            status: 'away',
        }} secondaryText="Away"/>
          </Option>
          <Option text="Wanda Howard" value="whoward">
            <Persona avatar={{ color: 'colorful', 'aria-hidden': true }} name="Wanda Howard" presence={{
            status: 'out-of-office',
        }} secondaryText="Out of office"/>
          </Option>
        </Dropdown>
      </div>
    </div>);
};

export default Controlled;