import { useForm } from '@tanstack/react-form';
import { toast } from 'sonner';
import z from 'zod';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
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 function EditProfileDialog() {
  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 (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline" className="w-full mt-4" size="lg">编辑个人资料</Button>
      </DialogTrigger>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          void form.handleSubmit();
        }}
      >
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>编辑个人资料</DialogTitle>
          </DialogHeader>
          <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>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">取消</Button>
            </DialogClose>
            <Button type="submit">保存</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  );
}