import {
  useForm,
} from '@tanstack/react-form';
import {
  toast,
} from 'sonner';
import {
  z,
} from 'zod';
import {
  Button,
} from '@/components/ui/button';
import {
  Field,
  FieldError,
  FieldLabel,
} from '@/components/ui/field';
import {
  Input,
} from '@/components/ui/input';

const formSchema = z.object({
  email: z.string(),
  nickname: z.string().min(1),
  subtitle: z.string().min(1),
});

export default function EditProfileForm() {
  const form = useForm({
    defaultValues: {
      email: '',
      nickname: '',
      subtitle: '',
    },
    validators: {
      onBlur: formSchema,
    },
    onSubmit: async ({
      value,
    }) => {
      try {
        toast(
          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
        );
      }
      catch (error) {
        console.error('Form submission error', error);
        toast.error('Failed to submit the form. Please try again.');
      }
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        void form.handleSubmit();
      }}
    >
      <Field>
        <FieldLabel htmlFor="email">Email</FieldLabel>
        <Input
          id="email"
          name="email"
          placeholder="noa@requiem.garden"

          value={form.getFieldValue('email')}
          onChange={e => form.setFieldValue('email', e.target.value)}
        />
        <FieldError />
      </Field>
      <Field>
        <FieldLabel htmlFor="nickname">昵称</FieldLabel>
        <Input
          id="nickname"
          name="nickname"
          placeholder="Noa Virellia"

          value={form.getFieldValue('nickname')}
          onChange={e => form.setFieldValue('nickname', e.target.value)}
        />

        <FieldError />
      </Field>
      <Field>
        <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
        <Input
          id="subtitle"
          name="subtitle"
          placeholder="天生骄傲"

          value={form.getFieldValue('subtitle')}
          onChange={e => form.setFieldValue('subtitle', e.target.value)}
        />

        <FieldError />
      </Field>
      <Button type="submit">提交</Button>
    </form>
  );
}