257 lines
8.3 KiB
TypeScript
257 lines
8.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert,
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { usePresetStore } from '@store/presetStore';
|
|
import { useAuthStore } from '@store/authStore';
|
|
import { isUserOwnedPreset } from '@domain/SpoolPreset';
|
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
|
import { deletePresetUseCase } from '@infrastructure/container';
|
|
|
|
/**
|
|
* Tela de Presets de Carretéis — M4-0
|
|
*/
|
|
export default function ConfigScreen(): React.ReactElement {
|
|
const router = useRouter();
|
|
const { systemPresets, userPresets, removePreset } = usePresetStore();
|
|
|
|
function handleDelete(id: string, name: string): void {
|
|
Alert.alert(
|
|
'Excluir preset',
|
|
`Deseja excluir o preset "${name}"?`,
|
|
[
|
|
{ text: 'Cancelar', style: 'cancel' },
|
|
{
|
|
text: 'Excluir',
|
|
style: 'destructive',
|
|
onPress: async () => {
|
|
try {
|
|
const user = useAuthStore.getState().user;
|
|
if (!user) {
|
|
Alert.alert('Erro', 'Usuário não autenticado');
|
|
return;
|
|
}
|
|
await deletePresetUseCase.execute(id, user.id);
|
|
removePreset(id);
|
|
} catch (error) {
|
|
Alert.alert('Erro', `Falha ao deletar: ${(error as Error).message}`);
|
|
}
|
|
},
|
|
},
|
|
],
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safe}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<View>
|
|
<Text style={styles.headerSub}>Configurações</Text>
|
|
<Text style={styles.headerTitle}>Presets de Carretéis</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.addBtn}
|
|
onPress={() => router.push('/(app)/config/presets/new' as never)}
|
|
>
|
|
<Ionicons name="add" size={24} color={colors.bgBase} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
|
|
{/* Presets do Sistema */}
|
|
<View style={styles.section}>
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionLabel}>PRESETS DO SISTEMA</Text>
|
|
<View style={styles.readonlyBadge}>
|
|
<Text style={styles.readonlyText}>Somente leitura</Text>
|
|
</View>
|
|
</View>
|
|
{systemPresets.map((preset) => (
|
|
<View key={preset.id} style={styles.presetRow}>
|
|
<View style={styles.presetIcon}>
|
|
<Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
|
|
</View>
|
|
<View style={styles.presetInfo}>
|
|
<Text style={styles.presetName}>{preset.name}</Text>
|
|
<Text style={styles.presetSub}>
|
|
{/* type field not in SpoolPreset domain yet — show dash */}
|
|
Carretel · {preset.spoolWeightG}g
|
|
</Text>
|
|
</View>
|
|
<View style={styles.weightBadge}>
|
|
<Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Meus Presets */}
|
|
{userPresets.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionLabel}>MEUS PRESETS</Text>
|
|
{userPresets.map((preset) => (
|
|
<View key={preset.id} style={styles.presetRow}>
|
|
<View style={styles.presetIcon}>
|
|
<Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
|
|
</View>
|
|
<View style={styles.presetInfo}>
|
|
<Text style={styles.presetName}>{preset.name}</Text>
|
|
<Text style={styles.presetSub}>Customizado · {preset.spoolWeightG}g</Text>
|
|
</View>
|
|
<View style={styles.userPresetActions}>
|
|
<View style={styles.weightBadge}>
|
|
<Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
|
|
</View>
|
|
{isUserOwnedPreset(preset) && (
|
|
<>
|
|
<TouchableOpacity
|
|
onPress={() => router.push(`/(app)/config/presets/${preset.id}/edit` as never)}
|
|
>
|
|
<Ionicons name="create-outline" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleDelete(preset.id, preset.name)}>
|
|
<Ionicons name="trash-outline" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{userPresets.length === 0 && (
|
|
<View style={styles.emptyUser}>
|
|
<Text style={styles.emptyText}>Nenhum preset personalizado ainda.</Text>
|
|
<TouchableOpacity onPress={() => router.push('/(app)/config/presets/new' as never)}>
|
|
<Text style={styles.emptyLink}>+ Criar preset</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: spacing[5],
|
|
paddingTop: spacing[5],
|
|
paddingBottom: spacing[4],
|
|
},
|
|
headerSub: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.textSecondary,
|
|
},
|
|
headerTitle: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.xl,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.textPrimary,
|
|
},
|
|
addBtn: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: radius.lg,
|
|
backgroundColor: colors.accent,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
scroll: { flex: 1, paddingHorizontal: spacing[5] },
|
|
section: { marginBottom: spacing[6] },
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing[3],
|
|
marginBottom: spacing[3],
|
|
},
|
|
sectionLabel: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.xs,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.textSecondary,
|
|
letterSpacing: 0.8,
|
|
textTransform: 'uppercase',
|
|
},
|
|
readonlyBadge: {
|
|
backgroundColor: colors.accentMuted,
|
|
paddingHorizontal: spacing[3],
|
|
paddingVertical: 3,
|
|
borderRadius: radius.full,
|
|
},
|
|
readonlyText: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.accent,
|
|
},
|
|
presetRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing[3],
|
|
backgroundColor: colors.bgSurface,
|
|
borderRadius: radius.lg,
|
|
padding: spacing[4],
|
|
marginBottom: spacing[2],
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
presetIcon: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: radius.md,
|
|
backgroundColor: colors.bgHover,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
presetInfo: { flex: 1 },
|
|
presetName: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.base,
|
|
fontWeight: typography.fontWeight.medium,
|
|
color: colors.textPrimary,
|
|
},
|
|
presetSub: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.textSecondary,
|
|
marginTop: 2,
|
|
},
|
|
weightBadge: {
|
|
backgroundColor: colors.bgHover,
|
|
paddingHorizontal: spacing[3],
|
|
paddingVertical: 5,
|
|
borderRadius: radius.sm,
|
|
},
|
|
weightBadgeText: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.sm,
|
|
fontWeight: typography.fontWeight.medium,
|
|
color: colors.textPrimary,
|
|
},
|
|
userPresetActions: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
|
emptyUser: {
|
|
alignItems: 'center',
|
|
paddingVertical: spacing[8],
|
|
gap: spacing[3],
|
|
},
|
|
emptyText: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.textSecondary,
|
|
},
|
|
emptyLink: {
|
|
fontFamily: typography.fontFamily.ui,
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.accent,
|
|
},
|
|
});
|