import React from 'react';
import classnames from 'classnames';
import AntdPopconfirm from 'antd/es/popconfirm';

import ConfigProvider, { ConfigConsumer } from '../config-provider';
import Icons from '../icons';

import './index.less';

const { QuestionCircleIcon } = Icons;
export default props => (
  <ConfigProvider autoInsertSpaceInButton={false}>
    <ConfigConsumer>
      {({ getPrefixCls }) => {
        const {
          prefixCls: customizePrefixCls,
          overlayClassName,
          okButtonProps = {},
          cancelButtonProps = {},
          icon = <QuestionCircleIcon fill="currentColor" fontSize="inherit" />,
          ...restProps
        } = props;
        const prefixCls = getPrefixCls('popover', customizePrefixCls);
        const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
        const overlayClassNames = classnames(
          prefixClsConfirm,
          overlayClassName,
        );
        const {
          prefixCls: customizePrefixClsOkBtn,
          ...restOkButtonProps
        } = okButtonProps;
        const {
          prefixCls: customizePrefixClsCancelBtn,
          ...restCancelButtonProps
        } = cancelButtonProps;
        const prefixClsOkBtn = getPrefixCls('btn', customizePrefixClsOkBtn);
        const prefixClsCancelBtn = getPrefixCls(
          'btn',
          customizePrefixClsCancelBtn,
        );
        return (
          <AntdPopconfirm
            icon={icon}
            prefixCls={prefixCls}
            overlayClassName={overlayClassNames}
            okButtonProps={{ prefixCls: prefixClsOkBtn, ...restOkButtonProps }}
            cancelButtonProps={{
              prefixCls: prefixClsCancelBtn,
              ...restCancelButtonProps,
            }}
            {...restProps}
          />
        );
      }}
    </ConfigConsumer>
  </ConfigProvider>
);