import { useRuleStore } from "@/stores/ruleStore";
import { Input } from "@/components/ui/input";
import { NumberInput } from "@/components/ui/number-input";
import { Checkbox } from "@/components/ui/checkbox";
import type { PaddingConfig as PaddingConfigType } from "@/types/rules";

export function PaddingConfig({ ruleId }: { ruleId: string }) {
  const rule = useRuleStore((s) => s.pipeline.find((r) => r.id === ruleId))?.config as PaddingConfigType | undefined;
  const updateRule = useRuleStore((s) => s.updateRule);
  if (!rule) return null;
  const update = (changes: Partial<PaddingConfigType>) => updateRule(ruleId, changes);

  return (
    <div className="flex flex-col gap-3 text-sm">
      <div className="grid grid-cols-2 gap-2">
        <label className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">Width</span>
          <NumberInput value={rule.width} onChange={(v) => update({ width: v })} min={1} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">Pad character</span>
          <Input
            value={rule.pad_char}
            onChange={(e) => update({ pad_char: e.target.value.slice(0, 1) || "0" })}
            maxLength={1}
            className="h-8 text-xs font-mono text-center"
          />
        </label>
      </div>
      <label className="flex items-center gap-1.5 cursor-pointer text-xs">
        <Checkbox checked={rule.pad_all} onCheckedChange={(c) => update({ pad_all: !!c })} />
        Pad all numbers (not just first)
      </label>
    </div>
  );
}