1import { useState } from 'react';
2
3import { InputFieldTwo } from '@proton/components';
4import CountrySelect from '@proton/components/components/country/CountrySelect';
5import type { CountryOption } from '@proton/components/components/country/helpers';
6
7import { getTitle } from '../../helpers/title';
8import mdx from './CountrySelect.mdx';
9
10export default {
11    component: CountrySelect,
12    title: getTitle(__filename, false),
13    parameters: {
14        docs: {
15            page: mdx,
16        },
17    },
18};
19
20const options: CountryOption[] = [
21    { countryName: 'France', countryCode: 'fr' },
22    { countryName: 'Finland', countryCode: 'fi' },
23    { countryName: 'Australia', countryCode: 'au' },
24    { countryName: 'Belgium', countryCode: 'be' },
25    { countryName: 'Switzerland', countryCode: 'ch' },
26    { countryName: 'Sweden', countryCode: 'se' },
27    { countryName: 'Ireland', countryCode: 'ie' },
28    { countryName: 'Norway', countryCode: 'no' },
29];
30
31export const Basic = () => {
32    return <CountrySelect options={options} />;
33};
34
35export const PreSelect = () => {
36    const [preSelectedOptionDivider, setPreSelectedOptionDivider] = useState('');
37    const [hint, setHint] = useState('');
38
39    return (
40        <>
41            <div className="flex flex-1 items-center justify-center border p-7">
42                <CountrySelect
43                    options={options}
44                    preSelectedOption={options[0]}
45                    preSelectedOptionDivider={!!preSelectedOptionDivider ? preSelectedOptionDivider : undefined}
46                    hint={hint}
47                />
48            </div>
49            <div className="flex flex-nowrap gap-7 py-7">
50                <InputFieldTwo
51                    label="Divider"
52                    placeholder="Change the pre-selected option divider text"
53                    value={preSelectedOptionDivider}
54                    onValue={(value: string) => setPreSelectedOptionDivider(value)}
55                />
56                <InputFieldTwo
57                    label="Hint"
58                    placeholder="Add a hint to the select"
59                    value={hint}
60                    onValue={(value: string) => setHint(value)}
61                />
62            </div>
63        </>
64    );
65};