/** @format */

import React from 'react';
import styled from 'styled-components';

import { customMergeWith } from '../../../utils';
import { globalTheme } from '../../../utils/theme';
import { Container } from './styled';
/**
 * 科技风 - 数值列表组件
 * DEMO
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/5003fcfd-2558-46ab-a402-11feac2c5121.png
 */
const Outer = styled.div`
  height: 6px;
  width: 100%;
  position: relative;
`;
const Inner = styled.div`
  height: 100%;
`;
interface SCSimpleTextBlockProps {
  /**
   * 容器大小
   */
  size?: { width: number; height: number };
  /**
   * 主题
   */
  theme?: {
    /**
     * 文本颜色
     */
    textColor?: string;
    /**
     * 组件主色
     */
    primaryColor?: string;
    secondColor?: string;
    thirdColor?: string;
    colorList: Array<string>;
  };
  /**
   * 是否显示Icon
   */
  showIcon?: boolean;
  /**
   * 显示数量
   */
  limit?: number;
  /**
   * 中间间距
   */
  spacing?: number;
  /**
   * 底部间距
   */
  marginBottom?: number;
  /**
   * 数据源，统一为数组格式
   */
  data?: DataItem[];

  innerBg?: string;
}

interface DataItem {
  title: string;
  value: number;
  unit: string;
  imgUrl?: string;
}

const SCSimpleTextBlock = (props: SCSimpleTextBlockProps) => {
  const { data, innerBg = globalTheme.primaryColor, ...otherProps } = props;
  const colorLists = props.theme ? props.theme : globalTheme;

  const defaultProps = {
    size: {
      width: 372,
    },
    theme: {
      textColor: colorLists.textColor,
      primaryColor: colorLists.primaryColor
        ? colorLists.primaryColor
        : colorLists.colorList[0],
      secondColor: 'rgba(255, 255, 255, 0.2)',
      thirdColor: 'rgba(151, 151, 151, .2)',
      forthColor: '#6E7178',
      outerBg: '#DDD',
      innerBg,
    },
    showIcon: true,
    limit: 0,
    spacing: 40,
    marginBottom: 16,
    hasProgress: false,
    document: '共计',
  };

  if (!(data && data.length)) {
    return null;
  }

  const currentProps = customMergeWith(defaultProps, otherProps);
  const limitedData = currentProps.limit
    ? data.slice(0, currentProps.limit)
    : data;
  let allValue = 0;
  limitedData.map(item => {
    allValue += item.value;
  });
  return (
    <Container style={currentProps.size} theme={currentProps.theme}>
      <div
        style={{
          height: '100%',
          width: '100%',
          overflow: 'auto',
        }}
      >
        {limitedData && limitedData.length
          ? limitedData.map((item, index) => (
              <div
                key={index}
                className="block-item"
                style={{
                  marginBottom: currentProps.marginBottom,
                }}
              >
                {currentProps.showIcon ? (
                  <div className="img-box">
                    <img src={item.imgUrl} alt="icon" />
                  </div>
                ) : null}
                {currentProps.hasProgress ? (
                  <div className="content">
                    <div className="bottom-box">
                      <span>
                        {currentProps.document}：
                        <span className="count">
                          {Math.round((item.value / allValue) * 1000) / 10.0 +
                            '%'}
                        </span>
                      </span>
                      <span style={{ fontSize: '18px' }}>{item.value}</span>
                    </div>
                    <div className="center-box">
                      <div
                        style={{
                          height: '6px',
                          width: '100%',
                          position: 'relative',
                          background: `${currentProps.theme.outerBg}`,
                        }}
                      >
                        <Inner
                          style={{
                            width: `${~~((item.value / allValue) * 100)}%`,
                            background: currentProps.theme.innerBg,
                          }}
                        ></Inner>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="content">
                    <div className="title">{item.title}</div>
                    <div className="center-box">
                      <div className="divider-left" />
                      <div className="divider-right" />
                    </div>
                    <div className="bottom-box">
                      <span>
                        {currentProps.document}：
                        <span className="count">{item.value}</span>
                        {item.unit}
                      </span>
                      <span className="count-box">
                        占比：
                        <span className="count">
                          {Math.round((item.value / allValue) * 1000) / 10.0 +
                            '%'}
                        </span>
                      </span>
                    </div>
                  </div>
                )}
              </div>
            ))
          : null}
      </div>
    </Container>
  );
};

SCSimpleTextBlock.themeUpdate = function(params: any) {
  return {
    innerBg: params.primaryColor,
  };
};

export default SCSimpleTextBlock;