import React from 'react';
import { observable } from "mobx";
import { observer, inject } from 'mobx-react';
import Attack from './types/Attack';
import Battlegear from './types/Battlegear';
import Creature from './types/Creature';
import Location from './types/Location';
import Mugic from './types/Mugic';

@inject((stores, props, context) => props) @observer
export default class CardList extends React.Component {

  setImage(img) {
    if (this.props.ext == false)
      this.props.setImage(img);
  }

  render() {
    const { cards, ext, stats } = this.props;

    if (cards.length == 1 && cards[0].text) {
      return (
        <div style={{ textAlign: 'left' }}>{cards[0].text}</div>
      );
    }
    return cards.map((card, i) => {
      switch (card.gsx$type) {
        case "Attacks":
          return (<Attack card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
        case "Battlegear":
          return (<Battlegear card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
        case "Creatures":
          return (<Creature card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
        case "Locations":
          return (<Location card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
        case "Mugic":
          return (<Mugic card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
        default:
          return (<div key={i}>Invalid Card Type</div>);
      }
    });
  }
}
