// 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 { Combobox } from "@coreai-ds/react-components";
import type { OptionGroupProps } from "@coreai-ds/react-components";
import { OptionGroup } from "@coreai-ds/react-components";
import type { OptionProps } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";
import { CheckmarkCircle20Filled } from "@fluentui/react-icons";
import * as React from 'react';

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

const CustomOption = (props: OptionProps) => {
    return <Option {...props} checkIcon={<CheckmarkCircle20Filled />}/>;
};

const CustomOptionGroup = (props: Partial<OptionGroupProps> & {
    options: string[];
}) => {
    const { label, options, ...optionGroupProps } = props;
    const labelSlot = typeof label === 'object' ? label : { children: label };
    return (<OptionGroup label={{ style: { fontStyle: 'italic' }, ...labelSlot }} {...optionGroupProps}>
      {options.map(option => (<CustomOption key={option} disabled={option === 'Ferret'}>
          {option}
        </CustomOption>))}
    </OptionGroup>);
};

export const CustomOptions = (props: Partial<Omit<ComboboxProps, "label" | "dynamicWidth">>): JSXElement => {
    const comboId = useId('combo-default');
    const land = ['Cat', 'Dog', 'Ferret', 'Hamster'];
    const water = ['Fish', 'Jellyfish', 'Octopus', 'Seal'];
    const styles = useStyles();
    return (<div className={styles.root}>
      <label id={comboId}>Best pet</label>
      <Combobox aria-labelledby={comboId} placeholder="Select an animal" {...props}>
        <CustomOptionGroup label="Land" options={land}/>
        <CustomOptionGroup label="Sea" options={water}/>
      </Combobox>
    </div>);
};

export default CustomOptions;