import React, { useState, useCallback } from "react";
import "./ChooseCard.css";
import Paper from '@material-ui/core/Paper';
import Resource from './Resource.js';

const ChooseCard = ({table, type}) => {
  if (!table.game) {
    return <></>;
  }

  const selectCard = (card) => {
    table.selectResource(card);
  }

  const resources = [
    'wheat', 'brick', 'stone', 'sheep', 'wood'
  ].map(type => {
    return <Resource type={type} key={type} count={1} select={() => selectCard(type)}/>;
  });

  let title;
  switch (type) {
  case 'monopoly':
    title = <><b>Monopoly</b>! Tap the resource type you want everyone to give you!</>;
    break;
  case 'year-of-plenty':
    title = <><b>Year of Plenty</b>! Tap the resource type and receive <b>2</b> from the bank!</>;
    break;
  }

  return (
    <div className="ChooseCard">
      <Paper>
        <div className="Title">{ title }</div>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          { resources }
        </div>
      </Paper>
    </div>
  );
};

export default ChooseCard;