/** @format */

import React from 'react';

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
 */

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

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

const SCMeasureBlock = (props: SCMeasureBlockProps) => {
  const { data, ...otherProps } = 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',
      fifthColor: 'rgba(255, 255, 255, 0.6)',
      primaryAlign: 'center',
    },
    showIcon: true,
    limit: 0,
    spacing: 40,
    marginBottom: 16,
  };

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

  const currentProps = customMergeWith(defaultProps, otherProps);
  const limitedData = currentProps.limit
    ? data.slice(0, currentProps.limit)
    : data;

  return (
    <Container style={currentProps.size} theme={currentProps.theme}>
      {limitedData && limitedData.length
        ? limitedData.map((item, index) => (
            <div
              key={index}
              className="block-item"
              style={{
                marginBottom: currentProps.marginBottom,
                width: `calc((100% - ${currentProps.spacing}px)/2)`,
              }}
            >
              <div className="content">
                <div className="header-box">
                  {currentProps.showIcon ? (
                    <div className="img-box">
                      <img src={item.imgUrl} alt="icon" />
                    </div>
                  ) : null}
                  <div className="header-right">
                    <div className="title">{item.title}</div>
                    <div className="center-box">
                      <div className="divider-left" />
                      <div className="divider-right" />
                    </div>
                  </div>
                </div>

                <div className="bottom-box">
                  <span
                    className="count"
                    style={currentProps.showIcon ? { paddingLeft: '34px' } : {}}
                  >
                    {item.value}
                  </span>
                  <span className="unit">{item.unit}</span>
                </div>
              </div>
            </div>
          ))
        : null}
    </Container>
  );
};

export default SCMeasureBlock;