import { zodResolver } from "@hookform/resolvers/zod" import { useState } from "react" import { Controller, useForm } from "react-hook-form" import { ScrollView, StyleSheet } from "react-native" import { Button, HelperText, Snackbar, TextInput } from "react-native-paper" import { SafeAreaView } from "react-native-safe-area-context" import ColorPicker, { HueSlider, Panel1, Preview, } from "reanimated-color-picker" import type { Habit, HabitEditData } from "@/domain/entities/Habit" import { HabitEditSchema } from "@/domain/entities/Habit" import { useHabitsTracker } from "../../contexts/HabitsTracker" export interface HabitEditFormProps { habit: Habit } export const HabitEditForm: React.FC = ({ habit }) => { const { habitEdit, habitsTrackerPresenter } = useHabitsTracker() const { control, handleSubmit, formState: { errors }, } = useForm({ mode: "onChange", resolver: zodResolver(HabitEditSchema), defaultValues: { id: habit.id, userId: habit.userId, name: habit.name, color: habit.color, icon: habit.icon, }, }) const [isVisibleSnackbar, setIsVisibleSnackbar] = useState(false) const onDismissSnackbar = (): void => { setIsVisibleSnackbar(false) } const onSubmit = async (data: HabitEditData): Promise => { await habitsTrackerPresenter.habitEdit(data) setIsVisibleSnackbar(true) } return ( { return ( <> {errors.name != null ? ( {errors.name.type === "too_big" ? "Name is too long" : "Name is required"} ) : null} ) }} name="name" /> { return ( { onChange(value.hex) }} > ) }} name="color" /> { return ( ) }} name="icon" /> ✅ Habit Saved successfully! ) } const styles = StyleSheet.create({ spacing: { marginVertical: 16, }, })