import React, { memo, useCallback } from 'react';
import Mousetrap from 'mousetrap';
import FontIcon from 'components/FontIcon';
import styles from './LayerHeader.less';

export default memo(function LayerHeader({ disabled, onClick }: { disabled?: boolean; onClick: (param) => void }) {
  const toTop = useCallback(() => {
    Mousetrap.trigger('command+shift+up');
  }, []);

  const toBottom = useCallback(() => {
    Mousetrap.trigger('command+shift+down');
  }, []);

  const groupBy = useCallback(() => {
    Mousetrap.trigger('command+g');
  }, []);

  const breakUp = useCallback(() => {
    Mousetrap.trigger('command+shift+g');
  }, []);

  return (
    <div className={styles.container}>
      <span className={styles.item}>
        <FontIcon title="置顶" icon="icon-btn_top" disabled={disabled} size={18} anime onClick={disabled ? undefined : toTop} />
      </span>

      <span className={styles.item}>
        <FontIcon title="置底" icon="icon-btn_bottom" disabled={disabled} size={18} anime onClick={disabled ? undefined : toBottom} />
      </span>

      <span className={styles.item}>
        <FontIcon title="成组" icon="icon-btn_group" disabled={disabled} size={18} anime onClick={disabled ? undefined : groupBy} />
      </span>

      <span className={styles.item}>
        <FontIcon title="打散" icon="icon-btn_ungroup" disabled={disabled} size={18} anime onClick={disabled ? undefined : breakUp} />
      </span>

      <span className={styles.item}>
        <FontIcon title="展开/收起" icon="icon-openlayer" size={18} onClick={() => onClick('groupCollapse')} />
      </span>
    </div>
  );
});
