import React, { useState, useCallback, useEffect, useMemo, useRef,
  useContext } from "react";
import equal from "fast-deep-equal";

import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import "./ChooseCard.css";
import {Resource} from './Resource.js';
import {GlobalContext} from './GlobalContext.js';

const ChooseCard = () => {
  const { ws } = useContext(GlobalContext);
  const [turn, setTurn] = useState(undefined);
  const [color, setColor] = useState(undefined);
  const [state, setState] = useState(undefined);
  const [cards, setCards] = useState([]);
  const fields = useMemo(() => [
    'turn', 'color', 'state'
  ], []);
 
  const onWsMessage = (event) => {
    const data = JSON.parse(event.data);
    switch (data.type) {
    case 'game-update':
      console.log(`choose-card - game-update: `, data.update);
      if ('turn' in data.update && !equal(turn, data.update.turn)) {
        setTurn(data.update.turn);
      }   
      if ('color' in data.update && data.update.color !== color) {
        setColor(data.update.color);
      }
      if ('state' in data.update && data.update.state !== state) {
        setState(data.update.state);
      }
      break;
    default:
      break;
    }
  };
  const refWsMessage = useRef(onWsMessage);
  useEffect(() => { refWsMessage.current = onWsMessage; });
  useEffect(() => {
    if (!ws) { return; }
    const cbMessage = e => refWsMessage.current(e);
    ws.addEventListener('message', cbMessage);
    return () => { ws.removeEventListener('message', cbMessage); }
  }, [ws, refWsMessage]);
  useEffect(() => {
    if (!ws) { return; }
    ws.send(JSON.stringify({ 
      type: 'get', 
      fields
    }));
  }, [ws, fields]);

  const selectResources = useCallback((event) => {
    ws.send(JSON.stringify({
      type: 'select-resources',
      cards
    }));
  }, [ws, cards]);

  let count = 0;
  if (turn && turn.actions && turn.actions.indexOf('select-resources') !== -1) {
    if (turn.active) {
      if (turn.color === color) {
        count = turn.active === 'monopoly' ? 1 : 2;
      }
    }

    if (state === 'volcano') {
      if (!turn.select) {
        count = 0;
      } else if (color in turn.select) {
        count = turn.select[color];
      } else {
        count = 0;
      }
    }
  }

  const selectCard = useCallback((event) => {
    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 (count === 0) {
    return <></>;
  }
    
  const resources = [
    'wheat', 'brick', 'stone', 'sheep', 'wood'
  ].map(type => {
    return <Resource
      key={type} 
      type={type} 
      count={count}
      onClick={selectCard}/>;
  });

  let title;
  switch (turn.active) {
  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;
  case 'volcano':
    title = <><b>Volcano has minerals</b>! Tap the {count} resources you want to receive from the bank!</>;
    break;
  default:
    title = <>Unknown card type {turn.active}.</>;
    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={selectResources}>submit</Button></div>
      </Paper>
    </div>
  );
};

export {ChooseCard};