import ColourPicker from "./ColourPicker";
import type { Region } from "../../../../types/types";

type RegionSelectorProps = {
  regions: Region[];
  selectedRegionIndex: number;
  onSelectRegion: (index: number) => void;
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
  onSelectMode: (mode: string) => void;
};

const RegionSelector = ({
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  mode,
  onSelectMode,
}: RegionSelectorProps) => {
  const handleChange = (e: { target: { value: string } }) => {
    onSelectMode(e.target.value);
  };

  return (
    <div>
      <div>
        <h2 className="text-xl">Region Select</h2>
      </div>
      <div>
        {regions.map((region, idx) => (
          <div
            key={region.name}
            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
          >
            <label style={{ marginRight: "0.5rem" }}>
              <input
                type="radio"
                checked={selectedRegionIndex === idx}
                onChange={() => {
                  onSelectMode("painter");
                  onSelectRegion(idx);
                }}
              />{" "}
              {region.name}
            </label>
            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
          </div>
        ))}
        <div>
          <h2 className="text-xl">Tools</h2>
        </div>
        <div className="flex flex-col">
          <label htmlFor="mode">
            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
            Paint mode
          </label>

          <label htmlFor="erase">
            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
            Erase mode
          </label>
        </div>
      </div>
    </div>
  );
};

export default RegionSelector;