import { useSetting } from "@/hooks/useSettings";
import { __, sprintf } from "@wordpress/i18n";
import { Check } from "lucide-react";
import { DISPLAY_MODE_SUMMARY } from "../constants";

const SHORTCODES = [
  [
    __("Compare Button", "product-comparison-for-woocommerce"),
    "[pcfw_compare_button]",
  ],
  [
    __("Compare Table", "product-comparison-for-woocommerce"),
    "[pcfw_compare_table]",
  ],
  [
    __("Compare Bar", "product-comparison-for-woocommerce"),
    "[pcfw_compare_bar]",
  ],
  [
    __("Header counter", "product-comparison-for-woocommerce"),
    "[pcfw_compare_counter]",
  ],
];

/**
 * "What shoppers get": a live summary of the General settings, plus the
 * blocks and shortcodes that place the comparison anywhere.
 */
const SummaryAside = () => {
  const [enabled] = useSetting("general.enabled", true);
  const [mode] = useSetting("general.display_mode", "popup");
  const [limit] = useSetting("general.limit", 4);
  const [days] = useSetting("general.cookie_days", 30);
  const [merge] = useSetting("general.merge_on_login", true);

  const lines = [
    enabled
      ? __("Compare buttons are live", "product-comparison-for-woocommerce")
      : __("Comparison is turned off", "product-comparison-for-woocommerce"),
    DISPLAY_MODE_SUMMARY[mode] ?? DISPLAY_MODE_SUMMARY.popup,
    sprintf(
      /* translators: %d: number of products. */
      __(
        "Up to %d products side by side",
        "product-comparison-for-woocommerce",
      ),
      limit,
    ),
    merge
      ? sprintf(
          /* translators: %d: number of days. */
          __(
            "Lists kept for %d days, synced on login",
            "product-comparison-for-woocommerce",
          ),
          days,
        )
      : sprintf(
          /* translators: %d: number of days. */
          __("Lists kept for %d days", "product-comparison-for-woocommerce"),
          days,
        ),
  ];

  return (
    <aside className="ino:sticky ino:top-12 ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-5">
      <h2 className="ino:m-0 ino:text-base ino:font-semibold">
        {__("What shoppers get", "product-comparison-for-woocommerce")}
      </h2>
      <ul className="ino:mt-3 ino:mb-0 ino:flex ino:list-none ino:flex-col ino:gap-2.5 ino:p-0 ino:text-sm">
        {lines.map((line) => (
          <li
            key={line}
            className="ino:m-0 ino:flex ino:items-start ino:gap-2.5"
          >
            <Check
              className="ino:mt-0.5 ino:size-4 ino:shrink-0 ino:text-emerald-700"
              aria-hidden="true"
            />
            {line}
          </li>
        ))}
      </ul>
      <div className="ino:mt-5 ino:border-t ino:border-border ino:pt-4">
        <p className="ino:m-0 ino:text-[13px] ino:text-muted-foreground">
          {__(
            "Add it anywhere with a block or shortcode",
            "product-comparison-for-woocommerce",
          )}
        </p>
        <ul className="ino:mt-2 ino:mb-0 ino:flex ino:list-none ino:flex-col ino:gap-1.5 ino:p-0 ino:text-[13px]">
          {SHORTCODES.map(([name, code]) => (
            <li
              key={code}
              className="ino:m-0 ino:flex ino:justify-between ino:gap-2"
            >
              <span className="ino:font-medium">{name}</span>
              <code className="ino:bg-transparent ino:p-0 ino:text-muted-foreground">
                {code}
              </code>
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
};

export default SummaryAside;