import { ProBadge } from "@/components/plan-badges";
import { Input } from "@/components/ui/input";
import { useFields } from "@/hooks/useFields";
import { useGroups } from "@/hooks/useGroups";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import { OPTION_LABEL, OPTION_SELECT } from "./rowOptionClasses";
import BarOption from "./BarOption";
import WinnerOption from "./WinnerOption";

/** A labelled text box bound to one row option. */
const Option = ({ id, label, pro, value, placeholder, onChange, mono }) => (
  <div className="ino:flex ino:min-w-0 ino:flex-col ino:gap-1">
    <label htmlFor={id} className={OPTION_LABEL}>
      {label}
      {pro && <ProBadge />}
    </label>
    <Input
      id={id}
      value={value ?? ""}
      placeholder={placeholder}
      disabled={pro && !IS_PRO}
      onChange={(event) => onChange(event.target.value)}
      className={mono ? "ino:font-mono ino:text-[13px]" : ""}
    />
  </div>
);

/**
 * A row's options under it: its label (Free), and spec group, tooltip,
 * unit, winner badge and numeric bar (Pro: groups section the table,
 * tooltips add a "?" to the label, a unit converts values like "0.8 Ah"
 * and "800 mAh" to one unit).
 */
const RowOptions = ({ field }) => {
  const { update } = useFields();
  const { groups } = useGroups();
  const id = `pcfw-row-${field.key.replace(/[^a-z0-9_-]/gi, "-")}`;
  const set = (key) => (value) => update(field.key, { [key]: value });

  return (
    <div className="ino:grid ino:w-full ino:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] ino:gap-3 ino:border-t ino:border-border/70 ino:pt-3">
      <Option
        id={`${id}-label`}
        label={__("Label", "product-comparison-for-woocommerce")}
        value={field.label}
        placeholder={field.default_label || field.key}
        onChange={set("label")}
      />
      <div className="ino:flex ino:min-w-0 ino:flex-col ino:gap-1">
        <label htmlFor={`${id}-group`} className={OPTION_LABEL}>
          {__("Spec group", "product-comparison-for-woocommerce")}
          <ProBadge />
        </label>
        <select
          id={`${id}-group`}
          value={field.group ?? ""}
          disabled={!IS_PRO}
          onChange={(event) => set("group")(event.target.value)}
          className={OPTION_SELECT}
        >
          <option value="">
            {__("No group", "product-comparison-for-woocommerce")}
          </option>
          {groups.map((group) => (
            <option key={group.key} value={group.key}>
              {group.label}
            </option>
          ))}
        </select>
      </div>
      <Option
        id={`${id}-tooltip`}
        label={__("Tooltip", "product-comparison-for-woocommerce")}
        pro
        value={field.tooltip}
        placeholder={__(
          "Short explanation",
          "product-comparison-for-woocommerce",
        )}
        onChange={set("tooltip")}
      />
      <Option
        id={`${id}-unit`}
        label={__("Unit", "product-comparison-for-woocommerce")}
        pro
        mono
        value={field.unit}
        placeholder="g, mAh, GB…"
        onChange={set("unit")}
      />
      <WinnerOption
        id={id}
        field={field}
        onChange={(key, value) => set(key)(value)}
      />
      <BarOption
        id={id}
        field={field}
        onChange={(key, value) => set(key)(value)}
      />
    </div>
  );
};

export default RowOptions;