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="normal"
          title={title}
          children={children}
          {...otherProps}
          className={cls(this.props.className, {
            [`${prefix}balloon-with-title`]: title,
            [`${prefix}add-closable`]: closable,
            [`${prefix}balloon-dark`]: type === 'dark',
          })}
          closable={closable ? closable : false}
        />
      );
    }

    return (
      <div>
        <NextBalloon
          type="normal"
          title={title}
          {...otherProps}
          className={cls(this.props.className, {
            [`${prefix}balloon-with-title`]: title,
            [`${prefix}add-closable`]: closable,
            [`${prefix}balloon-with-action`]:
              linkProps || buttonProps || onButtonClick,
            [`${prefix}balloon-dark`]: type === 'dark',
          })}
          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);