/** @format */

import React from 'react';
import { customMergeWith } from '../../../utils';
import { Container } from './styled';

/**
 * 科技风 - 文本块
 * DEMO
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/273df9a9-b302-4a13-ac1a-069d4b24fce1.png
 */

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

interface DataItem {
  title: string;
  /**
   * 分别对应第一、第二值
   */
  value: [number, number];
  imgUrl?: string;
}

const SCTextBlock = (props: SCTextBlockProps) => {
  const { data, ...otherProps } = props;

  const defaultProps = {
    size: {
      width: 370,
      height: 60,
    },
    theme: {
      textColor: '#FFFFFF',
      primaryColor: '#50E1A8',
      secondColor: 'rgba(255, 255, 255, 0.7)',
      thirdColor: '#dddddd',
    },
    showIcon: true,
    prevText: '可使用',
    afterText: '使用中',
    limit: 0,
    marginBottom: 12,
  };

  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) => {
            if (!(item.value && item.value.length === 2)) {
              return null;
            }
            const total = Number(item.value[0] + item.value[1]);
            return (
              <div
                key={index}
                className="content-wrapper"
                style={{ marginBottom: currentProps.marginBottom }}
              >
                <div className="dot" />
                {currentProps.showIcon ? (
                  <div
                    className="header-img"
                    style={{ backgroundImage: `url(${item.imgUrl})` }}
                  />
                ) : null}
                <div className="left-box">
                  <span className="count">{total}</span>
                  <span className="title">{item.title}</span>
                </div>
                <div className="right-box">
                  <div className="top-box">
                    <div>
                      <span className="title">{currentProps.prevText}</span>
                      <span className="count complete">{item.value[0]}</span>
                    </div>
                    <div>
                      <span className="count">{item.value[1]}</span>
                      <span className="title">{currentProps.afterText}</span>
                    </div>
                  </div>
                  <div className="bottom-percent">
                    <div
                      className="line complete"
                      style={{ width: `${(item.value[0] / total) * 100}%` }}
                    />
                    <div
                      className="line unComplete"
                      style={{ width: `${(item.value[1] / total) * 100}%` }}
                    />
                  </div>
                </div>
              </div>
            );
          })
        : null}
    </Container>
  );
};

export default SCTextBlock;