import { Button, message } from "antd";
import "./index.scss";
import { FC, memo, useCallback, useState } from "react";

export interface FormPageFooterProps {
  disabled?: boolean;
  showSubmit?: boolean;
  onSubmit?(): void;
  onCancel?(): void;
}

export const FormPageFooter: FC<FormPageFooterProps> = memo(
  ({ onSubmit, onCancel, disabled, showSubmit = true }) => {
    const [loading, setLoading] = useState(false);

    const handleClick = useCallback(async () => {
      setLoading(true);
      try {
        await onSubmit?.();

        message.open({
          type: "success",
          content: "操作成功",
        });
      } finally {
        setLoading(false);
      }
    }, [onSubmit]);

    const handleCancel = useCallback(() => {
      onCancel?.();
    }, [onCancel]);

    return (
      <div className="form-page-footer">
        <div className="form-page-footer-container">
          {showSubmit && (
            <Button
              size="large"
              disabled={disabled}
              loading={loading}
              type="primary"
              onClick={handleClick}
            >
              提交
            </Button>
          )}
          <Button size="large" onClick={handleCancel}>
            取消
          </Button>
        </div>
      </div>
    );
  }
);
