/** @format */

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

import { CommonTable, Header, Row, RowAni, RowSpan, styleBase } from './styled';
import { getLinearColor, getRowBg, getRowStyle } from './utils';

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

const CommonTableCom = (props: CommonTableProps) => {
  const {
    size = {},
    data = [],
    global,
    header,
    row,
    series,
    light,
    border,
    number,
  } = props;
  const rowCount = global.rowCount;
  const isLoop = global?.isLoop;
  const showHeader = header?.show;
  const rowStyle = { ...row?.textStyle, ...row };
  const columns = series;
  const wrapperRef: any = useRef<HTMLDivElement>(null);
  const style = _.merge(styleBase, size);
  const [cachedData, setCachedData] = useState<Record<string, any>[]>(data);
  const flagRef = useRef(true);
  useEffect(() => {
    if (JSON.stringify(data) === '{}') return;
    if (data.length === 0 || !data.length) {
      setCachedData([]);
      return;
    }
    const clone = cloneDeep(data);
    let newClone: any;
    if (clone.length % 2 !== 0) {
      //保障奇数偶数显示必须为偶数咧数据
      newClone = [...clone, ...clone];
    } else {
      newClone = clone;
    }

    if (!newClone) return;
    if (!isEqual(newClone, cachedData)) {
      if (newClone.length <= rowCount) {
        // 不够显示的自动补全
        let newData: any = [];
        for (let i = 0; i < rowCount / newClone.length + 1; i++) {
          newData = [...newData, ...newClone];
        }
        newClone = newData.map((item: any, index: number) => {
          item.id = index;
        });
        setCachedData(newData);
        return;
      }
      newClone = newClone.map((item: any, index: number) => ({
        ...item,
        id: index,
      }));

      setCachedData(newClone);
    }
  }, [data, rowCount, light]);

  useEffect(() => {
    if (!isLoop && JSON.stringify(cachedData) !== '{}') {
      flagRef.current = true;
      moveBack();
    }
  }, [isLoop]);

  useEffect(() => {
    if (number.show && columns[0]?.title !== '序号') {
      // 添加序号咧
      columns.unshift({
        dataIndex: 'id',
        title: '序号',
        width: number.width + '%',
      });
    }
  }, [number, data, rowCount]);

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

  function handleTimer() {
    if (!isLoop) return; // 是否开启轮播
    if (global.singleNoLoop && data.length <= rowCount) return; // 单页是否轮播
    let cloneData = cloneDeep(cachedData);
    global.animationType === 'one' &&
      !flagRef.current &&
      cloneData.push(cachedData[0]);

    if (global.animationType === 'all' && cachedData.length > 0) {
      for (let i = 0; i < rowCount; i++) {
        cloneData.push(cachedData[i]);
      }
      setCachedData(cloneData);
    }

    if (global.animationType === 'all') {
      wrapperRef.current.style &&
        global.animationType === 'all' &&
        moveAllLine();
      // 回归位置
      setTimeout(() => {
        global.animationType === 'all' &&
          (cloneData = cloneData.slice(rowCount));
        wrapperRef.current && wrapperRef.current.style && moveBack();
        setCachedData(cloneData);
      }, 500);
    } else {
      // 滚动
      setTimeout(function() {
        wrapperRef.current &&
          wrapperRef.current.style &&
          global.animationType === 'one' &&
          moveOneLine();
      }, 50);
      // 非第一次渲染
      if (!flagRef.current) {
        global.animationType === 'one' && cloneData.shift();
      }

      wrapperRef.current && wrapperRef.current.style && moveBack();
      setCachedData(cloneData);
      // debugger;
      flagRef.current = false;
    }
  }

  useEffect(() => {
    // 轮播
    let timer: any = null;
    if (!cachedData.length) return;
    timer = setInterval(handleTimer, global.animationTime);
    return () => {
      clearInterval(timer);
    };
  }, [cachedData, data, global.animationTime]);

  // 获取表头样式
  function getHeaderStyle() {
    const style = _.merge(
      {},
      { height: (size.height * header.proportion) / 100 },
      header.textStyle,
    );
    return getRowBg(header, {}, style);
  }
  // 获取序列号样式
  function getNumberStyle() {
    let height = 0;
    if (header.show) {
      height =
        ((size.height * (100 - header.proportion)) / 100 -
          ((rowStyle && rowStyle.marginBottom) || 0) * rowCount) /
        rowCount;
    } else {
      height =
        (size.height - ((rowStyle && rowStyle.marginBottom) || 0) * rowCount) /
        rowCount;
    }

    return {
      display: 'inline-block',
      width: (height * number.radius) / 100,
      height: (height * number.radius) / 100,
      borderRadius: '50%',
      background: number.background,
      textAlign: 'center',
      lineHeight: (height * number.radius) / 100 + 'px',
      ...number.textStyle,
    };
  }

  function getRowSpanStyle(col: any) {
    return {
      '--time': global.rollTime / 1000 + 's',
      '--width': (size.width * Number(col?.width?.split('%')[0])) / 100 + 'px',
      '--textAlign': rowStyle.textStyle.textAlign,
    };
  }

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

  return (
    <CommonTable style={style}>
      {showHeader && (
        <Header style={getHeaderStyle()}>
          {columns.map((col: Record<string, any>, index: number) => (
            <span key={col.dataIndex + index} style={{ width: col.width }}>
              {col.title}
            </span>
          ))}
        </Header>
      )}
      <div style={{ overflow: 'hidden' }}>
        <RowAni ref={wrapperRef}>
          {cachedData.length > 0 &&
            cachedData.map((item, index) => (
              <Row
                key={index + JSON.stringify(item)}
                style={getRowStyle(index, item, props, flagRef.current)}
              >
                {columns.map((col: Record<string, any>, index1: number) => (
                  <div
                    key={col.dataIndex + index1}
                    style={{
                      width: col.width,
                      overflow: 'hidden',
                      height: '100%',
                    }}
                  >
                    <RowSpan
                      style={getRowSpanStyle(col)}
                      overRoll={global.overRoll}
                    >
                      {col.title === '序号' ? (
                        <span style={getNumberStyle()}>
                          {(item[col.dataIndex] % data.length) + 1}
                        </span>
                      ) : (
                        item[col.dataIndex] && item[col.dataIndex]
                      )}
                    </RowSpan>
                  </div>
                ))}
              </Row>
            ))}
        </RowAni>
      </div>
    </CommonTable>
  );
};

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

export default CommonTableCom;