import React, { memo } from 'react';
import styles from './LayerFooter.less';
import FontIcon from 'components/FontIcon';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

let icons = [
  { icon: 'icon-icon_delight', key: 'focus', title: '单独显示图层' },
  { icon: 'icon-btn_lock', key: 'lock', title: '锁定' },
  { icon: 'icon-btn_copy', key: 'copy', title: '复制' },
  { icon: 'icon-btn_delete', key: 'delete', title: '删除' }
];

export default memo(function LayerFooter({ disabled, onClick }: { disabled?: boolean; onClick: (key) => void }) {
  const { checkAuth } = useAuth();
  if (!checkAuth(modules.componentAdd)) {
    icons = icons.filter((d) => d.key !== 'copy');
  }

  return (
    <div className={styles.container}>
      {icons.map(({ key, icon, title }) => (
        <span key={key} className={styles.iconWrap} onClick={disabled ? undefined : () => onClick(key)}>
          <FontIcon title={title} icon={icon || key} disabled={disabled} size={14} anime />
        </span>
      ))}
    </div>
  );
});
