import { ProBadge } from "@/components/plan-badges";
import SettingsCard from "@/components/settings/SettingsCard";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useGroups } from "@/hooks/useGroups";
import { IS_PRO } from "@/lib/env";
import { __, sprintf } from "@wordpress/i18n";
import { X } from "lucide-react";
import { useState } from "react";

/**
 * Table fields › Spec groups (Pro): the sections rows are grouped under,
 * in table order. Rows join a group in their options.
 */
const GroupsSection = () => {
  const { groups, add, rename, remove } = useGroups();
  const [label, setLabel] = useState("");

  const submit = (event) => {
    event.preventDefault();
    if (label.trim()) {
      add(label.trim());
      setLabel("");
    }
  };

  return (
    <SettingsCard
      title={__("Spec groups", "product-comparison-for-woocommerce")}
      description={__(
        "Sections like Display, Battery or Shipping. Pick a row's group in its options.",
        "product-comparison-for-woocommerce",
      )}
      badge={<ProBadge />}
    >
      <ul className="ino:m-0 ino:flex ino:list-none ino:flex-col ino:gap-2 ino:border-t ino:border-border/70 ino:p-0 ino:pt-4">
        {groups.map((group) => (
          <li key={group.key} className="ino:flex ino:items-center ino:gap-2">
            <Input
              aria-label={__(
                "Group name",
                "product-comparison-for-woocommerce",
              )}
              value={group.label}
              onChange={(event) => rename(group.key, event.target.value)}
            />
            <Button
              type="button"
              variant="ghost"
              size="icon"
              aria-label={sprintf(
                /* translators: %s: group name */
                __("Remove %s", "product-comparison-for-woocommerce"),
                group.label,
              )}
              onClick={() => remove(group.key)}
            >
              <X aria-hidden="true" />
            </Button>
          </li>
        ))}
      </ul>
      <form onSubmit={submit} className="ino:flex ino:gap-2 ino:py-4">
        <Input
          aria-label={__("New group", "product-comparison-for-woocommerce")}
          placeholder={__("e.g. Battery", "product-comparison-for-woocommerce")}
          value={label}
          disabled={!IS_PRO}
          onChange={(event) => setLabel(event.target.value)}
        />
        <Button type="submit" variant="outline" disabled={!IS_PRO}>
          {__("+ Add group", "product-comparison-for-woocommerce")}
        </Button>
      </form>
    </SettingsCard>
  );
};

export default GroupsSection;