import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from 'src/components/Icon/index';
import { returnClass } from '../unit';
import { Tooltip, Spin } from 'antd';
import '../g.scss';

function LabelIcon(props: ILabelIcon) {
  const {
    title = 'label',
    change,
    value,
    selectList = [],
    size = 'large',
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <div className={returnClass(paddingSize)}>{title}</div>
        ) : (
          <></>
        )}
        <div
          className={`${
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          } zl-large-screen-setting-icons-list`}
        >
          {Array.isArray(selectList) &&
            selectList?.length > 0 &&
            selectList.map((item) => {
              return (
                <div className="zl-large-screen-setting-icons-list-tooltip">
                  <Tooltip title={item?.name} mouseLeaveDelay={0}>
                    <span
                      className={`zl-largen-screen-align-icon ${item?.key === value ? 'zl-largen-screen-align-icon-active' : null}`}
                      // style={{
                      //   background: item?.key === value ? '#656e76' : 'none'
                      // }}
                    >
                      <Icon
                        key={item?.key}
                        name={item?.icon}
                        click={() => {
                          change?.(item?.key);
                        }}
                        style={{ cursor: 'pointer' }}
                      />
                    </span>
                  </Tooltip>
                </div>
              );
            })}
        </div>
      </Wrap>
    );
  }, [title, value, paddingSize]);

  return Redio;
}

export default LabelIcon;

export interface ILabelIcon {
  title?: any;
  value?: string | number;
  selectList?: any;
  change?: Function;
  size?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}