import "./DiceSet.scss";
import Die from "./Die";
import React from "react";
import { DieViewProps } from "../types/DieViewProps";

export interface DiceSetProps {
  dice: DieViewProps[];
  specialDice: DieViewProps[];
  modifyDieState: (
    matcher: (die: DieViewProps) => boolean,
    newStateComputer: (die: DieViewProps) => Partial<DieViewProps>,
  ) => void;
  specialDieUsedInRound: boolean;
  resetBoard: () => void;
  commitBoard: () => void;
}
const DiceSet = (props: DiceSetProps) => {
  const {
    dice,
    specialDice,
    modifyDieState,
    specialDieUsedInRound,
    resetBoard,
    commitBoard,
  } = props;
  const handleDieClick = (clickedDie: DieViewProps) => {
    if (clickedDie.isDisabled) return;
    const isSpecialDie = clickedDie.isSpecial;
    if (isSpecialDie && specialDieUsedInRound) return;
    modifyDieState(
      () => true,
      (die) => {
        return {
          isSelected: die === clickedDie,
        };
      },
    );
  };

  const handleRotateButton = (rotation: number) => {
    modifyDieState(
      (die) => die.isSelected,
      (die) => {
        return {
          rotation: (die.rotation + rotation + 360) % 360,
        };
      },
    );
  };

  return (
    <React.Fragment>
      <div className="dice-set-actions">
        <img
          src="./rotate-icon.png"
          onClick={() => handleRotateButton(-90)}
        ></img>
        <img
          src="./rotate-icon.png"
          className="icon-inverted"
          onClick={() => handleRotateButton(90)}
        ></img>
        <img src="./clean-icon.png" onClick={resetBoard}></img>
        <img src="./commit-icon.png" onClick={commitBoard}></img>
      </div>
      <div className="dice-set">
        {dice.map((die) => (
          <Die die={die} handleDieClick={handleDieClick} />
        ))}
      </div>
      <div className="special-dice-set">
        {specialDice.map((die) => (
          <Die die={die} handleDieClick={handleDieClick} />
        ))}
      </div>
    </React.Fragment>
  );
};

export default DiceSet;
