import {
  ContentModalForm as InnerForm,
  ContentModalFormProps,
  utils,
} from "@chuntianxiaozhu/adminreactcomps";
import { ReactNode, useRef, useState } from "react";

import defaultSchemaProps from "./config";
import { Button, Space, message } from "antd";
import { Form as FormType, IFormProps } from "@formily/core";
const { storage } = utils;

interface IProps extends Omit<ContentModalFormProps, "confirmHook"> {
  type: "add" | "edit" | "detail";
  extraFooter?: ReactNode[] | ReactNode;
  formStorageKey?: string;
  dropDraft?: boolean;
  dropReset?: boolean;
  confirmHook?: (
    form: FormType | null,
    next: (props?: IFormProps) => any,
    setLoading: React.Dispatch<React.SetStateAction<boolean>>
  ) => any;
}

function ContentModalForm(props: IProps) {
  const {
    schemaProps,
    type = "detail",
    // eslint-disable-next-line react-hooks/rules-of-hooks
    contentModalRef = useRef<any>(),
    // eslint-disable-next-line react-hooks/rules-of-hooks
    formRef = useRef<any>(),
    extraFooter,
    formStorageKey,
    confirmHook,
    dropDraft,
    dropReset,
  } = props;
  const [loading, setLoading] = useState(false);

  const newSchemaProps = {
    components: {
      ...defaultSchemaProps.components,
      ...schemaProps?.components,
    },
    scope: {
      ...defaultSchemaProps.scope,
      ...schemaProps?.scope,
    },
  };

  const handleReset = (showMessage = true) => {
    // 清空数据，清除草稿
    storage.formStorage.set({ key: formStorageKey, values: {} });
    formRef?.current?.reset();
    if (showMessage) {
      message.success("已清空数据和草稿");
    }
  };

  const handleStorage = () => {
    const values = formRef?.current?.values;
    storage.formStorage.set({
      key: formStorageKey,
      values,
    });
    message.success("保存草稿成功");
  };

  return (
    <InnerForm
      maskClosable={false}
      width={800}
      footer={
        <Space>
          {["add", "edit"].includes(type) && !dropDraft ? (
            <Button
              type="default"
              onClick={() => {
                handleStorage();
              }}
            >
              保存草稿
            </Button>
          ) : null}
          {["add", "edit"].includes(type) && !dropReset ? (
            <Button
              type="default"
              onClick={() => {
                handleReset();
              }}
            >
              重置
            </Button>
          ) : null}
          {extraFooter}
          <Button
            type="default"
            onClick={() => {
              contentModalRef.current?.onCancel();
            }}
          >
            取消
          </Button>
          {["add", "edit"].includes(type) ? (
            <Button
              type="primary"
              loading={loading}
              onClick={() => {
                contentModalRef.current?.onOk();
              }}
            >
              确认
            </Button>
          ) : null}
        </Space>
      }
      {...props}
      confirmHook={(form, next) => {
        confirmHook?.(
          form,
          () => {
            next();
            handleReset(false);
          },
          setLoading
        );
      }}
      schemaProps={newSchemaProps}
      formRef={formRef}
      contentModalRef={contentModalRef}
    />
  );
}

export default ContentModalForm;