/** @format */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import NumberBox from './Number';

const Title = styled.div`
  font-size: 14px;
  color: #fff;
  padding: 2px 6px;
`;
const Content = styled.div`
  font-size: 20px;
  color: #b0bac5;
  display: flex;
  flex-direction: row;
  line-height: 1;
  align-items: baseline;
`;
const Prefix = styled.div`
  font-size: 20px;
  color: #b0bac5;
`;
const Numberd = styled.div`
  font-size: 20px;
  color: #b0bac5;
`;
const Unit = styled.div`
  font-size: 12px;
  color: #b0bac5;
`;

interface DigitalCardProps {
  size?: Record<string, any>;
  data?: any;
  [key: string]: any;
}

const DigitalCard = (props: DigitalCardProps) => {
  const {
    size,
    title = 'give me a title',
    titleSpace, // 全局间隔
    titleWay, // 全局排列方式
    unit, // 单位
    titleStyle, // title样式
    prefixStyle, // 前缀样式
    NumberStyle, // 数字样式
    unitStyle, // 单位样式
    prefix, // 前缀
    leftSpace, // 前缀-数字间距
    rightSpace, // 数字-后缀间距
    roundNumber, // 四舍五入
    justifyContent, // 水平对齐方式
    alignItems, // 垂直对齐方式
    thousands, // 千分位开启
    numberSpace, // 数字间隔
    numberBackground, // 数字背景
    numberRadius, // 背景圆角
    stringBackground, // 分隔符背景
    action, // 动画
    time, // 动画时间
    data, // 数值
    requestKey,
  } = props;
  const [number, setNumber] = useState([]);

  function getCurrentText() {
    let newData = { ...data };
    if (data instanceof Array) {
      newData = data[0];
    } else if (data instanceof Object) {
      newData = data;
    } else {
      return;
    }

    if (newData && newData.value) {
      let value = newData.value;
      let decimals = '';
      if (roundNumber) {
        value = Math.round(Number(value)).toString();
      } else {
        decimals = value.split('.')[1];
      }

      if (thousands) {
        const regExp = /\d{1,3}(?=(\d{3})+$)/g;
        value = value.split('.')[0].replace(regExp, function(match: any) {
          return match + ',';
        });
        if (decimals) {
          value = value + '.' + decimals;
        }
      }

      const dataSourceText = value ? value.split('') : [];

      setNumber(dataSourceText);
    }
  }
  useEffect(() => {
    getCurrentText();
  }, [data, thousands]);

  const styleBase = {
    height: 84,
    width: 80,
    whiteSpace: 'nowrap',
    display: 'flex',
    flexDirection: titleWay,
    justifyContent: 'flex-start',
  };

  const style: Record<string, any> = _.merge(styleBase, size, {
    alignItems: titleWay === 'row' ? alignItems : '',
  });

  const contentStyles = _.merge(
    { justifyContent },
    { alignItems },
    { marginTop: titleWay === 'column' ? titleSpace : '' },
    { marginLeft: titleWay === 'row' ? titleSpace : '' },
    { marginBottom: titleWay === 'column-reverse' ? titleSpace : '' },
  ); // 对齐方式
  // 数字样式
  const numberStyle = _.merge(NumberStyle, {
    marginRight: numberSpace,
    borderRadius: numberRadius,
    display: 'inline-block',
  });
  const space = {
    marginLeft: leftSpace,
    marginRight: rightSpace,
  };

  return (
    <div style={style}>
      <Title style={titleStyle}>{title}</Title>
      <Content style={contentStyles}>
        <Prefix style={prefixStyle}>{prefix}</Prefix>
        <Numberd style={space}>
          {number.map((item: any, index: number) => {
            return (
              <NumberBox
                key={index}
                data={item}
                action={action}
                time={time}
                requestKey={requestKey}
                style={{
                  background:
                    item === ',' || item === '.'
                      ? stringBackground
                        ? numberBackground
                        : ''
                      : numberBackground,
                  ...numberStyle,
                }}
              ></NumberBox>
            );
          })}
        </Numberd>
        <Unit style={unitStyle}>{unit}</Unit>
      </Content>
    </div>
  );
};

export default DigitalCard;