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

interface IProps {
  item: IItem;
  league: string;
  onPriceUpdate: (id: string, price: IItemPrice) => void;
}

interface IState {
  price?: String;
}

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

  componentDidMount() {
    PoeService.priceCheck(this.props.item, this.props.league).then((data: any) => {
      this.props.onPriceUpdate(this.props.item.id, data);
    });
  }

  getItemPriceText = (p: IItemPrice) => {
    let s = '';
    s += p.recommendedPrice ? `Recommended Price: ${p.median_price}\n` : '';
    s += p.max_price ? `Max Price: ${p.max_price}\n` : '';
    s += p.median_price ? `Median Price: ${p.median_price}\n` : '';

    return s;
  };

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

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

    const itemPriceElement = itemPrice ? (
      <small title={this.getItemPriceText(itemPrice)}>
        {itemPrice.recommendedPrice} {itemPrice.currency_rec}
      </small>
    ) : null;

    return (
      <div className="pli" onClick={() => console.log(this.props.item)}>
        <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>{itemPriceElement}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}