import { commandIds } from "@commands/ids";
import type { AppStore } from "@editor/store";
import type { BrushSettings, ToolId } from "@editor/tools";
import { BottomControlDivider } from "./Divider";
import { bottomControlLabelClass } from "./styles";

export type BrushControlsProps = {
  tool: Extract<ToolId, "brush" | "eraser">;
  settings: BrushSettings;
  dispatch: AppStore["dispatch"];
};

export function BrushControls({ tool, settings, dispatch }: BrushControlsProps) {
  return (
    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
      <span className="px-2 font-medium text-white/85">{tool === "eraser" ? "Eraser" : "Brush"}</span>
      <BottomControlDivider />
      {tool === "brush" ? (
        <label className="flex items-center gap-1.5">
          <span className={bottomControlLabelClass()}>Color</span>
          <input
            type="color"
            className="h-7 w-8 cursor-pointer rounded border-0 bg-transparent p-0"
            value={settings.color}
            aria-label="Brush color"
            onChange={(event) => dispatch(commandIds.toolSetBrushSettings, { color: event.target.value })}
          />
        </label>
      ) : null}
      <label className="flex items-center gap-1.5">
        <span className={bottomControlLabelClass()}>Size</span>
        <input
          type="range"
          min={1}
          max={200}
          value={settings.size}
          className="w-24 accent-white"
          aria-label={`${tool} size`}
          onChange={(event) => dispatch(commandIds.toolSetBrushSettings, { size: Number(event.target.value) })}
        />
        <span className="w-8 text-right text-white">{Math.round(settings.size)}</span>
      </label>
      <BottomControlDivider />
      <label className="flex items-center gap-1.5">
        <span className={bottomControlLabelClass()}>Hard</span>
        <input
          type="range"
          min={0}
          max={100}
          value={settings.hardness}
          className="w-24 accent-white"
          aria-label={`${tool} hardness`}
          onChange={(event) => dispatch(commandIds.toolSetBrushSettings, { hardness: Number(event.target.value) })}
        />
        <span className="w-8 text-right text-white">{Math.round(settings.hardness)}</span>
      </label>
    </div>
  );
}