import { Badge } from "@/components/ui/badge";
import { useFields } from "@/hooks/useFields";
import { IS_PRO } from "@/lib/env";
import { __, sprintf } from "@wordpress/i18n";
import FieldList from "../components/FieldList";
import { CategoryTemplates, RowTools } from "../components/ProTeasers";
import RowsFor from "../components/RowsFor";

/** Table fields › Table rows: order and on/off for every row. */
const RowsSection = () => {
  const { fields } = useFields();
  const shown = fields.filter((f) => f.enabled && (!f.pro || IS_PRO)).length;

  return (
    <section className="ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-6">
      <div className="ino:mb-4 ino:flex ino:flex-wrap ino:items-start ino:justify-between ino:gap-3">
        <div>
          <h2 className="ino:m-0 ino:text-base ino:font-semibold">
            {__("Table rows", "product-comparison-for-woocommerce")}
          </h2>
          <p className="ino:mt-1 ino:mb-0 ino:text-sm ino:text-muted-foreground">
            {__(
              "Turn rows on or off and drag to reorder. Every global attribute is free.",
              "product-comparison-for-woocommerce",
            )}
          </p>
        </div>
        <Badge variant="secondary">
          {sprintf(
            /* translators: 1: rows shown, 2: rows available */
            __("%1$d of %2$d shown", "product-comparison-for-woocommerce"),
            shown,
            fields.length,
          )}
        </Badge>
      </div>
      {IS_PRO ? <RowsFor /> : <CategoryTemplates />}
      <FieldList />
      <RowTools />
    </section>
  );
};

export default RowsSection;