/** @format */

import React from 'react';

import { colorRgb, 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
 */
interface SCSimpleTextBlockProps {
  /**
   * 容器大小
   */
  size?: { width: number; height: number };
  /**
   * 主题
   */
  theme?: {
    /**
     * 文本颜色
     */
    textColor?: string;
    /**
     * 组件主色
     */
    primaryColor: string;
    secondColor?: string;
    thirdColor?: string;
    colorList?: string[];
  };
  /**
   * 是否显示Icon
   */
  showIcon?: boolean;
  /**
   * 显示数量
   */
  limit?: number;
  /**
   * 中间间距
   */
  spacing?: number;
  /**
   * 底部间距
   */
  marginBottom?: number;
  /**
   * 数据源，统一为数组格式
   */
  data?: DataItem[];
}

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

const SCSimpleTextBlock = (props: SCSimpleTextBlockProps) => {
  const {
    data,
    theme,
    showIcon = true,
    background = globalTheme.primaryColor,
  } = props;

  const defaultProps = {
    size: {
      width: 372,
    },
    theme: {
      textColor: globalTheme.textColor,
      primaryColor: globalTheme.primaryColor,
      secondColor: 'rgba(255, 255, 255, 0.2)',
      thirdColor: 'rgba(151, 151, 151, .2)',
      forthColor: '#6E7178',
      outerBg: 'rgba(56, 68, 102, 0.6)',
      innerBg: globalTheme.primaryColor,
    },
    showIcon,
    limit: 0,
    spacing: 40,
    marginBottom: 16,
  };

  const ThemeList =
    props.theme && props.theme.primaryColor ? props.theme : globalTheme;
  if (!(data && data.length)) {
    return null;
  }
  const currentProps = customMergeWith(defaultProps, theme);
  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}

                <div
                  className="content"
                  style={{
                    background: `${colorRgb(
                      background,
                      (0.16 * (5 - index)) / 4,
                    )}`,
                  }}
                >
                  <div className="bottom-box">
                    <span>{item.title}</span>
                    <span>
                      {item.value}
                      <span className="title">{item.unit}</span>
                    </span>
                  </div>
                </div>
              </div>
            ))
          : null}
      </div>
    </Container>
  );
};

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

export default SCSimpleTextBlock;