import { Progress as OldProgress, ProgressProps, ConfigProvider } from 'antd';
import React, { useCallback, useContext, useMemo } from 'react';
import './index.less';
import classNames from 'classnames';
import { Icon } from '../Icon';
import { useTheme } from '@btri-ui/hooks';

declare const ProgressStatuses: [
  'normal',
  'exception',
  'active',
  'success',
  'alarm',
];

type InfoConfig = {
  infoIcon?: 'success' | 'error' | 'alarm';
  position?: 'inner' | 'outer';
  unit?: string;
};
type ExtraProps = {
  status?: (typeof ProgressStatuses)[number];
  infoConfig?: InfoConfig;
  size?: 'large' | 'small';
};

const Progress = (props: Omit<ProgressProps, 'status'> & ExtraProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-progress');

  const {
    showInfo = true,
    infoConfig = {},
    percent,
    type = 'line',
    size = 'large',
    status = 'normal',
  } = props;
  const { infoIcon, position = 'outer', unit } = infoConfig;
  const LineProgressInfoNode = useMemo(() => {
    const icons = {
      success: 'CheckOnCircleOne',
      error: 'ErrorTwo',
      alarm: 'AttentionCircleTwo',
    };

    const innerStyle = (() => {
      const styles = {
        outer: {
          style1: {},
          style2: {},
        },
        inner: {
          style1: {
            color: '',
            marginLeft: `calc(-${100 - percent}% + 32px)`,
          },
          style2: {
            color: '#fff',
            marginLeft: `calc(-${100 - percent}% - 30px) `,
          },
        },
      };
      const curStyle = styles[position];
      return curStyle[percent > 10 ? 'style2' : 'style1'];
    })();

    return (
      <div
        className={classNames(
          `${prefixCls}-info`,
          `${prefixCls}-${infoIcon}`,
          `${prefixCls}-${position}`,
        )}
        style={innerStyle}
      >
        {icons[infoIcon] ? (
          <Icon iconName={icons[infoIcon]} />
        ) : (
          <div>{`${percent}%`}</div>
        )}
      </div>
    );
  }, [showInfo, percent, position]);
  const newFormat = useCallback(
    (percent?: number, successPercent?: number) => {
      const icons = {
        success: 'CheckBig',
        error: 'CloseBig',
        alarm: 'Attention',
      };
      const circleNode = () => {
        return icons[infoIcon] ? (
          <div
            className={classNames(
              `${prefixCls}-circle-info`,
              `${prefixCls}-${infoIcon}`,
            )}
          >
            <Icon iconName={icons[infoIcon]} style={{ fontSize: '24px' }} />
          </div>
        ) : (
          <div className={classNames(`${prefixCls}-circle-info`)}>
            {percent}
            <div className="unit">{unit || '%'}</div>
          </div>
        );
      };
      const formats = {
        line: LineProgressInfoNode,
        circle: circleNode(),
      };
      return formats[type];
    },
    [LineProgressInfoNode, type, infoIcon],
  );
  const [themeColors] = useTheme();
  const processColors = useMemo(() => {
    const colors = {
      success: {
        strokeColor: themeColors['@green-6'],
        trailColor: themeColors['@green-1'],
      },
      exception: {
        strokeColor: themeColors['@red-6'],
        trailColor: themeColors['@red-1'],
      },
      alarm: {
        strokeColor: themeColors['@orange-6'],
        trailColor: themeColors['@orange-1'],
      },
      normal: {
        strokeColor: themeColors['@primary-6'],
        trailColor: themeColors['@primary-1'],
      },
    };

    return colors[status];
  }, [status, themeColors]);

  return (
    <OldProgress
      strokeColor={processColors.strokeColor}
      trailColor={processColors.trailColor}
      {...props}
      className={classNames(
        `${prefixCls}-box`,
        `${prefixCls}-${props.status}`,
        `${prefixCls}-${position}`,
        `${prefixCls}-${size}`,
        props.className,
      )}
      status={null}
      format={newFormat}
    ></OldProgress>
  );
};

export { Progress };