import * as React from 'react';
import classNames from 'classnames';
import { useCallback } from 'react';
import { Badge } from 'antd';
import Icon from '../../CustomIcon';
import styles from './index.less';

export interface ListItemType {
  id?: string;
  icon?: string;
  name?: string;
  label?: string;
  color?: string;
  path?: string;
  count?: number;
}

interface ItemProps {
  /**
   * 当前节点
   */
  current?: ListItemType;
  /**
   * 数据 <ListItemType>
   */
  data: ListItemType;

  /**
   * 点击事件
   */
  onClick: Function;

  /**
   * 外部类名
   */
  className?: string;
  /**
   * 布局 'vertical' 横向 | 'horizontal' 纵向  默认： horizontal
   */
  layout?: 'vertical' | 'horizontal';
  /**
   * 大小， 默认 normal
   */
  size?: 'small' | 'normal' | 'large';
  /**
   * 图标背景透明， 默认 false
   */
  ghost?: boolean;
  /**
   * 是否显示边框， 默认： false
   */
  bordered?: boolean;
  /**
   * 显示树线条， 默认 false
   */
  showTree?: boolean;
  /**
   * 内联样式
   */
  style?: {};
  /**
   * 图标样式
   */
  logoStyle?: React.CSSProperties;
  /**
   * 标题样式
   */
  labelStyle?: React.CSSProperties;
  /**
   * 悬停样式显示
   */
  hoverable?: boolean;

  /**
   * 是否可编辑: 暂时未实现
   */
  editable?: boolean;

  /**
   * 移除响应事件
   */
  onRemove?: Function;
}

const DEFAULT_LOGO_COLOR = '#fff';

export default ({
  current,
  data,
  className,
  layout = 'horizontal',
  size = 'normal',
  onClick,
  onRemove,
  ghost = false,
  bordered = false,
  showTree = false,
  hoverable = true,
  editable = false,
  style = {},
  logoStyle = {},
  labelStyle = {},
}: ItemProps) => {
  let classes = classNames(className, {
    [styles['item']]: true,
    [styles[size]]: true,
    [styles['active']]: current && current.id === data.id,
    [styles.bordered]: bordered,
    [styles.treeStyle]: showTree,
    [styles['hoverable']]: hoverable,
    [styles['editable']]: editable,
  });

  const logoClasses = classNames({
    [styles['logo']]: true,
    [styles[data.color || '']]: data && data.color,
    [styles.transparent]: ghost,
  });

  const onItemClick = useCallback((e) => {
    e.stopPropagation();
    onClick(data);
  }, []);

  const onItemRemove = useCallback((e) => {
    e.stopPropagation();
    onRemove && onRemove(e, data);
  }, []);

  if (layout === 'vertical') {
    classes = classNames(classes, styles.vertical);
    return (
      <div className={classes} onClick={onItemClick} style={style}>
        {editable && (
          <div className={styles.remove} onClick={onItemRemove}>
            <Icon type="icon-minus-circle-fill" />
          </div>
        )}
        <div className={logoClasses} style={logoStyle}>
          <Badge count={data.count} overflowCount={99} size="small">
            <span className={styles.span}>
              <Icon
                style={{
                  color: data.color || DEFAULT_LOGO_COLOR,
                  fontWeight: 'bold',
                }}
                type={data.icon || ''}
              />
            </span>
          </Badge>
        </div>
        <div className={styles.label} style={labelStyle}> {data.name || data.label}</div>
      </div>
    );
  }

  classes = classNames(classes, styles.horizontal);

  return (
    <div className={classes} onClick={onItemClick}>
      {editable && (
        <div className={styles.remove} onClick={onItemRemove}>
          <Icon type="icon-minus-circle-fill" />
        </div>
      )}
      {data.icon && (
        <div className={logoClasses} style={logoStyle}>
          <Icon
            style={{
              color: data.color || DEFAULT_LOGO_COLOR,
              fontWeight: 'bold',
            }}
            type={data.icon}
          />
        </div>
      )}
      <div className={styles.label}>{data.name || data.label}</div>
      {data.count && (
        <div className={styles.dot}>
          <Badge count={data.count} overflowCount={99} size="small" />
        </div>
      )}
    </div>
  );
};
