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;
  isErasing: boolean;
  onSelectErasing: (isErasing: boolean) => void;
};

const RegionSelector = ({
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  isErasing,
  onSelectErasing,
}: RegionSelectorProps) => {
  const handleChange = () => {
    onSelectErasing(!isErasing);
  };

  return (
    <div>
      <div>
        <h2>Region Select</h2>
      </div>
      <div>
        {regions.map((region, idx) => (
          <div key={region.name}>
            <label style={{ marginRight: "0.5rem" }}>
              <input type="radio" checked={selectedRegionIndex === idx} onChange={() => onSelectRegion(idx)} />{" "}
              {region.name}
            </label>
            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
          </div>
        ))}
        <label htmlFor="">
          <input type="checkbox" onChange={handleChange} checked={isErasing} />
          Eraser
        </label>
      </div>
    </div>
  );
};

export default RegionSelector;