/** @format */

import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';
import styled, { css } from 'styled-components';
const BasicList = styled.div`
  text-align: center;
  overflow: hidden;
  position: relative;
  span {
    display: inline-block;
  }
`;

const Header = styled.div`
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Row = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    filter: brightness(120%);
  }
`;

interface RowAniProps {
  ani: boolean;
}

const RowAni = styled.div<RowAniProps>`
  transition: all 0.5s;
  animation: bottomIn 1.6s;
  overflow: hidden;
  @keyframes bottomIn {
    from {
      transform: translateY(0%);
    }
    to {
      transform: translateY(-20%);
    }
  }
  ${props =>
    !props.ani &&
    css`
      animation: unset;
    `}
`;

const styleBase = {
  width: '100%',
};

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

const BasicListCom = (props: BasicListProps) => {
  const {
    size = {},
    rowCount = 4,
    isLoop = true,
    showHeader = true,
    headerStyle,
    rowStyle,
    columns = [],
    data = [],
  } = props;

  const wrapperRef = useRef(null);

  function getShowIndexArray(
    startIndex: number,
    count: number,
    length: number,
  ) {
    const arr = [];
    for (let i = 0; i < count; i++) {
      let currIndex = startIndex + i;
      if (startIndex + i >= length) {
        currIndex = startIndex + i - length;
      }
      if (i < length) {
        arr.push(currIndex || 0);
      }
    }
    return arr;
  }

  const [showIndex, setShowIndex] = useState(
    getShowIndexArray(0, rowCount + 1, data.length),
  );

  useEffect(() => {
    let timer: number;
    if (isLoop && data.length > rowCount) {
      timer = setInterval(() => {
        setShowIndex(state => {
          return getShowIndexArray(state[0] + 1, rowCount + 1, data.length);
        });
      }, 1500);
    } else {
      setShowIndex(getShowIndexArray(0, rowCount + 1, data.length));
    }
    return () => {
      if (timer) {
        clearInterval(timer);
      }
    };
  }, [isLoop, data, rowCount]);

  const style = _.merge(styleBase, size);

  function getRowBg(i: number) {
    if (rowStyle) {
      const {
        firstRowColor,
        background,
        oddEvenOpen,
        oddBackground,
        evenBackground,
      } = rowStyle;
      if (i === 0 && firstRowColor) {
        return firstRowColor;
      }
      if (oddEvenOpen) {
        if (i % 2 === 0 && evenBackground) {
          return evenBackground;
        } else if (oddBackground) {
          return oddBackground;
        }
      }
      if (background) {
        return background;
      }
    }
  }

  return (
    <BasicList style={style}>
      {showHeader && (
        <Header
          style={{
            height: ~~size.height / (rowCount + 1),
            ...headerStyle,
          }}
        >
          {columns.map((col: Record<string, any>) => (
            <span key={col.dataIndex} style={{ width: col.width }}>
              {col.title}
            </span>
          ))}
        </Header>
      )}
      <div style={{ overflow: 'hidden' }}>
        <RowAni
          key={showIndex[0]}
          ani={isLoop && data.length > rowCount}
          ref={wrapperRef}
        >
          {showIndex.map(i => (
            <Row
              key={i}
              style={{
                height:
                  ~~(
                    size.height -
                    ((rowStyle && rowStyle.marginBottom) || 0) * rowCount
                  ) / (showHeader ? rowCount + 1 : rowCount),
                ...rowStyle,
                background: getRowBg(i),
              }}
            >
              {columns.map((col: Record<string, any>) => (
                <span
                  key={col.dataIndex}
                  style={{
                    width: col.width,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                  }}
                >
                  {(data[i] && data[i][col.dataIndex]) || ''}
                </span>
              ))}
            </Row>
          ))}
        </RowAni>
      </div>
    </BasicList>
  );
};

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

export default BasicListCom;