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

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

import { Tooltip } from 'antd';

import '../g.scss';

let timer = null;
function Icons(props: IIcons) {
  const {
    change,
    wrapStyle = {
      padding: '6px 20px 6px 20px'
    },
    fontLine,
    alignmentList,
    value
  } = props;

  const [currentIndex, setCurrentIndex] = useState(-1); //高亮
  useEffect(() => {
    //取消高亮
    if (currentIndex > -1) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        setCurrentIndex(-1);
      }, 1000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [currentIndex]);

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-setting-icons">
          <div className="zl-large-screen-setting-icons-font">
            {Array.isArray(fontLine) &&
              fontLine.length > 0 &&
              fontLine.map((item, index) => {
                return (
                  <div className="zl-large-screen-setting-icons-tooltip" key={item?.key}>
                    <Tooltip title={item?.title} mouseLeaveDelay={0}>
                    <span
                      id={`${
                        value[item?.key]
                          ? 'zl-largen-screen-align-icon-active'
                          : ''
                      }`}
                      className="zl-largen-screen-font-icon"
                      onMouseDown={(e) => {
                        e.preventDefault();
                        change?.(item?.key);
                        setCurrentIndex(index);
                      }}
                    >
                      <Icon name={item?.icon} />
                    </span>
                   </Tooltip>
                  </div> 
                );
              })}
          </div>
          <div className="zl-large-screen-setting-icons-font">
            {Array.isArray(alignmentList) &&
              alignmentList.length > 0 &&
              alignmentList.map((item) => {
                return (
                  <div className="zl-large-screen-setting-icons-tooltip" key={item?.key}>
                  <Tooltip title={item?.title} placement="bottom" mouseLeaveDelay={0}>
                    <span
                     key={item?.key}
                      id={`${
                        value?.align === item?.key
                          ? 'zl-largen-screen-align-icon-active'
                          : ''
                      }`}
                      className="zl-largen-screen-align-icon"
                      onMouseDown={(e) => {
                        e.preventDefault();
                        change?.(item?.key);
                      }}
                    >
                      <Icon name={item?.icon} />
                    </span>
                   </Tooltip>
                   </div>
                );
              })}
          </div>
        </div>
      </Wrap>
    );
  }, [fontLine, alignmentList, value, currentIndex]);

  return Dom;
}

export default Icons;

export interface IIcons {
  fontLine?: IFontLine[];
  alignmentList?: IFontLine[];
  size?: string;
  change?: Function;
  wrapStyle?: React.CSSProperties;
  value?: IFontAlign;
}
export interface IFontLine {
  key: string;
  icon: string;
  title: string;
}

export interface IFontAlign {
  align?: string;
  bold?: string;
  underLine?: string;
  deleteLine?: string;
}