import ColourPicker from "./ColourPicker";
import type { PaintedCell, Region } from "../../../../types/types";
import type { RefObject } from "react";

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

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

  const handleResetClick = () => {
    const map = paintedCells.current;
    map.clear();
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
        <h2 className="text-2xl mb-2">Tools</h2>
        <div className="flex flex-col">
          <label
            htmlFor="paintMode"
            className={`p-4 border rounded-lg  mb-2
            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
          >
            <input
              id="paintMode"
              type="radio"
              onChange={handleChange}
              checked={mode === "painter"}
              value="painter"
              className="sr-only"
            />
            <span className="text-xl">Paint mode</span>
          </label>
          <label
            htmlFor="eraseMode"
            className={`p-4 border rounded-lg  mb-2
            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
          >
            <input
              id="eraseMode"
              type="radio"
              onChange={handleChange}
              checked={mode === "eraser"}
              value={"eraser"}
              className="sr-only"
            />
            <span className="text-xl">Erase mode</span>
          </label>
        </div>
      </div>
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
        <h2 className="text-2xl mb-2">Region Select</h2>
        <>
          {regions.map((region, idx) => {
            const isSelected = selectedRegionIndex === idx;
            const inputId = `region-${idx}`;
            return (
              <label
                htmlFor={inputId}
                key={region.name}
                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
                  ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
              >
                <div className="flex flex-row gap-4 items-center">
                  <input
                    type="radio"
                    checked={isSelected}
                    id={inputId}
                    name="region"
                    className="sr-only"
                    onChange={() => {
                      onSelectMode("painter");
                      onSelectRegion(idx);
                    }}
                  />
                  <span className="text-xl">{region.name}</span>
                </div>
                <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
                <p className="text-slate-400">{region.brushColour}</p>
              </label>
            );
          })}
        </>
      </div>

      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
        <div className="flex flex-col">
          <h2 className="text-2xl mb-2">Actions</h2>
          <button
            onClick={handleResetClick}
            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
          >
            Reset Regions
          </button>
        </div>
      </div>
    </div>
  );
};

export default RegionSelector;