408 lines
20 KiB
TypeScript
408 lines
20 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
View, Text, ScrollView, TouchableOpacity, TextInput, StyleSheet, Alert, Modal, KeyboardAvoidingView, Platform,
|
||
} from 'react-native';
|
||
import { useRouter } from 'expo-router';
|
||
import { useForm, Controller } from 'react-hook-form';
|
||
import { zodResolver } from '@hookform/resolvers/zod';
|
||
import { z } from 'zod';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import { usePresetStore } from '@store/presetStore';
|
||
import { useFilamentStore } from '@store/filamentStore';
|
||
import { useAuthStore } from '@store/authStore';
|
||
import { Input } from '@presentation/components/ui/Input';
|
||
import { Button } from '@presentation/components/ui/Button';
|
||
import { Card } from '@presentation/components/ui/Card';
|
||
import { calcNetWeight } from '@domain/Filament';
|
||
import { colors, typography, spacing, radius } from '@shared/theme';
|
||
import { MATERIALS, type Material } from '@shared/constants';
|
||
import { formatWeight } from '@shared/utils/filament';
|
||
import { createFilamentUseCase } from '@infrastructure/container';
|
||
import { isValidHex, normalizeHex } from '@shared/utils/filament';
|
||
|
||
const schema = z.object({
|
||
brand: z.string().min(1, 'Marca obrigatória'),
|
||
model: z.string().optional(),
|
||
totalWeightG: z.coerce.number().min(1, 'Informe o peso total'),
|
||
tempHotendC: z.coerce.number().optional(),
|
||
tempBedC: z.coerce.number().optional(),
|
||
flowFactorPct: z.coerce.number().optional(),
|
||
notes: z.string().optional(),
|
||
});
|
||
|
||
type FormData = z.infer<typeof schema>;
|
||
|
||
const PRESET_COLORS = ['#E05533', '#2563EB', '#FFFFFF', '#1E1B18', '#22C55E', '#EAB308', '#EC4899', '#A855F7', '#F97316'];
|
||
|
||
/**
|
||
* Tela de Cadastro de Filamento — 2X-0
|
||
*/
|
||
export default function NewFilamentScreen(): React.ReactElement {
|
||
const router = useRouter();
|
||
const { presets, systemPresets } = usePresetStore();
|
||
const { addFilament } = useFilamentStore();
|
||
const { user } = useAuthStore();
|
||
|
||
const [selectedColor, setSelectedColor] = useState('#E05533');
|
||
const [hexInput, setHexInput] = useState('#E05533');
|
||
const [selectedMaterial, setSelectedMaterial] = useState<Material>('PLA');
|
||
const [selectedPresetId, setSelectedPresetId] = useState<string | null>(systemPresets[0]?.id ?? null);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
|
||
const [colorInputValue, setColorInputValue] = useState('');
|
||
|
||
// Quando os presets carregam (via layout), seleciona o primeiro sistema automaticamente
|
||
useEffect(() => {
|
||
if (selectedPresetId === null && presets.length > 0) {
|
||
setSelectedPresetId(presets.find((p) => p.isSystem)?.id ?? presets[0].id);
|
||
}
|
||
}, [presets, selectedPresetId]);
|
||
|
||
const { control, handleSubmit, watch, formState: { errors } } = useForm<FormData>({
|
||
resolver: zodResolver(schema),
|
||
defaultValues: { brand: '', model: '', totalWeightG: 0, tempHotendC: 210, tempBedC: 60, flowFactorPct: 100 },
|
||
});
|
||
|
||
const totalWeight = watch('totalWeightG');
|
||
const selectedPreset = presets.find((p) => p.id === selectedPresetId);
|
||
const netWeight = selectedPreset && totalWeight
|
||
? calcNetWeight(Number(totalWeight), selectedPreset.spoolWeightG)
|
||
: 0;
|
||
const pct = Math.min(100, Math.round((netWeight / 1000) * 100));
|
||
|
||
const handleOpenColorPicker = (): void => {
|
||
setColorInputValue(selectedColor);
|
||
setIsColorPickerOpen(true);
|
||
};
|
||
|
||
const handleConfirmColor = (): void => {
|
||
if (!colorInputValue) {
|
||
Alert.alert('Erro', 'Digite um código hexadecimal');
|
||
return;
|
||
}
|
||
const normalized = normalizeHex(colorInputValue.trim());
|
||
if (isValidHex(normalized)) {
|
||
setSelectedColor(normalized);
|
||
setHexInput(normalized);
|
||
setIsColorPickerOpen(false);
|
||
setColorInputValue('');
|
||
} else {
|
||
Alert.alert('Erro', 'Código hexadecimal inválido. Use o formato #RRGGBB ou #RGB.');
|
||
}
|
||
};
|
||
|
||
const handleCancelColor = (): void => {
|
||
setIsColorPickerOpen(false);
|
||
setColorInputValue('');
|
||
};
|
||
|
||
|
||
async function onSubmit(data: FormData): Promise<void> {
|
||
if (!selectedPresetId) {
|
||
Alert.alert('Atenção', 'Selecione um preset de carretel.');
|
||
return;
|
||
}
|
||
if (!user) {
|
||
Alert.alert('Erro', 'Usuário não autenticado.');
|
||
return;
|
||
}
|
||
setIsLoading(true);
|
||
try {
|
||
const filament = await createFilamentUseCase.execute(user.id, {
|
||
material: selectedMaterial,
|
||
brand: data.brand,
|
||
model: data.model ?? null,
|
||
colorHex: selectedColor,
|
||
spoolPresetId: selectedPresetId,
|
||
totalWeightG: data.totalWeightG,
|
||
tempHotendC: data.tempHotendC ?? null,
|
||
tempBedC: data.tempBedC ?? null,
|
||
flowFactorPct: data.flowFactorPct ?? null,
|
||
notes: data.notes ?? null,
|
||
});
|
||
addFilament(filament);
|
||
router.back();
|
||
} catch (err) {
|
||
console.error('create filament error', err);
|
||
Alert.alert('Erro', 'Não foi possível salvar o filamento.');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Modal visible={isColorPickerOpen} transparent animationType="fade">
|
||
<View style={styles.modalOverlay}>
|
||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.modalContent}>
|
||
<View style={styles.modalCard}>
|
||
<Text style={styles.modalTitle}>Código Hexadecimal</Text>
|
||
<TextInput
|
||
style={styles.modalInput}
|
||
placeholder="#FF5733"
|
||
placeholderTextColor={colors.textSecondary}
|
||
value={colorInputValue}
|
||
onChangeText={setColorInputValue}
|
||
autoFocus
|
||
/>
|
||
<View style={styles.modalButtons}>
|
||
<TouchableOpacity onPress={handleCancelColor} style={styles.modalBtnCancel}>
|
||
<Text style={styles.modalBtnTextCancel}>Cancelar</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity onPress={handleConfirmColor} style={styles.modalBtnConfirm}>
|
||
<Text style={styles.modalBtnTextConfirm}>Confirmar</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
</KeyboardAvoidingView>
|
||
</View>
|
||
</Modal>
|
||
|
||
<SafeAreaView style={styles.safe}>
|
||
<ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
|
||
{/* Header */}
|
||
<View style={styles.header}>
|
||
<TouchableOpacity onPress={() => router.back()}>
|
||
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||
</TouchableOpacity>
|
||
<Text style={styles.headerTitle}>Novo Filamento</Text>
|
||
<View style={{ width: 24 }} />
|
||
</View>
|
||
|
||
<View style={styles.content}>
|
||
{/* Cor */}
|
||
<Text style={styles.sectionLabel}>COR DO FILAMENTO</Text>
|
||
<Card style={styles.colorCard}>
|
||
<View style={styles.colorPreviewRow}>
|
||
<View style={[styles.colorSquare, { backgroundColor: selectedColor }]} />
|
||
<Text style={styles.hexValue}>{hexInput}</Text>
|
||
<TouchableOpacity onPress={handleOpenColorPicker}><Ionicons name="pencil-outline" size={18} color={colors.textSecondary} /></TouchableOpacity>
|
||
</View>
|
||
<View style={styles.colorPalette}>
|
||
{PRESET_COLORS.map((c) => (
|
||
<TouchableOpacity
|
||
key={c}
|
||
onPress={() => { setSelectedColor(c); setHexInput(c); }}
|
||
style={[styles.colorDot, { backgroundColor: c }, selectedColor === c && styles.colorDotActive]}
|
||
/>
|
||
))}
|
||
<TouchableOpacity style={styles.colorAddBtn} onPress={handleOpenColorPicker}>
|
||
<Ionicons name="add" size={18} color={colors.textSecondary} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
</Card>
|
||
|
||
{/* Material */}
|
||
<Text style={styles.sectionLabel}>MATERIAL</Text>
|
||
<View style={styles.materialChips}>
|
||
{MATERIALS.map((m) => (
|
||
<TouchableOpacity
|
||
key={m}
|
||
onPress={() => setSelectedMaterial(m)}
|
||
style={[styles.chip, selectedMaterial === m && styles.chipActive]}
|
||
>
|
||
<Text style={[styles.chipText, selectedMaterial === m && styles.chipTextActive]}>{m}</Text>
|
||
</TouchableOpacity>
|
||
))}
|
||
</View>
|
||
|
||
{/* Marca e Modelo */}
|
||
<Controller
|
||
control={control}
|
||
name="brand"
|
||
render={({ field }) => (
|
||
<Input label="MARCA" placeholder="Elegoo" error={errors.brand?.message} onChangeText={field.onChange} value={field.value} />
|
||
)}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name="model"
|
||
render={({ field }) => (
|
||
<Input label="MODELO (OPCIONAL)" placeholder="Ex: Rapid, Matte, Silk..." onChangeText={field.onChange} value={field.value ?? ''} />
|
||
)}
|
||
/>
|
||
|
||
{/* Parâmetros de impressão */}
|
||
<Text style={styles.sectionLabel}>PARÂMETROS DE IMPRESSÃO</Text>
|
||
<View style={styles.paramRow}>
|
||
<Controller
|
||
control={control}
|
||
name="tempHotendC"
|
||
render={({ field }) => (
|
||
<View style={styles.paramField}>
|
||
<Input
|
||
label="Hotend (°C)"
|
||
keyboardType="numeric"
|
||
onChangeText={field.onChange}
|
||
value={field.value?.toString() ?? ''}
|
||
leftIcon={<Ionicons name="thermometer-outline" size={16} color={colors.stockLow} />}
|
||
/>
|
||
</View>
|
||
)}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name="tempBedC"
|
||
render={({ field }) => (
|
||
<View style={styles.paramField}>
|
||
<Input
|
||
label="Mesa (°C)"
|
||
keyboardType="numeric"
|
||
onChangeText={field.onChange}
|
||
value={field.value?.toString() ?? ''}
|
||
leftIcon={<Ionicons name="flag-outline" size={16} color={colors.stockMedium} />}
|
||
/>
|
||
</View>
|
||
)}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name="flowFactorPct"
|
||
render={({ field }) => (
|
||
<View style={styles.paramField}>
|
||
<Input
|
||
label="Fluxo (%)"
|
||
keyboardType="numeric"
|
||
onChangeText={field.onChange}
|
||
value={field.value?.toString() ?? ''}
|
||
leftIcon={<Ionicons name="time-outline" size={16} color={colors.accent} />}
|
||
/>
|
||
</View>
|
||
)}
|
||
/>
|
||
</View>
|
||
|
||
{/* Preset */}
|
||
<View style={styles.presetHeader}>
|
||
<Text style={styles.sectionLabel}>PRESET DO CARRETEL</Text>
|
||
<TouchableOpacity onPress={() => router.push('/(app)/config/presets/new')}>
|
||
<Text style={styles.addPresetLink}>+ Personalizado</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
{presets.map((p) => (
|
||
<TouchableOpacity
|
||
key={p.id}
|
||
onPress={() => setSelectedPresetId(p.id)}
|
||
style={[styles.presetItem, selectedPresetId === p.id && styles.presetItemActive]}
|
||
>
|
||
<Ionicons name="disc-outline" size={20} color={selectedPresetId === p.id ? colors.accent : colors.textSecondary} />
|
||
<View style={styles.presetInfo}>
|
||
<Text style={[styles.presetName, selectedPresetId === p.id && styles.presetNameActive]}>{p.name}</Text>
|
||
{selectedPresetId === p.id && <Text style={styles.presetSub}>Carretel: {p.spoolWeightG}g</Text>}
|
||
</View>
|
||
<Text style={styles.presetWeight}>{p.spoolWeightG}g</Text>
|
||
</TouchableOpacity>
|
||
))}
|
||
|
||
{/* Calculadora */}
|
||
<Text style={styles.sectionLabel}>CALCULADORA DE PESO</Text>
|
||
<Text style={styles.calcLabel}>Peso Total na Balança (g)</Text>
|
||
<Controller
|
||
control={control}
|
||
name="totalWeightG"
|
||
render={({ field }) => (
|
||
<Card style={styles.calcInput}>
|
||
<Ionicons name="scale-outline" size={20} color={colors.textSecondary} />
|
||
<TextInput
|
||
style={styles.calcValue}
|
||
keyboardType="numeric"
|
||
placeholder="0"
|
||
placeholderTextColor={colors.textSecondary}
|
||
onChangeText={field.onChange}
|
||
value={field.value?.toString() ?? ''}
|
||
/>
|
||
<Text style={styles.calcUnit}>g</Text>
|
||
</Card>
|
||
)}
|
||
/>
|
||
|
||
{netWeight > 0 && (
|
||
<Card style={styles.resultCard}>
|
||
<View style={styles.resultTop}>
|
||
<Text style={styles.resultLabel}>Filamento Disponível</Text>
|
||
<Text style={styles.resultCalc}>{totalWeight}g – {selectedPreset?.spoolWeightG}g</Text>
|
||
</View>
|
||
<View style={styles.resultBottom}>
|
||
<Text style={styles.resultValue}>{formatWeight(netWeight)}</Text>
|
||
<View style={styles.resultPctBadge}>
|
||
<View style={[styles.resultDot, { backgroundColor: colors.accent }]} />
|
||
<Text style={styles.resultPct}>{pct}%</Text>
|
||
</View>
|
||
</View>
|
||
</Card>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
|
||
{/* CTA fixo */}
|
||
<View style={styles.footer}>
|
||
<Button
|
||
label="Salvar Filamento"
|
||
leftIcon={<Ionicons name="save-outline" size={18} color={colors.bgBase} />}
|
||
onPress={handleSubmit(onSubmit)}
|
||
isLoading={isLoading}
|
||
/>
|
||
</View>
|
||
</SafeAreaView>
|
||
</>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: spacing[5], paddingVertical: spacing[4] },
|
||
headerTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.md, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||
content: { paddingHorizontal: spacing[5], gap: spacing[4], paddingBottom: spacing[10] },
|
||
sectionLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.bold, color: colors.textSecondary, letterSpacing: 0.8, textTransform: 'uppercase' },
|
||
colorCard: { gap: spacing[3] },
|
||
colorPreviewRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||
colorSquare: { width: 40, height: 40, borderRadius: radius.sm },
|
||
hexValue: { flex: 1, fontFamily: typography.fontFamily.mono, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||
colorPalette: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||
colorDot: { width: 32, height: 32, borderRadius: radius.full, borderWidth: 2, borderColor: 'transparent' },
|
||
colorDotActive: { borderColor: colors.accent },
|
||
colorAddBtn: { width: 32, height: 32, borderRadius: radius.full, backgroundColor: colors.bgHover, alignItems: 'center', justifyContent: 'center' },
|
||
materialChips: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||
chip: { paddingHorizontal: spacing[4], paddingVertical: spacing[2], borderRadius: radius.full, backgroundColor: colors.bgSurface, borderWidth: 1, borderColor: colors.border },
|
||
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||
chipText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.medium, color: colors.textSecondary },
|
||
chipTextActive: { color: colors.bgBase },
|
||
paramRow: { flexDirection: 'row', gap: spacing[3] },
|
||
paramField: { flex: 1 },
|
||
presetHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||
addPresetLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.accent },
|
||
presetItem: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[4], borderWidth: 1, borderColor: colors.border },
|
||
presetItemActive: { borderColor: colors.accent },
|
||
presetInfo: { flex: 1 },
|
||
presetName: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||
presetNameActive: { color: colors.accent },
|
||
presetSub: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||
presetWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||
calcLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||
calcInput: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||
calcValue: { flex: 1, fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||
calcUnit: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||
resultCard: { backgroundColor: colors.bgHover },
|
||
resultTop: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: spacing[2] },
|
||
resultLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||
resultCalc: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||
resultBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||
resultValue: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||
resultPctBadge: { flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: colors.accentMuted, paddingHorizontal: spacing[3], paddingVertical: 4, borderRadius: radius.sm },
|
||
resultDot: { width: 8, height: 8, borderRadius: radius.full },
|
||
resultPct: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||
footer: { padding: spacing[5], borderTopWidth: 1, borderTopColor: colors.border, backgroundColor: colors.bgBase },
|
||
// Modal styles
|
||
modalOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center' },
|
||
modalContent: { width: '85%', maxWidth: 320 },
|
||
modalCard: { backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[5], gap: spacing[4] },
|
||
modalTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||
modalInput: { backgroundColor: colors.bgBase, borderWidth: 1, borderColor: colors.border, borderRadius: radius.md, paddingHorizontal: spacing[3], paddingVertical: spacing[2], fontFamily: typography.fontFamily.mono, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||
modalButtons: { flexDirection: 'row', gap: spacing[3] },
|
||
modalBtnCancel: { flex: 1, backgroundColor: colors.bgHover, paddingVertical: spacing[3], borderRadius: radius.md, alignItems: 'center' },
|
||
modalBtnTextCancel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||
modalBtnConfirm: { flex: 1, backgroundColor: colors.accent, paddingVertical: spacing[3], borderRadius: radius.md, alignItems: 'center' },
|
||
modalBtnTextConfirm: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.semibold, color: colors.bgBase },
|
||
});
|