import React, { useRef } from 'react';
import { Button as AButton, Modal } from 'antd';
import { ButtonProps as AButtonProps } from 'antd/lib/button/button';
import useConfig from './../../use/useConfig';

interface IExtendElement {
  Delete: React.FC<ButtonProps>;
  Create: React.FC<ButtonProps>;
  Add: React.FC<ButtonProps>;
  Submit: React.FC<ButtonProps>;
  Download: React.FC<ButtonProps>;
  Save: React.FC<ButtonProps>;
}

interface ButtonProps extends AButtonProps {
  permit?: 'delete' | 'create' | 'edit' | 'view' | 'download';
  langKey?: string
}

const Button: React.FC<ButtonProps> & IExtendElement = ({
  permit,
  langKey,
  ...props
}) => {
  const config = useConfig();
  const clickTimer = useRef<number | null>(null);
  const permissio = config.getPermissio?.() || {};

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

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

  return permit && permissio[permit] ? (
    <AButton {...props} onClick={onClick}>
      {props.children || config.local?.[langKey || permit || '']}
    </AButton>
  ) : null
}

Button.Delete = (props) => {
  const config = useConfig();

  function onClick(e: any) {
    Modal.confirm({
      title: config.local?.deleteConfirmTitle,
      onOk: () => props.onClick?.(e)
    })
  }

  return (
    <Button {...props} permit='delete' onClick={onClick} />
  )
}

Button.Create = (props) => {
  return (
    <Button type='primary' {...props} permit='create' />
  )
}

Button.Add = (props) => {
  return (
    <Button type='primary' {...props} permit='create' langKey='add' />
  )
}

Button.Submit = (props) => {
  return (
    <Button type='primary' {...props} permit='edit' />
  )
}

Button.Save = (props) => {
  return (
    <Button {...props} permit='edit' />
  )
}

Button.Download = (props) => {
  return (
    <Button {...props} permit='download' />
  )
}

export default Button;