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

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

import { Tooltip } from 'antd';

import '../g.scss';

function Icons(props: IIcons) {
  const {
    change,
    wrapStyle = {
      padding: '6px 20px 6px 20px'
    },
    alignList
  } = props;

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-setting-icons zl-large-screen-setting-icons-align" >
          {Array.isArray(alignList) &&
            alignList.length > 0 &&
            alignList.map((item, index) => {
              return (
                <div className="zl-large-screen-setting-icons-tooltip" key={item?.key}>
                  <Tooltip
                      title={item?.title}
                      placement="bottom"
                      mouseLeaveDelay={0}
                    >
                      <span
                         id='align-icon'
                        className="zl-largen-screen-align-icon"
                        onClick={() => {
                          change?.(item?.key);
                        }}
                      >
                        <Icon name={item?.icon} />
                      </span>
                    </Tooltip>
                    {index === 2 ? (
                      <div className="zl-largen-screen-align-icon-split" key={item?.key+"split"} />
                    ) : (
                      <></>
                    )}
                </div>
              );
            })}
        </div>
      </Wrap>
    );
  }, [alignList]);

  return Dom;
}

export default Icons;

export interface IIcons {
  alignList?: IFontLine[];
  change?: Function;
  wrapStyle?: React.CSSProperties;
}
export interface IFontLine {
  key: string;
  icon: string;
  title: string;
}