cms-client/src/components/profile/edit-profile.dialog.view.tsx

import type { ServiceUserUserInfoData } from '@/client';
import { useForm } from '@tanstack/react-form';
import {
  useEffect,
  useState,
} from 'react';
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';
import { Spinner } from '../ui/spinner';
import { Switch } from '../ui/switch';

const formSchema = z.object({
  username: z.string().min(5, '用户名长度至少为5个字符'),
  nickname: z.string().nonempty('昵称不能为空'),
  subtitle: z.string(),
  avatar: z.string().url().or(z.literal('')),
  allow_public: z.boolean(),
});
export function EditProfileDialogView({ user, updateProfile }: { user: ServiceUserUserInfoData; updateProfile: (data: ServiceUserUserInfoData) => Promise<void> }) {
  const form = useForm({
    defaultValues: {
      avatar: user.avatar,
      username: user.username,
      nickname: user.nickname,
      subtitle: user.subtitle,
      allow_public: user.allow_public,
    },
    validators: {
      onBlur: formSchema,
    },
    onSubmit: async ({
      value,
    }) => {
      try {
        await updateProfile(value);
        toast.success('个人资料更新成功');
      }
      catch (error) {
        console.error('Form submission error', error);
        toast.error('更新个人资料失败，请重试');
      }
    },
  });

  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) {
      const id = setTimeout(() => {
        form.reset();
      }, 200);
      return () => clearTimeout(id);
    }
  }, [open, form]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="w-full" size="lg">编辑个人资料</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            void form.handleSubmit().then(() => setOpen(false));
          }}
          className="grid gap-4"
        >
          <DialogHeader>
            <DialogTitle>编辑个人资料</DialogTitle>
          </DialogHeader>
          <form.Field name="username">
            {field => (
              <Field>
                <FieldLabel htmlFor="username">用户名</FieldLabel>
                <Input
                  id="username"
                  name="username"
                  placeholder={user.username}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={e => field.handleChange(e.target.value)}
                />
                <FieldError errors={field.state.meta.errors} />
              </Field>
            )}
          </form.Field>
          <form.Field name="nickname">
            {field => (
              <Field>
                <FieldLabel htmlFor="nickname">昵称</FieldLabel>
                <Input
                  id="nickname"
                  name="nickname"
                  placeholder={user.nickname}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={e => field.handleChange(e.target.value)}
                />
                <FieldError errors={field.state.meta.errors} />
              </Field>
            )}
          </form.Field>
          <form.Field name="subtitle">
            {field => (
              <Field>
                <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
                <Input
                  id="subtitle"
                  name="subtitle"
                  placeholder={user.subtitle}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={e => field.handleChange(e.target.value)}
                />
                <FieldError errors={field.state.meta.errors} />
              </Field>
            )}
          </form.Field>
          <form.Field name="avatar">
            {field => (
              <Field>
                <FieldLabel htmlFor="avatar">头像链接</FieldLabel>
                <Input
                  id="avatar"
                  name="avatar"
                  placeholder={user.avatar}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={e => field.handleChange(e.target.value)}
                />
                <FieldError errors={field.state.meta.errors} />
              </Field>
            )}
          </form.Field>
          <form.Field name="allow_public">
            {field => (
              <Field orientation="horizontal" className="my-2">
                <FieldLabel htmlFor="allow_public">公开个人资料</FieldLabel>
                <Switch id="allow_public" onCheckedChange={e => field.handleChange(e)} defaultChecked={user.allow_public} />
              </Field>
            )}
          </form.Field>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">取消</Button>
            </DialogClose>
            <form.Subscribe
              selector={state => [state.canSubmit, state.isSubmitting]}
              children={([canSubmit, isSubmitting]) => (
                <Button type="submit" disabled={!canSubmit}>
                  {isSubmitting ? <Spinner /> : '保存'}
                </Button>
              )}
            />
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}