import React from 'react';
import OverlayTrigger, { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
import Confirm from './Confirm';
import './style/index.less';

export interface PopoverProps extends OverlayTriggerProps {
  content?: React.ReactNode;
  visibleArrow?: boolean;
}

export default class Popover extends React.Component<PopoverProps> {
  static Confirm = Confirm;
  public static defaultProps: PopoverProps = {
    prefixCls: 'w-popover',
    placement: 'top',
    usePortal: true,
    isOpen: false,
    visibleArrow: true,
  };
  renderArrow = () => {
    const { prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-arrow`}>
        <svg viewBox="0 0 30 30">
          <path
            fillOpacity="0.2"
            d="M8.11 6.302c1.015-.936 1.887-2.922 1.887-4.297v26c0-1.378-.868-3.357-1.888-4.297L.925 17.09c-1.237-1.14-1.233-3.034 0-4.17L8.11 6.302z"
          />
          <path
            fill="#fff"
            d="M8.787 7.036c1.22-1.125 2.21-3.376 2.21-5.03V0v30-2.005c0-1.654-.983-3.9-2.21-5.03l-7.183-6.616c-.81-.746-.802-1.96 0-2.7l7.183-6.614z"
          />
        </svg>
      </div>
    );
  };
  render() {
    const { prefixCls, className, content, visibleArrow, ...other } = this.props;
    const cls = [prefixCls, className, !visibleArrow ? 'no-arrow' : null].filter(Boolean).join(' ').trim();
    return (
      <OverlayTrigger
        {...other}
        overlay={
          <div className={cls}>
            {visibleArrow && this.renderArrow()}
            <div className={`${prefixCls}-inner`}>{this.props.content}</div>
          </div>
        }
      >
        {typeof this.props.children === 'object' && (this.props.children as JSX.Element).type.name !== 'Icon' ? (
          this.props.children
        ) : (
          <span style={{ display: 'block', writingMode: 'vertical-rl' }}>{this.props.children}</span>
        )}
      </OverlayTrigger>
    );
  }
}