/*
 * @Author: your name
 * @Date: 2021-12-16 17:50:22
 * @Description:
 * @FilePath: /zl-business/src/components/Unit/PositionButton/index.tsx
 */
import React, { useMemo } from 'react';
import Icon from '../../Icon/index';
import Wrap from '../Wrap/Wrap';
import { returnClass } from '../unit';
import { Tooltip } from 'antd';
function LabelPositionButton(props: IPositionBtn) {
  const {
    title = 'label',
    change,
    size = 'normal',
    positionList = [],
    value,
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Position = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <div className={returnClass(paddingSize)}>{title}</div>
        ) : (
          <></>
        )}
        <div className="zl-large-screen-position-wrap">
          {Array.isArray(positionList) &&
            positionList?.length > 0 &&
            positionList?.map((item, index) => {
              return (
                <div
                  key={index}
                  className={
                    value === item?.key
                      ? 'zl-large-screen-unit-icon-active'
                      : 'zl-large-screen-unit-icon'
                  }
                >
                  <Tooltip
                    title={item?.value}
                    mouseLeaveDelay={0}
                    placement="bottom"
                  >
                    <span>
                      <Icon
                        key={index}
                        name={item?.icon}
                        click={(e) => change?.(item?.value)}
                      />
                    </span>
                  </Tooltip>
                </div>
              );
            })}
        </div>
      </Wrap>
    );
  }, [positionList, value, title]);

  return Position;
}

export default LabelPositionButton;

export interface IPositionBtn {
  change?: Function;
  size?: string;
  positionList?: IPositionList[];
  value?: string;
  title?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}
export interface IPositionList {
  value: string;
  icon?: string;
  key?: string;
}