/*
 * @Author: your name
 * @Date: 2021-01-22 13:45:24
 * @LastEditTime: 2021-01-22 16:47:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \datav\packages\edata-charts\src\components\text\MoreText\index.tsx
 */
/** @format */

// import './style.less';
import _ from 'lodash';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';

import { Box } from './styled';

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

const MoreText = (props: MoreTextProps) => {
  const {
    size = { width: 200, height: 100 },
    text,
    textStyle,
    lineHeight,
    textAlign,
    textIndent,
    isScroll = true,
    colorLinear = false,
    startColor,
    endColor,
    // direction,
  } = props;

  const styleBase = {
    fontSize: 12,
    color: 'black',
  };

  const [TextHeight, setTextHeight] = useState('');
  const textBox: any = useRef<HTMLDivElement>(null);
  const textStyle2 = {
    lineHeight,
    textAlign,
    textIndent,
  };

  // 文本超出滚动
  function move() {
    if (TextHeight > size.height && isScroll) {
      textBox.current.style.animation = '5s move linear infinite normal';
    } else {
      textBox.current.style.animation = '';
    }
  }

  useLayoutEffect(() => {
    setTextHeight(textBox.current.offsetHeight);
    // 文本超出滚动
    move();
  });

  useEffect(() => {
    move();
  }, [size, isScroll]);

  let style = {};
  if (colorLinear) {
    style = _.merge(styleBase, textStyle, textStyle2, {
      background: `linear-gradient(120deg, ${startColor}, ${endColor})`,
      WebkitBackgroundClip: 'text',
      color: 'transparent ',
    });
  } else {
    style = _.merge(styleBase, textStyle, textStyle2);
  }

  return (
    <Box style={size}>
      <div
        className="text-box"
        style={style}
        ref={textBox}
        key={startColor + endColor}
      >
        {text}
        {TextHeight > size.height ? <div className="paste">{text}</div> : null}
      </div>
    </Box>
  );
};

export default MoreText;