1import { useRef, useState } from 'react';
2
3import type { IconName } from '@proton/components';
4import {
5    Autocomplete,
6    AutocompleteList,
7    Icon,
8    Input,
9    Marks,
10    Option,
11    SimpleAutocomplete,
12    useAutocomplete,
13    useAutocompleteFilter,
14} from '@proton/components';
15
16import { getTitle } from '../../helpers/title';
17import mdx from './Autocomplete.mdx';
18
19export default {
20    title: getTitle(__filename, false),
21    component: Autocomplete,
22    parameters: {
23        docs: {
24            page: mdx,
25        },
26    },
27};
28
29export const Basic = () => {
30    const [value, setValue] = useState('');
31
32    const options = [
33        { value: 'henlo', label: 'Henló' },
34        { value: 'schmenlo', label: 'Schmenlo' },
35        { value: 'benlo', label: 'Benlo' },
36        { value: 'frenlo', label: 'Frenlo' },
37        { value: 'menlo', label: 'Ménlo' },
38    ];
39
40    return (
41        <Autocomplete
42            id="autocomplete"
43            value={value}
44            onChange={setValue}
45            onSelect={({ label }) => setValue(label)}
46            placeholder="Example"
47            options={options}
48            getData={({ label }) => label}
49        />
50    );
51};
52
53export const Simple = () => {
54    const options = [
55        'henlo',
56        'benlo',
57        'schmenlo',
58        'henlo and benlo',
59        'benlo and schmenlo',
60        'schmenlo and schmenlo',
61        'renlo',
62        'kenlo',
63        'schmenlo',
64        'henlo and kenlo',
65        'lenlo and schmenlo',
66        'achmenlo and lchmenlo',
67    ];
68
69    const [value, setValue] = useState(options[0]);
70
71    return <SimpleAutocomplete id="autocomplete" value={value} options={options} onChange={setValue} />;
72};
73
74interface ServiceOption {
75    value: string;
76    label: string;
77    icon: IconName;
78}
79
80export const Custom = () => {
81    const [value, setValue] = useState('');
82    const containerRef = useRef<HTMLInputElement>(null);
83    const inputRef = useRef<HTMLInputElement>(null);
84
85    const options = (['brand-android', 'brand-apple', 'brand-chrome', 'brand-linux'] as const).map((service) => {
86        return {
87            value: service,
88            label: service.charAt(0).toUpperCase() + service.slice(1),
89            icon: service,
90        };
91    });
92
93    const getData = ({ label }: ServiceOption) => label;
94
95    const filteredOptions = useAutocompleteFilter(value, options, getData, 20, 0);
96
97    const handleSelect = (optionValue: ServiceOption) => {
98        setValue(optionValue.label);
99    };
100
101    const { onClose, getOptionID, inputProps, suggestionProps } = useAutocomplete({
102        id: 'autocomplete',
103        options: filteredOptions,
104        onSelect: handleSelect,
105        input: value,
106        inputRef,
107    });
108
109    const handleSelectOption = (optionValue: ServiceOption) => {
110        handleSelect(optionValue);
111        onClose();
112    };
113
114    return (
115        <>
116            <Input
117                {...inputProps}
118                placeholder="Service"
119                ref={inputRef}
120                containerRef={containerRef}
121                value={value}
122                onChange={(event) => {
123                    setValue(event.currentTarget.value.trimStart());
124                }}
125            />
126            <AutocompleteList anchorRef={containerRef.current ? containerRef : inputRef} {...suggestionProps}>
127                {filteredOptions.map(({ chunks, text, option }, index) => {
128                    return (
129                        <Option
130                            key={text}
131                            id={getOptionID(index)}
132                            title={text}
133                            value={option}
134                            disableFocusOnActive
135                            onChange={handleSelectOption}
136                        >
137                            <Icon name={option.icon} /> <Marks chunks={chunks}>{text}</Marks> ({index})
138                        </Option>
139                    );
140                })}
141            </AutocompleteList>
142        </>
143    );
144};