// 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 { AnimalCat24Filled } from "@fluentui/react-icons";
import { AnimalDog24Filled } from "@fluentui/react-icons";
import { AnimalRabbit24Filled } from "@fluentui/react-icons";
import { AnimalTurtle24Filled } from "@fluentui/react-icons";
import { FoodFish24Filled } from "@fluentui/react-icons";
import { makeStyles } from "@coreai-ds/react-components";
import { Dropdown } 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 { CheckboxChecked24Regular } from "@fluentui/react-icons";
import * as React from 'react';

const animalIcons = {
    Cat: AnimalCat24Filled,
    Dog: AnimalDog24Filled,
    Rabbit: AnimalRabbit24Filled,
    Turtle: AnimalTurtle24Filled,
    Fish: FoodFish24Filled,
};

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

type CustomOptionProps = Partial<OptionProps> & {
    animal: keyof typeof animalIcons;
};

const useCustomOptionStyles = makeStyles({
    option: {
        display: 'flex',
        alignItems: 'center',
        gap: '5px',
    },
    icon: { flex: '0 0 auto' },
    text: { flex: '1 1 auto' },
});

const CustomOption = (props: CustomOptionProps) => {
    const { animal, ...optionProps } = props;
    const Icon = animalIcons[animal];
    const styles = useCustomOptionStyles();
    return (<Option text={animal} className={styles.option} checkIcon={<CheckboxChecked24Regular />} {...optionProps}>
      <Icon className={styles.icon}/>
      <span className={styles.text}>{animal}</span>
    </Option>);
};

const CustomOptionGroup = (props: Partial<OptionGroupProps> & {
    options: (keyof typeof animalIcons)[];
}) => {
    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} animal={option}/>))}
    </OptionGroup>);
};

export const CustomOptions = (props: Partial<Omit<DropdownProps, "label" | "dynamicWidth">>): JSXElement => {
    const dropdownId = useId('dropdown');
    const land = ['Cat', 'Dog', 'Rabbit'] as (keyof typeof animalIcons)[];
    const water = ['Fish', 'Turtle'] as (keyof typeof animalIcons)[];
    const styles = useStyles();
    return (<div className={styles.root}>
      <label htmlFor={dropdownId}>Best pet</label>
      <Dropdown id={dropdownId} listbox={{ className: styles.listbox }} placeholder="Select an animal" {...props}>
        <CustomOptionGroup label="Land" options={land}/>
        <CustomOptionGroup label="Sea" options={water}/>
      </Dropdown>
    </div>);
};

export default CustomOptions;