import { Button as Buttons } from 'antd';

import React, { useState, memo } from 'react';
import Button from '../Button';
import PopUp from '../PopUp';

type ActionPopupProps = {
  props: any;
  disabled: boolean;
  onConfirm: (e: any) => void;
}

const ActionPopup: React.FC<ActionPopupProps> = function ({ props, disabled, onConfirm }) {
  const { env, translate: __, classnames: cx, classPrefix: ns, deleteBtnLabel } = props
  const [isOpened, setIsOpened] = useState(false)

  return (
    <div className={cx(`ActionPopup`)}>
      <Button
        classPrefix={ns}
        size="sm"
        level="link"
        disabled={disabled}
        onClick={() => {
          !disabled && setIsOpened(true)
        }}
        tooltipContainer={
          env?.getTopModalContainer || undefined
        }
      >
        {deleteBtnLabel ? (
          <span>{deleteBtnLabel}</span>
        ) : __('delete')}
      </Button>
      {
        isOpened && <PopUp
          isShow={isOpened}
          className={'popOverClassName ImgButtonremove'}
          onHide={() => setIsOpened(false)}
          footer={
            <div className={cx('PopUp-content-Button')}>
              <Buttons type="text" onClick={() => { setIsOpened(false) }} >
                取消
              </Buttons>
            </div>
          }
          multiple
          container={env?.getModalContainer ?? document.getElementById('amis-modal-container')!}
          popOverHeatClassName={'PopUp-popOverHeat'}
        >
          <div className={cx('PopUp-content-BT')}>
            {<div className={cx('PopUp-content-Button')}>
              <Buttons type="text" onClick={(e) => {
                onConfirm(e)
                setIsOpened(false);
              }} danger >
                确认删除
              </Buttons>
            </div>}
          </div>
        </PopUp>
      }
    </div>
  )
}

export default ActionPopup