import { ProBadge } from "@/components/plan-badges";
import { Input } from "@/components/ui/input";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import { DEFAULT_WINNERS, WINNER_RULES } from "../constants";
import { OPTION_LABEL, OPTION_SELECT } from "./rowOptionClasses";

/**
 * Row options › Winner (Pro): which value wins the row's badge (lowest,
 * highest or "yes") and the badge text. Price and rating have a rule
 * out of the box; an empty badge text uses a default like "Lowest price".
 */
const WinnerOption = ({ id, field, onChange }) => {
  const defaults = DEFAULT_WINNERS[field.key] || {};
  const rule = field.compare ?? defaults.rule ?? "none";

  return (
    <>
      <div className="ino:flex ino:min-w-0 ino:flex-col ino:gap-1">
        <label htmlFor={`${id}-winner`} className={OPTION_LABEL}>
          {__("Winner", "product-comparison-for-woocommerce")}
          <ProBadge />
        </label>
        <select
          id={`${id}-winner`}
          value={rule}
          disabled={!IS_PRO}
          onChange={(event) => onChange("compare", event.target.value)}
          className={OPTION_SELECT}
        >
          {WINNER_RULES.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      {rule !== "none" && (
        <div className="ino:flex ino:min-w-0 ino:flex-col ino:gap-1">
          <label htmlFor={`${id}-badge`} className={OPTION_LABEL}>
            {__("Badge text", "product-comparison-for-woocommerce")}
            <ProBadge />
          </label>
          <Input
            id={`${id}-badge`}
            value={field.winner_label ?? ""}
            placeholder={
              defaults.label ||
              __("Best value", "product-comparison-for-woocommerce")
            }
            disabled={!IS_PRO}
            onChange={(event) => onChange("winner_label", event.target.value)}
          />
        </div>
      )}
    </>
  );
};

export default WinnerOption;