import Button from '../button';
import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Balloon as NextBalloon } from '@alifd/next';
import { BalloonProps as NextBalloonProps } from '@alifd/next/types/balloon';

interface BalloonProps extends Omit<NextBalloonProps, 'type' | 'linkProps' | 'buttonProps' | 'onButtonClick'> {
  type?: 'normal' | 'dark' | 'primary';

  linkProps?: string[];
  buttonProps?: string;
  onButtonClick?: ()=>void;
}

class Balloon extends Component<BalloonProps> {
  static Tooltip = NextBalloon.Tooltip;

  render() {
    const { prefix = 'next-', type = 'normal', title, children, closable, linkProps, buttonProps, onButtonClick, ...otherProps } = this.props;

    if (!linkProps && !buttonProps && !onButtonClick) {
      return (
        <NextBalloon
          type = {type as 'normal' | 'primary'}
          title = {title}
          children = {children}
          {...otherProps}
          className={cls(
            this.props.className, {
              [`${prefix}balloon-with-title`]: title,
              [`${prefix}add-closable`]: closable,
            })}
          closable = {closable ? closable : false}
        />
      );
    }

    return (
      <div>
        <NextBalloon
          type = {type as 'normal' | 'primary'}
          title = {title}
          {...otherProps}
          className={cls(
            this.props.className, {
              [`${prefix}balloon-with-title`]: title,
              [`${prefix}add-closable`]: closable,
              [`${prefix}balloon-with-action`]: linkProps || buttonProps || onButtonClick,
            })}
          closable = {closable ? closable : false}
        >
          {children}
          <div className={`${prefix}balloon-action`}>
            <a className = {linkProps ? `${prefix}has-action-link` : `${prefix}action-hidden`} href={linkProps ? linkProps[0] : undefined} >
              {linkProps ? linkProps[1] : undefined}
            </a>
            <Button onClick={onButtonClick ? onButtonClick : undefined} className = {buttonProps ? `${prefix}has-action-button` : `${prefix}action-hidden`} type="primary" size="xs">
              {buttonProps ? buttonProps : undefined}
            </Button>
          </div>
        </NextBalloon>
      </div>
    );
  }
}

hoistNonReactStatics(Balloon, NextBalloon);
export default ConfigProvider.config(Balloon);
