import { useAppSelector } from "@/store";
import { selectDesignDraft } from "@/store/slices/designSlice";
import { selectDraft } from "@/store/slices/settingsSlice";
import { __ } from "@wordpress/i18n";
import { useState } from "react";
import { DEFAULT_LABELS } from "../constants";
import PreviewBar from "./PreviewBar";
import PreviewButton from "./PreviewButton";

const PRODUCTS = [
  { id: 1, name: "Aria One", price: "$129.00", tint: "#E8ECF5" },
  { id: 2, name: "Aria Pro", price: "$179.00", tint: "#EFE9E1" },
  { id: 3, name: "Aria Max", price: "$249.00", tint: "#E3EEEA" },
];

/**
 * Live preview of a shop grid with the unsaved settings: click Compare to
 * add or remove products, hover to see the hover state; the bar follows.
 */
const ShopPreview = () => {
  const settings = useAppSelector(selectDraft);
  const design = useAppSelector(selectDesignDraft);
  const [list, setList] = useState([1]);
  const button = settings.button;
  const labels = {
    add: button.label_add || DEFAULT_LABELS.add,
    added: button.label_added || DEFAULT_LABELS.added,
    remove: button.label_remove || DEFAULT_LABELS.remove,
  };
  const toggle = (id) =>
    setList((ids) =>
      ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id],
    );
  const items = PRODUCTS.filter((p) => list.includes(p.id));
  const barOn =
    settings.bar.enabled && items.length >= settings.bar.show_when_count;
  const bar = barOn && (
    <PreviewBar
      design={design}
      items={items}
      addMore={settings.bar.add_more_search}
    />
  );

  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">
      <div className="ino:mb-3 ino:flex ino:items-baseline ino:justify-between ino:gap-2">
        <h2 className="ino:m-0 ino:text-base ino:font-semibold">
          {__("Live preview", "product-comparison-for-woocommerce")}
        </h2>
        <span className="ino:text-xs ino:text-muted-foreground">
          {__(
            "Click Compare on any product",
            "product-comparison-for-woocommerce",
          )}
        </span>
      </div>
      <div className="ino:flex ino:flex-col ino:gap-4 ino:rounded-lg ino:bg-muted/50 ino:p-4">
        {settings.bar.position === "top" && bar}
        <ul className="ino:m-0 ino:grid ino:list-none ino:grid-cols-[repeat(auto-fill,minmax(120px,1fr))] ino:gap-3 ino:p-0">
          {PRODUCTS.map((p) => (
            <li
              key={p.id}
              className="ino:flex ino:min-w-0 ino:flex-col ino:gap-1.5"
            >
              <div
                className="ino:aspect-square ino:rounded-lg"
                style={{ background: p.tint }}
              />
              <div className="ino:truncate ino:text-[13px] ino:font-semibold">
                {p.name}
              </div>
              <div className="ino:text-xs ino:text-muted-foreground">
                {p.price}
              </div>
              {settings.button.show_in_loop ? (
                <PreviewButton
                  design={design}
                  button={button}
                  labels={labels}
                  name={p.name}
                  added={list.includes(p.id)}
                  onToggle={() => toggle(p.id)}
                />
              ) : null}
            </li>
          ))}
        </ul>
        {!settings.button.show_in_loop && (
          <p className="ino:m-0 ino:text-center ino:text-[13px] ino:text-muted-foreground">
            {__(
              "Button hidden in the shop grid",
              "product-comparison-for-woocommerce",
            )}
          </p>
        )}
        {settings.bar.position !== "top" && bar}
        {!settings.bar.enabled && (
          <p className="ino:m-0 ino:rounded-lg ino:border ino:border-dashed ino:p-3 ino:text-center ino:text-[13px] ino:text-muted-foreground">
            {__(
              "Compare bar is turned off",
              "product-comparison-for-woocommerce",
            )}
          </p>
        )}
      </div>
    </section>
  );
};

export default ShopPreview;