import { HTTPSTATUS } from '@/constants';
import { apiUpdateProfile } from '@/services/master/AuthController';
import {
  ProForm,
  ProFormInstance,
  ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Button } from 'antd';
import { message } from 'antd/lib';
import { useRef } from 'react';
type ChangeProfileForm = {
  email: string;
  full_name: string;
  phone_number: string;
};
const ChangeProfile = () => {
  const { initialState, refresh } = useModel('@@initialState');
  const formRef = useRef<ProFormInstance<ChangeProfileForm>>();
  const intl = useIntl();
  const [messageAPI, contextHolder] = message.useMessage();
  return (
    <ProForm<ChangeProfileForm>
      formRef={formRef}
      title={intl.formatMessage({
        id: 'master.profile.change-profile.title',
      })}
      initialValues={{
        email: initialState?.currentUserProfile?.email,
        full_name: initialState?.currentUserProfile?.metadata?.full_name,
        phone_number: initialState?.currentUserProfile?.metadata?.phone_number,
      }}
      onFinish={async (values) => {
        try {
          const body: Partial<MasterModel.UserMetadata> = {
            full_name: values.full_name,
            phone_number: values.phone_number,
          };
          const resp = await apiUpdateProfile(body);
          if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
            messageAPI.success(
              intl.formatMessage({
                id: 'master.profile.change-profile.update-success',
              }),
            );
            await refresh();
          } else {
            throw new Error('Update profile failed');
          }
        } catch (error) {
          messageAPI.error(
            intl.formatMessage({
              id: 'master.profile.change-profile.update-fail',
            }),
          );
        }
      }}
      submitter={{
        resetButtonProps: false,
        render: () => {
          return [
            <Button
              key="submit"
              type="primary"
              onClick={() => {
                formRef.current?.submit();
              }}
            >
              <FormattedMessage id="common.confirm" defaultMessage="Cập nhật" />
            </Button>,
          ];
        },
      }}
    >
      {contextHolder}
      <ProFormText readonly name="email" label="Email" />
      <ProFormText
        name="full_name"
        label={intl.formatMessage({
          id: 'master.profile.change-profile.full_name',
        })}
        fieldProps={{ autoFocus: true }}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'common.required_field' }),
          },
        ]}
      />
      <ProFormText
        name="phone_number"
        label={intl.formatMessage({
          id: 'master.profile.change-profile.phone_number',
        })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'common.required_field' }),
          },
        ]}
      />
    </ProForm>
  );
};

export default ChangeProfile;
