class Inventory extends React.Component {

    constructor() {
        super();
        this.state = {
            loaded: false,
            selected: -1,
            deposited: false,
        };
        this.items = {};
    }

    componentDidMount() {
        $.get('/get-user-inventory', response => {
            this.items = response;
            this.setState({
                loaded: true,
            });
        });
    }


    depositClicked() {
        this.setState(
          {deposited: true}
        );
    }

    render() {

        var {loaded} = this.state;

        if (!loaded) {
            return <Spinner />;
        }


        var itemsList = [];

        for (var key in this.items) {


            if (this.items[key].Marketable && this.items[key].Tradable)
            {
                  itemsList.push(<InventoryItem key={key} item={this.items[key]} />);
            }
            else {
              console.log(this.items[key].Name + " Marketable:" + this.items[key].Marketable);
              console.log(this.items[key].Name + " Tradable:" + this.items[key].Tradable);
            }

        }

        return (
            <div>
              <div className="box outer">
              {itemsList}
              </div>
              <div> <br><button className="btn btn-success" onClick={() => this.depositClicked()}>Deposit</button>
              </div>
            </div>
        );
    }

}




class InventoryItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selected: -1,
            deposited: false,
        };
    }

    itemClicked(i) {

      this.setState({
      selected: -this.state.selected
      });

    }

    render() {
        var item = this.props.item;

        return (
            <div className={"col-md-2 item-bg " + ((this.state.selected > -1) ? 'selected' : '')} onClick={() => this.itemClicked()} >

                <div className="item-img">
                  <InventoryItemImage iconUrl={item.icon_url} />
                </div>
                <div className="item-name">{item.Name}</div>
                <div className="item-prijs">
                    $10,-
                </div>
            </div>
        );
    }
}

class InventoryItemImage extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        var url = "https://steamcommunity-a.akamaihd.net/economy/image/" + this.props.iconUrl + "/120fx100f";
        return <img src={url} />
    }

}

class Spinner extends React.Component {
    render() {
        return (
            <div className="sk-folding-cube">
                <div className="sk-cube1 sk-cube"></div>
                <div className="sk-cube2 sk-cube"></div>
                <div className="sk-cube4 sk-cube"></div>
                <div className="sk-cube3 sk-cube"></div>

            </div>
        );
    }
}








// ! Hier fangt es an
ReactDOM.render(<Inventory />, document.getElementById('user-inventory'));