import React, { useState, useEffect, useRef } from 'react';
import { Modal, Button, Radio, RadioChangeEvent } from 'antd';
import ReactDOM from 'react-dom';
import { RendererEnv } from '../../env';
interface IProps {
  onButton1Click: (body: number) => void
  body: any
}

const CustomConfirmModal: React.FC<IProps> = ({ onButton1Click, body }) => {
  const [visible, setVisible] = useState(true);
  const [value, setValue] = useState(1);
  const refValue = useRef(value);
  const { env, translate: __, } = body
  const container = env?.getModalContainer ? env.getModalContainer() : document.body

  const handleButton1Click = () => {
    onButton1Click(refValue.current);
    setVisible(false);
  };
  useEffect(() => {
    document.body.addEventListener('keyup', handleKeyUp);
    return () => document.body.removeEventListener('keyup', handleKeyUp)
  }, [])

  const handleKeyUp = (e: KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleButton1Click()
    }
    if (e.key === 'Tab') {
      setValue(state => {
        refValue.current = refValue.current == 1 ? 2 : 1;
        return state == 1 ? 2 : 1
      })
    }
  }
  const onChange = (e: RadioChangeEvent) => {
    refValue.current = e.target.value;
    setValue(e.target.value);
  };
  return visible ? ReactDOM.createPortal(
    <Modal
      title={__('CRUD.batch.processing.data')}
      maskClosable={false}
      visible={visible}
      okText={__('Flow.determine')}
      cancelText={__('Dialog.close')}
      onCancel={() => setVisible(false)}
      onOk={handleButton1Click}
    >
      {__('CRUD.please.confirm')}
      <span> : </span>
      <Radio.Group onChange={onChange} value={value}>
        <Radio value={1}>{__('CRUD.current.page.data')}</Radio>
        <Radio value={2}>{__('CRUD.alldata')}</Radio>
      </Radio.Group>
    </Modal>, container
  ) : null;
};

// 使用示例
const confirmWithThreeButtons = (body: any) => {

  return new Promise((resolve) => {
    const handleButton1Click = (body: number) => {
      resolve(body);
    };

    ReactDOM.render(
      <CustomConfirmModal onButton1Click={handleButton1Click} body={body} />,
      document.createElement('div')
    );
  });
};

export { confirmWithThreeButtons }