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

import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Switch from '@material-ui/core/Switch';

import "./HouseRules.css";

import { GlobalContext } from "./GlobalContext.js";

const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
  const { ws } = useContext(GlobalContext);
  const [houseRules, setHouseRules] = useState(undefined);
  const [state, setState] = useState(undefined);
  const fields = useMemo(() => [
    'state', 'rules'
  ], []);
  const onWsMessage = (event) => {
    const data = JSON.parse(event.data);
    switch (data.type) {
    case 'game-update':
      console.log(`house-rules - game update`, data.update);
      if ('state' in data.update && data.update.state !== state) {
        setState(data.update.state);
      }
      if ('rules' in data.update && !equal(data.update.rules, rules)) {
        setHouseRules(data.update.rules);
      }
      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 dismissClicked = useCallback((event) => {
    setHouseRulesActive(false);
    /*
      ws.send(JSON.stringify({
        type: 'goto-lobby'
      }));
    }*/
  }, [setHouseRulesActive]);//ws, HouseRulesDismissed, setHouseRulesDismissed]);

  if (!houseRulesActive) {
    return <></>;
  }

  const setRule = (event, key) => {
    console.log(event, key);
  };

  const rules = [ {
    title: `Tiles start facing down`,
    description: `Flip resource tiles upside - down while placing starting settlements.`,
  }, {
    title: `Bribery`,
    description: `Dissuade enemies from robbing you by offering resources voluntarily.`,
  }, {
    title: `King of the Hill`,
    description: `Keep your lead for one full turn after you reach max victory points.`,
  }, {
    title: `Everyone gets one re-roll`,
    description: `Each player gets one chance re - roll at any point.`,
  }, {
    title: `The Bridge`,
    description: `Build a super-bridge across one resource tile.`,
  }, {
    title: `Discard desert`,
    description: `Scrap the desert in favour of an additional resource tile.`,
  }, {
    title: `Roll double, roll again`,
    description: `Roll again if you roll two of the same number.`,
  }, {
    title: `Robin Hood robber`,
    description: `Robbers can't steal from players with fewer than two victory points.`,
  }, {
    title: `Crime and Punishment`,
    description: `Change how the robber works to make Catan more or less competitive.`,
  }, {
    title: `Credit`,
    description: `Trade with resources you don't have.`,
  } ].map(item => {
    item.key = item.title
      .replace(/( +)|[,]/g, '-')
      .toLowerCase();
    const disabled = (state !== 'lobby'),
      checked = houseRules && item.key in houseRules;
     return <div className="HouseRule" key={item.key}>
      <div><b>{item.title}</b>: {item.description}</div>
      <Switch checked={checked} 
        onChange={(e) => setRule(e, item.key)}
        {...{disabled}} />
    </div>
  });

  return (
    <div className="HouseRules">
      <Paper>
        <div className="Title">House Rules</div>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          { rules }
        </div>
        <Button onClick={dismissClicked}>Close</Button>
      </Paper>
    </div>
  );
};

export { HouseRules };