1import { useState } from 'react';
2
3import { InputFieldTwo, Toggle } from '@proton/components';
4import { useLoading } from '@proton/hooks';
5import { wait } from '@proton/shared/lib/helpers/promise';
6
7import { getTitle } from '../../helpers/title';
8import mdx from './Toggle.mdx';
9
10export default {
11    component: Toggle,
12    title: getTitle(__filename, false),
13    parameters: {
14        docs: {
15            page: mdx,
16        },
17    },
18};
19
20export const Basic = () => {
21    const [isChecked, setIsChecked] = useState(true);
22    return (
23        <Toggle
24            id="toggle-basic"
25            checked={isChecked}
26            onChange={() => {
27                setIsChecked(!isChecked);
28            }}
29        />
30    );
31};
32
33export const Label = () => {
34    const [isChecked, setIsChecked] = useState(true);
35    return (
36        <>
37            <Toggle
38                id="toggle-label"
39                checked={isChecked}
40                onChange={() => {
41                    setIsChecked(!isChecked);
42                }}
43            >
44                This is a label
45            </Toggle>
46        </>
47    );
48};
49
50export const Loading = () => {
51    const [isChecked, setIsChecked] = useState(false);
52    const [loading, withLoading] = useLoading(false);
53
54    return (
55        <Toggle
56            id="toggle-loading"
57            checked={isChecked}
58            loading={loading}
59            onChange={() => {
60                const run = async () => {
61                    await wait(500);
62                    setIsChecked((old) => !old);
63                };
64                void withLoading(run());
65            }}
66        />
67    );
68};
69
70export const Disabled = () => {
71    return (
72        <>
73            <Toggle id="toggle-disabled-unchecked" disabled className="mr-4" />
74            <Toggle id="toggle-disabled-checked" checked disabled />
75        </>
76    );
77};
78
79export const AsInputField = () => {
80    const [checked, setChecked] = useState(false);
81
82    return <InputFieldTwo as={Toggle} label="Toggle" checked={checked} onChange={() => setChecked(!checked)} />;
83};