/** @format */
import _ from 'lodash';
import {} from 'react';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';

import { Box } from './styled';

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

const Marquee = (props: MarqueeProps) => {
  const {
    size = {
      width: 200,
      height: 30,
    },
    textStyle = {
      color: '',
      fontFamily: '微软雅黑',
      fontWeight: 'normal',
      fontSize: '',
    },
    data = [{ value: '绿城未来数智科技有限公司出品' }],
  } = props;

  const textBox: any = useRef<HTMLDivElement>(null);

  const styleBase = {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
  };

  const {
    carousel = true,
    interval = false,
    time = 1000,
    preStagnation = 0,
    endStagnation = 0,
  } = props.animation;

  const move = () => {
    const speed = interval ? time : 2000;
    const iterationCount = carousel ? 'infinite' : 1;
    if (!textBox) return;
    textBox.current.style.animation = `move ${speed}ms linear ${iterationCount}`;
  };

  useLayoutEffect(() => {
    move();
    addEvent();
  }, [carousel, interval, endStagnation, preStagnation]);

  const addEvent = () => {
    const dom = textBox.current;
    if (!dom) return;

    dom.addEventListener('animationstart', () => {
      delay(preStagnation);
    });

    dom.addEventListener('webkitAnimationIteration', function() {
      // 前置
      delay(preStagnation + endStagnation);
    });

    const delay = (delaytime: any) => {
      if (_.isNumber(delaytime) && delaytime > 0) {
        dom.style.animationPlayState = 'paused';

        setTimeout(() => {
          dom.style.animationPlayState = 'running';
        }, delaytime);
      }
    };
  };

  return (
    <Box style={_.merge(styleBase, size)}>
      <div className="marquee" ref={textBox} style={textStyle}>
        <div>{data[0]?.value}</div>
        <div className="copy_text">{data[0]?.value}</div>
      </div>
    </Box>
  );
};

export default Marquee;