import React, { useEffect, useMemo, useState } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';

import '../g.scss';

let timer = null;
function ClickButtons(props: IButtonAdd) {
  const {
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    buttonsList
  } = props;

  const [currentIndex, setCurrentIndex] = useState(-1);

  useEffect(() => {
    if (currentIndex > -1) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        setCurrentIndex(-1);
      }, 1000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [currentIndex]);

  //显示高亮
  const clickItem = (index: number,key:string) => {
    setCurrentIndex(index);
    change?.(key,'clickButtons')
  };

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-click-buttons">
          {Array.isArray(buttonsList) &&
            buttonsList?.length > 0 &&
            buttonsList?.map((item, index) => {
              return (
                <span
                  key={item?.key}
                  className="zl-large-screen-click-buttons-item"
                  onClick={() => clickItem(index,item?.key)}
                >
                  <Icon name={item?.icon} />
                  <span>{item?.title}</span>
                </span>
              );
            })}
        </div>
      </Wrap>
    );
  }, [buttonsList, currentIndex]);

  return Dom;
}

export default ClickButtons;

export interface IButtonAdd {
  title?: string | number;
  change?: Function;
  wrapStyle?: React.CSSProperties;
  buttonsList?: IButtonsList[];
}

export interface IButtonsList {
  key: string;
  title: string;
  icon: string;
}