import { MyButtons } from '@/common';
import { Modal } from 'antd';
import { useEffect, useImperativeHandle, useState } from 'react';

export function MyModal(props?: any) {
  const { mode = 'btn' } = props || {};
  const [open, setOpen] = useState(false);
  const close = () => {
    setOpen(false);
  };

  useEffect(() => {
    if (open) {
      props?.onOpen?.(true);
    }
  }, [open]);

  useEffect(() => {
    setOpen(props?.defaultOpen);
    console.log(props?.defaultOpen, 'props?.open');
  }, [props?.defaultOpen]);

  useImperativeHandle(props.myRef, () => ({
    close,
  }));
  return (
    <>
      {mode === 'btn' ? (
        props?.trigger ? (
          <div onClick={() => setOpen(true)}>{props?.trigger}</div>
        ) : (
          <MyButtons.View
            title={props.title || '详情'}
            type={props.type || 'primary'}
            size={props.size || 'small'}
            onClick={() => setOpen(true)}
            {...props?.modal?.btnProps}
          />
        )
      ) : (
        ''
      )}
      <Modal
        title={props?.modal?.title || '标题'}
        open={open}
        onOk={() => {
          setOpen(false);
          props?.handleOk?.();
        }}
        onCancel={() => {
          setOpen(false);
          props?.onCancel?.();
        }}
        footer={props?.modal?.footer || false}
        {...props}
      >
        {props?.node}
      </Modal>
    </>
  );
}