import React, { useState } from 'react';

import Icon from 'src/components/Icon/index';

import { Tooltip } from 'antd';
import { ILargeScreenHierarchy } from '../../../type/largeScreenLayer';

function LargeScreenLayerHierarchy(props: ILargeScreenHierarchy) {
  const { iconList, layerListEvent, hierarchyDisabled } = props;
  const clickIcon = (key: string | number, item: any) => {
    !hierarchyDisabled && layerListEvent?.(null, key, item, 'iconClick');
  };

  return (
    <div className="zl-lagre-screen-hierarchy">
      {Array.isArray(iconList) &&
        iconList?.length > 0 &&
        iconList?.map((item) => {
          return (
            <Tooltip
              title={item?.title}
              placement="top"
              mouseLeaveDelay={0}
              key={item?.key}
            >
              <div
                className="zl-lagre-screen-hierarchy-item"
                key={item?.key}
                style={{opacity: hierarchyDisabled ? 0.6 : 1, cursor: hierarchyDisabled ? 'not-allowed' : 'pointer'}}
                onClick={() => clickIcon(item?.key, item)}
              >
                <Icon name={item?.icon} />
              </div>
            </Tooltip>
          );
        })}
    </div>
  );
}

export default LargeScreenLayerHierarchy;