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

const ResourceCounter = ({type, onCount, max}) => {
  const [count, setCount] = useState(0);
  const plusClicked = (event) => {
    if (max === undefined || max > count) {
      if (onCount) {
        onCount(type, count+1);
      }
      setCount(count+1);
    }
  };
  const minusClicked = (event) => {
    if (count > 0) {
      if (onCount) {
        onCount(type, count-1);
      }
      setCount(count-1);
    }
  };

  return (
    <div className="ResourceCounter" style={{
        display: 'flex',
        flexDirection: 'column'
      }}>
      <Resource disabled type={type} count={1}/>
      <div style={{
        display: 'flex',
        justifyContent: 'space-around',
        width: '100%',
        alignItems: 'center'
        }}>
          <Button style={{
              flexShrink: 1, 
              minWidth: 0
            }} 
            disabled={count>=max}
            onClick={plusClicked}>+</Button>
          <div style={{userSelect: 'none'}}>{count}</div>
          <Button  style={{
              flexShrink: 1, 
              minWidth: 0
            }} 
            disabled={count===0}
            onClick={minusClicked}>-</Button>
      </div>      
    </div>
  );
};

const Trade = ({table}) => {
  const [giveLine, setGiveLine] = useState('nothing');
  const [getLine, setGetLine] = useState('nothing');

  const [gives, setGives] = useState([]);
  const [gets, setGets] = useState([]);

  const giveCount = useCallback((type, count) => {
    gives[type] = count;    
    if (!count) {
      delete gives[type];
    }
    setGives(gives);
    const items = [];
    for (let key in gives) {
      items.push(`${gives[key]} ${key}`);
    }
    if (items.length === 0) {
      setGiveLine('nothing');
    } else {
      setGiveLine(items.join(', '));
    }
  }, [setGiveLine, setGives]);

  const getCount = useCallback((type, count) => {
    gets[type] = count;
    if (!count) {
      delete gets[type];
    }
    setGets(gets);
    const items = [];
    for (let key in gets) {
      items.push(`${gets[key]} ${key}`);
    }
    if (items.length === 0) {
      setGetLine('nothing');
    } else {
      setGetLine(items.join(', '));
    }
  }, [setGetLine, setGets]);

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

  const isTurn = (table.game.turn && table.game.turn.color === table.game.color) ? true : false;

  const offerClicked = (event) => {
    const trade = {
      gives: [],
      gets: []
    };
    for (let key in gives) {
      trade.gives.push({type: key, count: gives[key]});
    }
    for (let key in gets) {
      trade.gets.push({type: key, count: gets[key]});
    }
    table.offerTrade(trade);
  }

  const acceptClicked = (offer) => {
    table.acceptTrade(offer); 
  };

  const cancelClicked = (event) => {
    table.cancelTrading();
  }

  let players = [];
  for (let color in table.game.players) {
    const item = table.game.players[color],
      name = getPlayerName(table.game.sessions, color);
    if (name && table.game.name !== name) {
      players.push({
        name: name,
        color: color,
        valid: false,
        gets: item.gets ? item.gets : [],
        gives: item.gives ? item.gives : []
      });
    }
  }

  players.sort((A, B) => {
    return A.name.localeCompare(B.name);
  });

  if (isTurn && table.game.player && table.game.player.banks) {
    table.game.player.banks.forEach(bank => {
      const count = (bank === 'bank') ? 3 : 2;
      players.push({
        name: `The bank`,
        color: undefined,
        gives: [ { count: 1, type: '*' } ],
        gets: [ { count: count, type: bank } ],
        valid: false
      });
    });

    players.push({
      name: `The bank`,
      color: undefined,
      gives: [ { count: 1, type: '*' } ],
      gets: [ { count: 4, type: 'bank' } ],
      valid: false
    });
  }

  if (table.game.turn.offer) {
    players.forEach(trade => {
      let valid = trade.gets.length && trade.gives.length;
      trade.gets.forEach(resource => {
        if (!valid) {
          return;
        }
        if (resource.type !== 'bank') {
          const offer = table.game.turn.offer.gives.find(item => item.type === resource.type);
          valid = offer && (offer.count >= resource.count);
        } else {
          valid = false;
          /* Doesn't matter what the resource type is so long as there
           * are enough of the one kind */
          table.game.turn.offer.gives.forEach(offer => {
            if (offer.count >= resource.count) {
              valid = true;
            }
          });
        }
      });
      trade.valid = valid;
    });
  }

  players = players.map((item, index) => {
    const gets = item.gets.map(get => 
      `${get.count} ${(get.type === 'bank') ? 'of any one resource' : get.type}`)
      .join(', '),
      gives = item.gives.map(give => 
        `${give.count} ${(give.type === '*') ? 'of any resource' : give.type}`)
        .join(', ');
    return (
      <div className="TradePlayer" key={`player-${item.name}-${index}`}>
        <PlayerColor color={item.color}/>
        <div>{item.name}</div>
        <div className='TradeLine'>
          { gets !== '' && gives !== '' && 
            <div>wants {gets} and will give {gives}.
            </div> 
          }
          { (gets === '' || gives === '') && 
            <div>has not submitted a trade offer.
            </div> 
          }
          { isTurn && <Button disabled={!item.valid}
            onClick={() => acceptClicked(item)}>accept</Button> }
        </div>
      </div>
    );
  });

  const player = (table.game && table.game.player) ? table.game.player : undefined;
  if (!player) {
    return <></>;
  }

  return (
    <div className="Trade">
      <Paper>
        <div className="Title">
          Trading negotiations {isTurn ? '' : `with ${table.game.turn.name}`}
        </div>
        <div className="PlayerList">
          { players }
        </div>
        <div className='TradeLine'
          style={{
            flexDirection: 'column',
            alignItems: 'flex-start'
          }}>
          <div style={{display: 'flex' }}>
            <b>You want to receive {getLine}.</b>
          </div>
          <div style={{display: 'flex' }}>
            <ResourceCounter onCount={getCount} type='brick'/>
            <ResourceCounter onCount={getCount} type='wood'/>
            <ResourceCounter onCount={getCount} type='wheat'/>
            <ResourceCounter onCount={getCount} type='sheep'/>
            <ResourceCounter onCount={getCount} type='stone'/>
          </div>
          <div style={{display: 'flex' }}>
            <b>You are willing to give {giveLine}.</b>
          </div>
          <div style={{display: 'flex' }}>
            { player.brick > 0 && <ResourceCounter onCount={giveCount} type='brick' max={player.brick}/> }
            { player.wood > 0 && <ResourceCounter onCount={giveCount} type='wood' max={player.wood}/> }
            { player.wheat > 0 && <ResourceCounter onCount={giveCount} type='wheat' max={player.wheat}/> }
            { player.sheep > 0 && <ResourceCounter onCount={giveCount} type='sheep' max={player.sheep}/> }
            { player.stone > 0 && <ResourceCounter onCount={giveCount} type='stone' max={player.stone}/> }
          </div>
        </div>
        <Button disabled={getLine === 'nothing' || giveLine === 'nothing'}
          onClick={offerClicked}>Offer</Button>
        { isTurn && <Button onClick={cancelClicked}>cancel</Button> }
      </Paper>
    </div>
  );
};

export default Trade;