import React, { useContext, useCallback } from "react";

import { assetsPath } from './Common.js';
import { GlobalContext } from "./GlobalContext.js";

import "./Placard.css";

const Placard = ({type, disabled, count, buildActive, setBuildActive}) => {
  const { ws } = useContext(GlobalContext);
  const sendMessage = useCallback((data) => {
    ws.send(JSON.stringify(data));
  }, [ws]);

  const dismissClicked = () => {
    setBuildActive(false);
  }

  const buildClicked = () => {
    if (!type.match(/^l.*/)) { /* longest / largest ... */
      if (!buildActive) {
        setBuildActive(true);
      }
    }
  };

  const roadClicked = () => {
    sendMessage({ type: 'buy-road'});
    setBuildActive(false);
  };

  const settlementClicked = () => {
    sendMessage({ type: 'buy-settlement'});
    setBuildActive(false);
  };

  const cityClicked = () => {
    sendMessage({ type: 'buy-city'});
    setBuildActive(false);
  };

  const developmentClicked = () => {
    sendMessage({ type: 'buy-development'});
    setBuildActive(false);
  };

  if (!type) {
    return <></>;
  }
  
  if (type === 'B') { type = 'blue'; }
  else if (type === 'O') { type = 'orange'; }
  else if (type === 'R') { type = 'red'; }
  else if (type === 'W') { type = 'white'; }

  let buttons;
  if (!disabled && buildActive) {
    switch (type) {
    case 'orange':
    case 'red':
    case 'white':
    case 'blue':
      buttons = <>
        <div onClick={dismissClicked}/>
        <div onClick={roadClicked}/>
        <div onClick={settlementClicked}/>
        <div onClick={cityClicked}/>
        <div onClick={developmentClicked}/>
        <div onClick={dismissClicked}/>
      </>;
      break;
    default:
      buttons = <></>;
      break;
    }
  }

  if (!disabled) {
    return <div className={`Placard${buildActive ? ' Selected' : ''}`}
      onClick={buildClicked}
      disabled={disabled}
      data-type={type}
      style={{
        backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
      }}
    >{buttons}</div>
  } else {
    return <div className={`Placard${buildActive ? ' Selected' : ''}`}
      disabled={disabled}
      data-type={type}
      style={{
        backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
      }}>{ count &&  <div className="Right">{count}</div> }</div>
  }
};

export {Placard};