import React, { useState } from 'react';
import { Progress, Tooltip } from 'antd';
import './index.less';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';

interface QxProgressProps {
  /**
   * @description 值
   */
  value: number;
  /**
   * @description 进度条类型
   * @default "circle"
   */
  type?: 'bar' | 'circle';
  /**
   * @description 环状进度条规格
   * @default "small"
   */
  size?: 'small' | 'middle' | 'default' | string | undefined;
  /**
   * @description 是否开启隐私保护
   * @default "false"
   */
  privacy?: boolean;
  /**
   * @description 自定义显示的内容
   */
  formatValue?: string | number;
  /**
   * @description 是否需要控制隐私保护的按钮
   * @default "false"
   */
  controlPrivacy?: boolean;
  /**
   * @description 位置
   * @default "left"
   */
  align?: string;
}

export const QxProgress: React.FC<QxProgressProps> = (props) => {
  const { value, type, size, privacy, formatValue, controlPrivacy, align } = props;
  const [privacyLocal, setPrivacyLocal] = useState<boolean>(privacy);

  return (
    <>
      {value || typeof value === 'number' ? (
        <>
          {type === 'bar' ? (
            <div
              className={`qx-progress__horizontal ${
                controlPrivacy && privacy ? 'qx-progress__horizontal--look' : ''
              }`}
              style={{ justifyContent: align || 'left' }}
            >
              <Progress
                percent={
                  (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal) ? 0 : value
                }
                format={() => (
                  <Tooltip
                    overlayClassName={'qx-ph-tooltip'}
                    title={
                      (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
                        ? '***%'
                        : formatValue || `${value}%`
                    }
                    color={'#fff'}
                  >
                    {(!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
                      ? '***%'
                      : formatValue || `${value}%`}
                  </Tooltip>
                )}
              />
              {controlPrivacy && privacy ? (
                <span
                  className={'qx-progress__look'}
                  onClick={() => {
                    setPrivacyLocal(!privacyLocal);
                  }}
                >
                  {privacyLocal ? <EyeInvisibleOutlined /> : <EyeOutlined />}
                </span>
              ) : null}
            </div>
          ) : (
            <div className={'qx-progress__annular'} style={{ justifyContent: align || 'left' }}>
              <Progress
                strokeWidth={10}
                type="circle"
                format={() => (
                  <Tooltip
                    overlayClassName={'qx-pa-tooltip'}
                    title={
                      (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
                        ? '***%'
                        : formatValue || `${value}%`
                    }
                    color={'#fff'}
                  >
                    {(!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
                      ? '***%'
                      : formatValue || `${value}%`}
                  </Tooltip>
                )}
                percent={
                  (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal) ? 0 : value
                }
                className={`qx-pa--main ${
                  size === 'default'
                    ? 'qx-pa--default'
                    : size === 'middle'
                    ? 'qx-pa--middle'
                    : 'qx-pa--small'
                }`}
                width={size === 'default' ? 40 : size === 'middle' ? 32 : 24}
              />
              {controlPrivacy && privacy ? (
                <span
                  className={'qx-progress__look'}
                  onClick={() => {
                    setPrivacyLocal(!privacyLocal);
                  }}
                >
                  {privacyLocal ? <EyeInvisibleOutlined /> : <EyeOutlined />}
                </span>
              ) : null}
            </div>
          )}
        </>
      ) : null}
    </>
  );
};