1import { useMemo, useRef, useState } from 'react';
2
3import { Icon, InputFieldTwo, LabelStack, Option, SearchableSelect, SelectTwo } from '@proton/components';
4
5import { getTitle } from '../../helpers/title';
6import mdx from './Select.mdx';
7
8export default {
9    title: getTitle(__filename, false),
10    component: SelectTwo,
11    parameters: {
12        docs: {
13            page: mdx,
14        },
15    },
16};
17
18export const Playground = ({ ...args }) => {
19    const [value, setValue] = useState('ant');
20
21    return (
22        <SelectTwo {...args} value={value} onChange={({ value: v }) => setValue(v)}>
23            <Option title="Ant" value="ant" />
24            <Option title="Zebra" value="zebra" />
25        </SelectTwo>
26    );
27};
28Playground.args = {};
29
30export const Basic = () => {
31    const [value, setValue] = useState('ant');
32
33    return (
34        <SelectTwo value={value} onValue={setValue}>
35            <Option title="Ant" value="ant" />
36            <Option title="Zebra" value="zebra" />
37        </SelectTwo>
38    );
39};
40
41export const Multiple = () => {
42    const options = useMemo(() => [{ label: 'ant' }, { label: 'zebra' }], []);
43    const [value, setValue] = useState([options[0]]);
44
45    return (
46        <SelectTwo value={value} onValue={setValue} multiple>
47            {options.map((option) => (
48                <Option title={option.label} value={option} key={option.label} />
49            ))}
50        </SelectTwo>
51    );
52};
53
54export const Search = () => {
55    const options = ['France', 'Switzerland', 'Taïwan', 'USA', 'UK'];
56    const [value, setValue] = useState('France');
57
58    return (
59        <SearchableSelect
60            title={'Choose your country'}
61            value={value}
62            onChange={(e) => setValue(e.value)}
63            search
64            searchPlaceholder={'Search for country'}
65        >
66            {options.map((option) => (
67                <Option key={option} value={option} title={option} />
68            ))}
69        </SearchableSelect>
70    );
71};
72
73export const MultiSearch = () => {
74    const options = ['France', 'Switzerland', 'Taïwan', 'USA', 'UK'];
75    const [value, setValue] = useState([]);
76
77    return (
78        <SearchableSelect
79            multiple
80            value={value}
81            onChange={(e) => setValue(e.value)}
82            search
83            searchPlaceholder={'Search for country'}
84            placeholder={'Choose your country'}
85        >
86            {options.map((option) => (
87                <Option key={option} value={option} title={option} />
88            ))}
89        </SearchableSelect>
90    );
91};
92
93const options = [
94    { color: '#8080FF', name: 'electron' },
95    { color: '#EC3E7C', name: 'muon' },
96    { color: '#DB60D6', name: 'tau' },
97    { color: '#415DF0', name: 'neutrino' },
98    { color: '#179FD9', name: 'z boson' },
99    { color: '#1DA583', name: 'w boson' },
100    { color: '#3CBB3A', name: 'quark' },
101    { color: '#B4A40E', name: 'higgs' },
102    { color: '#936D58', name: 'photon' },
103    { color: '#F78400', name: 'gluon' },
104];
105
106export const RenderSelected = () => {
107    const [value, setValue] = useState<typeof options>(options.slice(0, 4));
108
109    return (
110        <SelectTwo
111            multiple
112            value={value}
113            placeholder={'Choose your country'}
114            onValue={setValue}
115            renderSelected={(selected) => <LabelStack labels={selected ?? []} />}
116        >
117            {options.map((option) => (
118                <Option key={option.name} value={option} title={option.name} />
119            ))}
120        </SelectTwo>
121    );
122};
123
124export const ControlledOpenState = () => {
125    const [value, setValue] = useState('');
126
127    const [open, setOpen] = useState(false);
128
129    function handleOpen() {
130        setOpen(true);
131    }
132
133    function handleClose() {
134        setOpen(false);
135    }
136
137    return (
138        <SelectTwo
139            isOpen={open}
140            value={value}
141            onChange={({ value: v }) => setValue(v)}
142            onOpen={handleOpen}
143            onClose={handleClose}
144        >
145            <Option title="Ant" value="ant" />
146            <Option title="Zebra" value="zebra" />
147        </SelectTwo>
148    );
149};
150
151export const WithRichOptionContent = () => {
152    const [value, setValue] = useState('android');
153
154    return (
155        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
156            <Option title="android" value="android">
157                <Icon name="brand-android" /> android
158            </Option>
159            <Option title="apple" value="apple">
160                <Icon name="brand-apple" /> apple
161            </Option>
162            <Option title="linux" value="linux">
163                <Icon name="brand-linux" /> linux
164            </Option>
165            <Option title="chrome" value="chrome">
166                <Icon name="brand-chrome" /> chrome
167            </Option>
168        </SelectTwo>
169    );
170};
171
172export const WithCustomSearchClearTimer = () => {
173    const [value, setValue] = useState('ant');
174
175    return (
176        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)} clearSearchAfter={1000}>
177            <Option title="Ant" value="ant" />
178            <Option title="Bear" value="bear" />
179            <Option title="Chimpanzee" value="chimpanzee" />
180            <Option title="Deer" value="deer" />
181            <Option title="Zebra" value="zebra" />
182        </SelectTwo>
183    );
184};
185
186export const WithComplexValues = () => {
187    /*
188     * The useRef is used here in order to preserve identity of the value to its
189     * option between render cycles since the Select uses identity comparison to
190     * determine which option is selected.
191     */
192    const { current: options } = useRef([{ name: 'ant' }, { name: 'bear' }, { name: 'chimpanzee' }]);
193
194    const [value, setValue] = useState<{ name: string } | null>(options[0]);
195
196    return (
197        <SelectTwo value={value} onChange={({ value: v }) => setValue(v)}>
198            {options.map((option) => (
199                <Option title={option.name} value={option} key={option.name} />
200            ))}
201        </SelectTwo>
202    );
203};
204
205export const AsInputField = () => {
206    return (
207        <InputFieldTwo as={SelectTwo} label="Select" placeholder="Placeholder">
208            <Option title="one" value="one" />
209            <Option title="two" value="two" />
210            <Option title="three" value="three" />
211        </InputFieldTwo>
212    );
213};