import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { Badge as NextBadge } from '@alifd/next';
import { BadgeProps as NextBadgeProps } from '@alifd/next/types/badge';

interface BadgeAddProps {
  size?: 'medium' | 'small';
  status?: 'success' | 'warning' | 'error';
}

interface BadgeProps extends NextBadgeProps, BadgeAddProps {}

class Badge extends Component<BadgeProps> {
  render() {
    const { prefix = 'next-', size = 'small', count, className, overflowCount, dot, status, ...otherProps } = this.props;
    let content: React.ReactNode;
    if (status && !dot) {
      if (status === 'warning') {
        content = <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
          <g id="33.-✅-Badge-徽标数-*" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Badge-徽标数" transform="translate(-355.000000, -1098.000000)">
              <g id="状态样式" transform="translate(90.000000, 916.000000)">
                <g id="状态样式-时间-黄色" transform="translate(237.000000, 182.000000)">
                  <g id="Icon-/-Filled-/-Time-/-Time-/-20" transform="translate(28.000000, 0.000000)">
                    <g id="编组" transform="translate(1.250000, 1.250000)">
                      <path d="M8.75,0 C13.5824916,0 17.5,3.91750844 17.5,8.75 C17.5,13.5824916 13.5824916,17.5 8.75,17.5 C3.91750844,17.5 0,13.5824916 0,8.75 C0,3.91750844 3.91750844,0 8.75,0 Z" id="路径" stroke="#FFFFFF" fill="#FFAB14"></path>
                      <path d="M8.75,4.125 C8.4294776,4.125 8.16530802,4.36627512 8.12920483,4.6771118 L8.125,4.75 L8.125,9.75 C8.125,9.92144129 8.19402821,10.0767602 8.30580764,10.1896797 L8.36513831,10.2424845 L8.41529131,10.2991748 L10.625,12.5088835 C10.8690777,12.7529612 11.2648058,12.7529612 11.5088835,12.5088835 C11.734186,12.283581 11.7515169,11.9290616 11.5608764,11.6838796 L11.5088835,11.625 L9.375,9.49125 L9.375,4.75 C9.375,4.40482203 9.09517797,4.125 8.75,4.125 Z" id="形状" fill="#FFFFFF"></path>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>;
      } else if (status === 'error') {
        content =
          <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
            <g id="33.-✅-Badge-徽标数-*" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Badge-徽标数" transform="translate(-497.000000, -1097.000000)">
                <g id="状态样式" transform="translate(90.000000, 916.000000)">
                  <g id="状态样式-感叹号-红色" transform="translate(379.000000, 181.000000)">
                    <g id="Icon-/-Filled-/-Status-/-Warning-/-20" transform="translate(28.000000, 0.000000)">
                      <path d="M10,1.75 C12.2781746,1.75 14.3406746,2.6734127 15.8336309,4.16636906 C17.3265873,5.65932541 18.25,7.72182541 18.25,10 C18.25,12.2781746 17.3265873,14.3406746 15.8336309,15.8336309 C14.3406746,17.3265873 12.2781746,18.25 10,18.25 C7.72182541,18.25 5.65932541,17.3265873 4.16636906,15.8336309 C2.6734127,14.3406746 1.75,12.2781746 1.75,10 C1.75,7.72182541 2.6734127,5.65932541 4.16636906,4.16636906 C5.65932541,2.6734127 7.72182541,1.75 10,1.75 Z" id="路径" stroke="#FFFFFF" fill="#C82727"></path>
                      <rect id="矩形" opacity="0" x="0" y="0" width="20" height="20"></rect>
                      <path d="M10,13.75 C9.65482203,13.75 9.375,14.029822 9.375,14.375 C9.375,14.720178 9.65482203,15 10,15 C10.345178,15 10.625,14.720178 10.625,14.375 C10.625,14.029822 10.345178,13.75 10,13.75 Z M10,5 C9.6794776,5 9.41530802,5.24127512 9.37920483,5.5521118 L9.375,5.625 L9.375,11.875 C9.375,12.220178 9.65482203,12.5 10,12.5 C10.3205224,12.5 10.584692,12.2587249 10.6207952,11.9478882 L10.625,11.875 L10.625,5.625 C10.625,5.27982203 10.345178,5 10,5 Z" id="形状" fill="#FFFFFF"></path>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </svg>;
      } else {
        content =
        <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
          <g id="33.-✅-Badge-徽标数-*" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Badge-徽标数" transform="translate(-213.000000, -1098.000000)">
              <g id="状态样式" transform="translate(90.000000, 916.000000)">
                <g id="状态样式-对号-绿色" transform="translate(95.000000, 182.000000)">
                  <g id="Icon-/-Filled-/-Status-/-Checkmark-/-20" transform="translate(28.000000, 0.000000)">
                    <rect id="矩形" fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="20" height="20"></rect>
                    <path d="M10,1.75 C12.2781746,1.75 14.3406746,2.6734127 15.8336309,4.16636906 C17.3265873,5.65932541 18.25,7.72182541 18.25,10 C18.25,12.2781746 17.3265873,14.3406746 15.8336309,15.8336309 C14.3406746,17.3265873 12.2781746,18.25 10,18.25 C7.72182541,18.25 5.65932541,17.3265873 4.16636906,15.8336309 C2.6734127,14.3406746 1.75,12.2781746 1.75,10 C1.75,7.72182541 2.6734127,5.65932541 4.16636906,4.16636906 C5.65932541,2.6734127 7.72182541,1.75 10,1.75 Z" id="形状" stroke="#FFFFFF" fill="#29A64E"></path>
                    <path d="M15.1110435,6.43305826 C14.885741,6.20775579 14.5312216,6.19042483 14.2860396,6.38106538 L14.22716,6.43305826 L8.428125,12.23125 L6.06694174,9.87055826 C5.82286406,9.62648058 5.42713594,9.62648058 5.18305826,9.87055826 C4.95775579,10.0958607 4.94042483,10.4503801 5.13106538,10.6955622 L5.18305826,10.7544417 L7.83470869,13.4060922 C7.91531259,13.4866961 8.01245513,13.5406814 8.11478286,13.5681008 C8.33882106,13.7311019 8.64671595,13.7267665 8.8662934,13.5550945 L8.92385912,13.5041261 L15.1110435,7.31694174 C15.3551211,7.07286406 15.3551211,6.67713594 15.1110435,6.43305826 Z" id="路径" fill="#FFFFFF"></path>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </svg>;
      }
      return (
        <NextBadge
          content = {content}
          {...otherProps}
          className = {cls({ className,
            [`${prefix}badge-success`]: status === 'success',
            [`${prefix}badge-warning`]: status === 'warning',
            [`${prefix}badge-error`]: status === 'error',
          })}
        />
      );
    }

    return (
      <NextBadge
        {...this.props}
        className = {cls({ className,
          [`${prefix}badge-medium`]: size === 'medium',
          [`${prefix}badge-small`]: size === 'small' || !size,
          [`${prefix}badge-not-overflow`]: !overflowCount && Number(count) < 10,
          [`${prefix}badge-overflow`]: overflowCount || Number(count) > 9,
          [`${prefix}badge-success`]: status === 'success',
          [`${prefix}badge-warning`]: status === 'warning',
          [`${prefix}badge-error`]: status === 'error',
        })}
      />
    );
  }
}


export default ConfigProvider.config(Badge);
