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

const ChooseCard = ({table, type}) => {
  const [cards, setCards] = useState([]);
  const count = (type === 'monopoly') ? 1 : 2;

  const selectCard = useCallback((event) => {
    event.target.classList.toggle('Selected');
 
    const selected = document.querySelectorAll('.ChooseCard .Selected');
    if (selected.length > count) {
      for (let i = 0; i < selected.length; i++) {
        selected[i].classList.remove('Selected');
      }
      setCards([]);
      return;
    }

    let tmp = [];
    for (let i = 0; i < selected.length; i++) {
      tmp.push(selected[i].getAttribute('data-type'));
    }
    setCards(tmp);
  }, [ setCards, count ]);

  if (!table.game) {
    return <></>;
  }

  console.log(cards.length, count);

  const submitCards = () => {
    table.selectResources(cards);
  }

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

  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 two resources you want to receive from the bank!</>;
    break;
  default:
    title = <>Unknown card type {type}.</>;
    break;
  }

  return (
    <div className="ChooseCard">
      <Paper>
        <div className="Title">{ title }</div>
        <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
          { resources }
        </div>
        <div className="Actions"><Button disabled={cards.length !== count} onClick={submitCards}>submit</Button></div>
      </Paper>
    </div>
  );
};

export default ChooseCard;