import React, { useCallback, useRef } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import ProfileForm, { type ProfileFormHandle } from '@/pages/setting/components/ProfileForm';
import { useProfileSetting } from '@/hooks/setting-hooks';
import type { IUserInfo } from '@/interfaces/database/user-setting';

interface ProfileFormDialogProps {
  open: boolean;
  onClose: () => void;
}

/**
 * 个人资料编辑对话框
 * 复用已有 ProfileForm，并使用 useProfileSetting 提供的 userInfo 与更新方法
 */
const ProfileFormDialog: React.FC<ProfileFormDialogProps> = ({ open, onClose }) => {
  const { t } = useTranslation();
  const { userInfo, updateUserInfo } = useProfileSetting();
  const formRef = useRef<ProfileFormHandle>(null);

  const handleSubmit = useCallback(async (data: Partial<IUserInfo>) => {
    await updateUserInfo(data);
    onClose();
  }, [updateUserInfo, onClose]);

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>{t('setting.personalProfile')}</DialogTitle>
      <DialogContent>
        <ProfileForm ref={formRef} userInfo={userInfo} onSubmit={handleSubmit} showSaveButton={false} />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>{t('setting.cancel')}</Button>
        <Button variant="contained" onClick={() => formRef.current?.submit()}>{t('setting.save')}</Button>
      </DialogActions>
    </Dialog>
  );
};

ProfileFormDialog.displayName = 'ProfileFormDialog';

export default ProfileFormDialog;