1import { Button, Host, HStack, Picker, Popover, Text, VStack } from "@expo/ui/swift-ui";
2import {
3 accessibilityLabel,
4 buttonStyle,
5 disabled,
6 font,
7 foregroundStyle,
8 frame,
9 padding,
10 pickerStyle,
11 presentationBackground,
12 tag,
13} from "@expo/ui/swift-ui/modifiers";
14import {
15 MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
16 MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
17} from "@t3tools/contracts";
18import { useState } from "react";
19
20import { useAppearancePreferences } from "../appearance/AppearancePreferencesProvider";
21import type { AutoSettleDaysFieldProps } from "./AutoSettleDaysField";
22
23const days = Array.from(
24 { length: MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS - MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS + 1 },
25 (_, index) => MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS + index,
26);
27
28export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {
29 const { themeAppearance, themeVariables: colors, appearance } = useAppearancePreferences();
30 const [open, setOpen] = useState(false);
31 const [draft, setDraft] = useState(props.value);
32 return (
33 <Host matchContents colorScheme={themeAppearance} seedColor={colors["--color-primary"]}>
34 <Popover isPresented={open} onIsPresentedChange={setOpen}>
35 <Popover.Trigger>
36 <Button
37 onPress={() => {
38 if (props.disabled) return;
39 setDraft(props.value);
40 setOpen(true);
41 }}
42 modifiers={[
43 buttonStyle("bordered"),
44 disabled(props.disabled),
45 accessibilityLabel(`Days before auto-settle: ${props.value}`),
46 frame({ minWidth: 64, minHeight: 44 }),
47 foregroundStyle(colors["--color-primary-text"]),
48 font({ size: appearance.baseFontSize }),
49 ]}
50 >
51 <Text>{String(props.value)}</Text>
52 </Button>
53 </Popover.Trigger>
54 <Popover.Content>
55 <VStack
56 modifiers={[
57 padding({ all: 12 }),
58 frame({ width: 240 }),
59 presentationBackground(colors["--color-sheet-solid"]),
60 ]}
61 >
62 <Picker
63 label="Days before auto-settle"
64 selection={draft}
65 onSelectionChange={setDraft}
66 modifiers={[pickerStyle("wheel"), frame({ height: 180 })]}
67 >
68 {days.map((value) => (
69 <Text
70 key={value}
71 modifiers={[tag(value), foregroundStyle(colors["--color-foreground"])]}
72 >
73 {`${value} ${value === 1 ? "day" : "days"}`}
74 </Text>
75 ))}
76 </Picker>
77 <HStack spacing={24}>
78 <Button
79 label="Cancel"
80 onPress={() => setOpen(false)}
81 modifiers={[foregroundStyle(colors["--color-primary-text"])]}
82 />
83 <Button
84 label="Done"
85 onPress={() => {
86 setOpen(false);
87 if (!props.disabled && draft !== props.value) props.onValueChange(draft);
88 }}
89 modifiers={[foregroundStyle(colors["--color-primary-text"])]}
90 />
91 </HStack>
92 </VStack>
93 </Popover.Content>
94 </Popover>
95 </Host>
96 );
97}