// 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 * as React from 'react';
import { makeStyles } from "@coreai-ds/react-components";
import { Combobox } from "@coreai-ds/react-components";
import { Option } 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 Freeform = (props: Partial<Omit<ComboboxProps, "label" | "dynamicWidth">>): JSXElement => {
    const comboId = useId('combo-default');
    const options = [
        'Cat',
        'Caterpillar',
        'Catfish',
        'Cheetah',
        'Chicken',
        'Cockatiel',
        'Cow',
        'Dog',
        'Dolphin',
        'Ferret',
        'Firefly',
        'Fish',
        'Fox',
        'Fox Terrier',
        'Frog',
        'Hamster',
        'Snake',
    ];
    const [matchingOptions, setMatchingOptions] = React.useState([...options]);
    const [customSearch, setCustomSearch] = React.useState<string | undefined>();
    const styles = useStyles();
    const onChange: ComboboxProps['onChange'] = event => {
        const value = event.target.value.trim();
        const matches = options.filter(option => option.toLowerCase().indexOf(value.toLowerCase()) === 0);
        setMatchingOptions(matches);
        if (value.length && matches.length < 1) {
            setCustomSearch(value);
        }
        else {
            setCustomSearch(undefined);
        }
    };
    const onOptionSelect: ComboboxProps['onOptionSelect'] = (event, data) => {
        const matchingOption = data.optionText && options.includes(data.optionText);
        if (matchingOption) {
            setCustomSearch(undefined);
        }
        else {
            setCustomSearch(data.optionText);
        }
    };
    return (<div className={styles.root}>
      <label id={comboId}>Find pets</label>
      <Combobox aria-labelledby={comboId} freeform placeholder="Select an animal" onChange={onChange} onOptionSelect={onOptionSelect} {...props}>
        {customSearch ? (<Option key="freeform" text={customSearch}>
            Search for "{customSearch}"
          </Option>) : null}
        {matchingOptions.map(option => (<Option key={option}>{option}</Option>))}
      </Combobox>
    </div>);
};

export default Freeform;