import React, { Component, MouseEvent } from 'react';
import classnames from 'classnames';

// import { DEFAULT_AVATAR } from '@/constants';
import { addImageProcess } from '../Utils/utils';
import KingDomPic from '../assets/popovers_list_huangguan.png';

import styles from './ConsumeListView.less';

const DEFAULT_AVATAR =
  '//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg';
  
interface dataItem {
  id?: string|number;
  user_avatar?: string;
  bill_price?: number;
}

interface Props {
  isToggle: boolean;
  onToggleChange: Function;
  onConsumeItemClick: (e: MouseEvent, clickData: any) => any,
  dataSource: Array<dataItem>;
  listLength: number;
  showLength: number; 
  options: {
    avatarSize: number,
    avatarMarginLeftAndRight: number,
    kingdomWidth: number,
    kingdomHeight: number,
    kingdomPosition: [number, number],
  },
}

class ConsumeListView extends Component<Props, {}> {
  static defaultProps: Props = {
    isToggle: false,
    onToggleChange: () => {},
    onConsumeItemClick: () => {},
    dataSource: [],
    listLength: 0,
    showLength: 6,
    options: {
      avatarSize: 36,
      avatarMarginLeftAndRight: 6,
      kingdomWidth: 24,
      kingdomHeight: 22,
      kingdomPosition: [-6, -12],
    },
  }

  renderConsumeItem() {
    const {
      dataSource,
      isToggle,
      onConsumeItemClick,
      showLength,
      listLength,
      options,
    } = this.props;
    const {
      kingdomWidth,
      kingdomHeight,
      kingdomPosition,
      avatarSize,
      avatarMarginLeftAndRight,
    } = options;

    let renderData = dataSource;
    if (!isToggle && listLength > showLength) {
      renderData = dataSource.slice(0, showLength - 1);
    }

    return renderData.map((v: dataItem, i: number) => {
      let kingdom = null;
      if (i === 0) {
        kingdom = (
          <img
            className={styles.kingdomIcon}
            src={KingDomPic}
            alt="reward top user"
            style={{
              width: `${kingdomWidth}px`,
              height: `${kingdomHeight}px`,
              left: `${kingdomPosition[0]}px`,
              top: `${kingdomPosition[1]}px`,
            }}
          />
        );
      }
      return (
        <li
          key={v.id}
          className={styles.consumeItem}
          style={{ margin: `0 ${avatarMarginLeftAndRight}px 10px` }}
        >
          {kingdom}
          <div
            className={styles.avatar}
            onClick={(e) => onConsumeItemClick(e, v)}
            style={{
              backgroundImage: `url(${addImageProcess(
                v.user_avatar || DEFAULT_AVATAR,
                {
                  small: true,
                },
              )})`,
              width: `${avatarSize}px`,
              height: `${avatarSize}px`,
            }}
          />
          <span className={styles.gray}>
            {/* {intl.get('bilingually.gift.item', {
              nums: v.bill_price / 100,
            }) /* {item.num}另币 */}
          </span>
        </li>
      );
    });
  }

  renderToggleButton() {
    const {
      isToggle,
      onToggleChange,
      listLength,
      showLength,
      options,
    } = this.props;
    const { avatarSize, avatarMarginLeftAndRight } = options;

    if (listLength <= showLength) {
      return null;
    }

    return (
      <li
        onClick={() => onToggleChange()}
        className={classnames(styles.toggle, {
          [styles.expand]: isToggle,
        })}
        style={{
          width: `${avatarSize}px`,
          height: `${avatarSize}px`,
          lineHeight: `${avatarSize}px`,
          margin: `0 ${avatarMarginLeftAndRight}px 10px`,
        }}
      />
    );
  }

  render() {
    const { showLength, options } = this.props;
    const { avatarSize, avatarMarginLeftAndRight } = options;
    return (
      <div className={styles.wrapper}>
        <ul
          className={styles.consumelist}
          style={{
            width: `calc(${avatarMarginLeftAndRight * 2 +
              avatarSize}px * ${showLength})`,
          }}
        >
          {this.renderConsumeItem()}
          {this.renderToggleButton()}
        </ul>
      </div>
    );
  }
}

export default ConsumeListView;
