import { useAppSelector } from "@/store";
import { selectDesignDraft } from "@/store/slices/designSlice";
import { __ } from "@wordpress/i18n";
import { previewTemplate, previewVars } from "../lib/previewVars";
import "./designPreview.css";

const PRODUCTS = [
  { name: "Aria One", tint: "#E8ECF5" },
  { name: "Aria Pro", tint: "#EFE9E1" },
  { name: "Aria Max", tint: "#E3EEEA" },
];
const ROWS = [
  { label: "Price", values: ["$129.00", "$179.00", "$249.00"], price: true },
  { label: "Rating", values: ["4.4 ★", "4.7 ★", "4.6 ★"] },
  { label: "Battery", values: ["30 hours", "40 hours", "30 hours"] },
  { label: "Warranty", values: ["2 years", "2 years", "2 years"] },
];

/**
 * The comparison table in the draft design. Same markup roles and the
 * same template rules as the storefront table (`pcfw-tpl-<template>`),
 * so every template, colour and the theme style show as shoppers see them.
 */
const DesignPreview = () => {
  const design = useAppSelector(selectDesignDraft);
  const template = previewTemplate(design);

  return (
    <section className="ino:sticky ino:top-12 ino:max-h-[calc(100vh-8rem)] ino:overflow-auto ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-5">
      <h2 className="ino:mt-0 ino:mb-3 ino:text-base ino:font-semibold">
        {__("Preview", "product-comparison-for-woocommerce")}
      </h2>
      <div
        className={`pcfw-dp pcfw-dp--${template}`}
        style={previewVars(design)}
      >
        <div className="pcfw-dp__scroll">
          <table>
            <thead>
              <tr>
                <td className="pcfw-dp__corner" />
                {PRODUCTS.map((p) => (
                  <th key={p.name} scope="col" className="pcfw-dp__product">
                    <span
                      className="pcfw-dp__image"
                      style={{ "--_tint": p.tint }}
                    />
                    <span className="pcfw-dp__name">{p.name}</span>
                    <span className="pcfw-dp__cart">
                      {__("Add to cart", "product-comparison-for-woocommerce")}
                    </span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {ROWS.map((row) => (
                <tr
                  key={row.label}
                  className={[
                    new Set(row.values).size > 1 && "is-different",
                    row.price && "is-price",
                  ]
                    .filter(Boolean)
                    .join(" ")}
                >
                  <th scope="row" className="pcfw-dp__label">
                    {row.label}
                  </th>
                  {row.values.map((value, i) => (
                    <td key={i} className="pcfw-dp__cell">
                      {value}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default DesignPreview;