import { zodResolver } from "@hookform/resolvers/zod" import { Controller, useForm } from "react-hook-form" import { Appbar, Button, HelperText, TextInput } from "react-native-paper" import { SafeAreaView } from "react-native-safe-area-context" import ColorPicker, { HueSlider, Panel1, Preview, } from "reanimated-color-picker" import type { HabitCreateData } from "@/domain/entities/Habit" import { HabitCreateSchema } from "@/domain/entities/Habit" import type { User } from "@/domain/entities/User" export interface HabitCreateFormProps { user: User } export const HabitCreateForm: React.FC = ({ user }) => { // const {createHabit, habitPresenter} = useHabitCreate() const onSubmit = async (data: HabitCreateData): Promise => { // await habitPresenter.createHabit(data) console.log(data) } const { control, handleSubmit, formState: { errors }, } = useForm({ mode: "onChange", resolver: zodResolver(HabitCreateSchema), defaultValues: { userId: user.id, name: "", color: "#006CFF", icon: "lightbulb", goal: { frequency: "daily", target: { type: "boolean", }, }, }, }) 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" /> { return ( ) }} name="goal.frequency" /> { return ( ) }} name="goal.target.type" /> ) } const styles = { input: { margin: 8, }, }