1import {
2 MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
3 MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
4} from "@t3tools/contracts";
5import { View } from "react-native";
6
7import { AppText } from "../../../components/AppText";
8import { MaterialIconButton } from "../../../components/MaterialIconButton";
9import type { AutoSettleDaysFieldProps } from "./AutoSettleDaysField";
10
11export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {
12 const adjust = (amount: number) => {
13 if (props.disabled) return;
14 const next = Math.max(
15 MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
16 Math.min(MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS, props.value + amount),
17 );
18 if (next !== props.value) props.onValueChange(next);
19 };
20
21 return (
22 <View className="shrink-0 flex-row items-center">
23 {/* Match the 32dp switch track while retaining 48dp button touch targets. */}
24 <View
25 pointerEvents="none"
26 className="absolute inset-x-0 rounded-full bg-subtle"
27 style={{ height: 32 }}
28 />
29 <MaterialIconButton
30 icon="minus"
31 accessibilityLabel="Decrease days before auto-settle"
32 disabled={props.disabled || props.value <= MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
33 onPress={() => adjust(-1)}
34 />
35 <AppText
36 className="min-w-8 text-center text-base"
37 style={{ fontVariant: ["tabular-nums"] }}
38 accessibilityLabel={`${props.value} ${props.value === 1 ? "day" : "days"} before auto-settle`}
39 accessibilityLiveRegion="polite"
40 >
41 {props.value}
42 </AppText>
43 <MaterialIconButton
44 icon="plus"
45 accessibilityLabel="Increase days before auto-settle"
46 disabled={props.disabled || props.value >= MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
47 onPress={() => adjust(1)}
48 />
49 </View>
50 );
51}