import React, { useRef } from 'react';
import { Modal, Popconfirm } from 'antd';
import useConfig from './../../use/useConfig';
import style from './actionText.module.scss';

interface ActionTextProps {
  deleteTipMode?: 'modal' | 'popconfirm';
  onClick?(): void;
}

interface Extend {
  Delete: React.FC<ActionTextProps>;
  Edit: React.FC<ActionTextProps>
}

const ActionText: React.FC<ActionTextProps> & Extend = (props) => {
  const clickTimer = useRef<number | null>(null);

  function onClick() {
    if (clickTimer.current || !props.onClick) return;

    clickTimer.current = window.setTimeout(() => {
      props.onClick!();
      clickTimer.current = null;
    }, 100);
  }

  return (
    <span {...props} onClick={onClick} className={style.action}/>
  )
}

ActionText.Edit = (props) => {
  const config = useConfig();
  const permissio = config.getPermissio?.() || {};

  return (
    <ActionText {...props}>
      {permissio.edit ? config.local?.edit : config.local?.view}
    </ActionText>
  )
}

ActionText.Delete = ({ deleteTipMode = 'popconfirm', ...props }) => {
  const config = useConfig();
  const permissio = config.getPermissio?.() || {};

  function onClick() {
    if (deleteTipMode === 'modal') {
      Modal.confirm({
        title: config.local?.deleteConfirmTitle,
        onOk: () => props.onClick?.()
      })
    }
  }

  return permissio.delete ? (
    <ActionText {...props} onClick={onClick}>
      {deleteTipMode === 'popconfirm' ? (
        <Popconfirm
          title={config.local?.deleteConfirmTitle}
          onConfirm={props.onClick}>
          {config.local?.delete}
        </Popconfirm>
      ) : config.local?.delete}
    </ActionText>
  ) : null
}

export default ActionText;