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

/**
 * Row options › Numeric bar (Pro): show a meter under this row's numbers.
 * Rows with numbers show it out of the box, except price and rating,
 * which have their own visuals.
 */
const BarOption = ({ id, field, onChange }) => {
  const fallback = BARS_OFF_BY_DEFAULT.includes(field.key) ? "off" : "on";

  return (
    <div className="ino:flex ino:min-w-0 ino:flex-col ino:gap-1">
      <label htmlFor={`${id}-bar`} className={OPTION_LABEL}>
        {__("Numeric bar", "product-comparison-for-woocommerce")}
        <ProBadge />
      </label>
      <select
        id={`${id}-bar`}
        value={field.bar ?? fallback}
        disabled={!IS_PRO}
        onChange={(event) => onChange("bar", event.target.value)}
        className={OPTION_SELECT}
      >
        <option value="on">
          {__("Show when numbers differ", "product-comparison-for-woocommerce")}
        </option>
        <option value="off">
          {__("Hide", "product-comparison-for-woocommerce")}
        </option>
      </select>
    </div>
  );
};

export default BarOption;