import React from 'react';
import { FrameType } from '../../model/frame-type';
import { IItem } from '../../model/item';
import { RarityColor } from '../../model/rarity-color';
import { ItemTextService } from '../../services';
import './price-list-item.scss';

interface IProps {
  data: IItem;
}

interface IState {
  price?: String;
}

export class PriceListItem extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { icon, priceInfo, stackSize, typeLine, frameType } = this.props.data;
    const name = ItemTextService.filterName(typeLine);
    const fullText = ItemTextService.parseItem(this.props.data);

    const rarityColor = RarityColor[(FrameType[frameType] || '').toLowerCase()];

    return (
      <div className="pli" onClick={() => console.log(this.props.data)}>
        <div style={{ width: '60px' }}>
          <img title={fullText} src={icon} className="pli__img" />
        </div>
        <div style={{ flex: 1 }} className="ellipsis">
          <div style={{ marginBottom: '10px' }}>
            <div className="ellipsis" title={name} style={{ color: rarityColor }}>
              {name}
            </div>
            <div className="text-secondary">{stackSize && <small>Stack Size: {stackSize}</small>}</div>
          </div>
          <div>
            {priceInfo ? `${priceInfo.min || priceInfo.min_price} ${priceInfo.currency || priceInfo.currency_rec}` : ''}
          </div>
        </div>
      </div>
    );
  }
}