/** @format */

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

const Title = styled.div`
  font-size: 14px;
  color: #fff;
  padding: 2px 6px;
  background-color: rgba(0, 76, 173, 0.4);
`;
const Total = styled.span`
  font-size: 20px;
  font-weight: bold;
  color: #b0bac5;
  margin-right: 6px;
  margin-left: 6px;
`;
const Unit = styled.span`
  font-size: 12px;
  color: #b0bac5;
`;

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

const NumberCount = (props: NumberCountProps) => {
  const {
    size,
    title = '工单总数',
    total = 160,
    unit = '单',
    titleStyle,
    totalStyle,
    unitStyle,
    data,
  } = props;

  function getCurrentText() {
    const dataSourceText =
      data && data.length ? data[0] && data[0].value : null;
    return typeof dataSourceText !== 'undefined' && dataSourceText !== null
      ? dataSourceText
      : total;
  }

  const [currentText, setCurrentText] = useState(getCurrentText());

  const styleBase = {
    height: 84,
    width: 80,
    whiteSpace: 'nowrap',
  };

  useEffect(() => {
    setCurrentText(getCurrentText());
  }, [total, data]);

  const style: Record<string, any> = _.merge(styleBase, size);

  return (
    <div style={style}>
      <Title style={titleStyle}>{title}</Title>
      <Total style={totalStyle}>{currentText}</Total>
      <Unit style={unitStyle}>{(data && data[0]?.unit) || unit}</Unit>
    </div>
  );
};

export default NumberCount;