/** @format */

import cloneDeep from 'lodash/cloneDeep';
import isEqual from 'lodash/isEqual';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';

import { Container } from './styled';

interface OwnerVoiceListProps {
  data: Record<string, any>[];
  limit: number;
  background: string;
  iconUrl: string;
  interval: number;
  moveType: string;
  size: {
    width: number;
    height: number;
  };
}

const OwnerVoiceList = (props: OwnerVoiceListProps) => {
  const {
    data = [],
    limit = 4,
    interval = 2,
    moveType = 'all',
    background = 'rgba(0, 111, 255, 0.5)',
    iconUrl = 'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/058c0e60-2335-4176-9236-577ba4c3734b.svg',
    size: { width, height },
  } = props;
  const Container1: any = useRef<HTMLDivElement>(null);
  const [cachedData, setCachedData] = useState<Record<string, any>[]>(data);

  useEffect(() => {
    if (data && data.length) {
      data.forEach((item, index) => {
        item.index = index;
      });
    }
  }, [data]);

  useEffect(() => {
    if (!isEqual(data, cachedData)) {
      setCachedData(data);
    }
  }, [data]);

  // 滚动
  function moveOneLine() {
    Container1.current.style.transition = 'all 1s ease';
    Container1.current.style.transform = `translateY(-${(1 / data.length) *
      100}%)`;
  }
  function moveAllLine() {
    Container1.current.style.transition = 'all 1s ease';
    Container1.current.style.transform = `translateY(-${(1 /
      (data.length + limit)) *
      limit *
      100}%)`;
  }
  // 回滚
  function moveBack() {
    Container1.current.style.transition = 'none';
    Container1.current.style.transform = 'translateY(0%)';
  }

  function handleTimer() {
    let cloneData = cloneDeep(cachedData);
    moveType === 'one' && cloneData.push(cachedData[0]);

    if (moveType === 'all' && cachedData.length > 0) {
      for (let i = 0; i < limit; i++) {
        cloneData.push(cachedData[i]);
      }
      setCachedData(cloneData);
    }
    // 滚动
    Container1.current.style && moveType === 'one' && moveOneLine();
    Container1.current.style && moveType === 'all' && moveAllLine();
    // 回归位置
    setTimeout(() => {
      moveType === 'one' && cloneData.shift();
      moveType === 'all' && (cloneData = cloneData.slice(limit));
      Container1.current && Container1.current.style && moveBack();
      setCachedData(cloneData);
    }, 1000);
  }

  useEffect(() => {
    let timer: any = null;
    data.length > limit && (timer = setInterval(handleTimer, interval * 1000));
    return () => {
      clearInterval(timer);
    };
  }, [cachedData, data, interval]);

  if (!cachedData.length) {
    return null;
  }

  return (
    <Container style={{ width, height, overflow: 'hidden' }}>
      <div className="Container1" ref={Container1}>
        {cachedData.map((item, index) => (
          <div
            key={index}
            className="voice-row"
            style={{
              height: (height - 4 * (limit - 1)) / limit,
              ...(index === 0 ? { background } : {}),
            }}
          >
            <div className="head">
              <div className="icon">
                <img src={iconUrl} alt="喇叭" />
                <span>{item.name}</span>
              </div>
              <div className="time">
                {`${moment(item.time).format('YYYY-MM-DD HH:mm') ||
                  moment()
                    .subtract(item.index, 'days')
                    .subtract(item.index, 'hour')
                    .subtract(item.index * 37, 'minute')
                    .format('YYYY-MM-DD HH:mm')}`}
              </div>
            </div>
            <div className="text">{item.text}</div>
          </div>
        ))}
      </div>
    </Container>
  );
};

OwnerVoiceList.themeUpdate = function(params: any) {
  return {
    background: params.primaryColor,
  };
};

export default OwnerVoiceList;