import { Button, Box, TextField } from "@mui/material";
import {
  UserInfo,
  ForgotPasswordRequestBody,
} from "../../../services/interface";
import { forgotPassword } from "../../../services";
import message from "../../../../../../utils/message";
import { useFormPage } from "../../../components/Form/useFormPage";

interface IProps {
  userInfo?: UserInfo;
}

type FormValue = ForgotPasswordRequestBody & { confirmPassword?: string };

export default function Address({ userInfo }: IProps) {
  const { loading, submitHandler, createFieldProps } = useFormPage<FormValue>({
    defaultValue: {
      phone: "",
      password: "",
      code: 0,
      confirmPassword: "",
    },
    submitRequest: (form) => {
      return forgotPassword(form).then((res) => {
        message.success("修改成功");
      });
    },
    fieldProps: { required: true },
  });

  return (
    <Box
      component="form"
      sx={{
        "& .MuiFormControl-root": { mb: 3 },
      }}
      style={{ maxWidth: 500 }}
      onSubmit={submitHandler}
    >
      <TextField
        label="注册邮箱"
        value={userInfo?.email || ""}
        inputProps={{ readOnly: true }}
      />
      <TextField
        {...createFieldProps("password")}
        label="新邮箱"
        inputProps={{ type: "email" }}
      />

      <Button variant="contained" type="submit" disabled={loading}>
        确认修改
      </Button>
    </Box>
  );
}
