import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useCreateVersusMutation } from "@/store/api/versusApi";
import { __ } from "@wordpress/i18n";
import { useState } from "react";
import ProductPicker from "./ProductPicker";

const D = "product-comparison-for-woocommerce";
const LABEL = "ino:text-[13px] ino:font-medium ino:text-foreground";

/** SEO pages › "New comparison page": products, optional title, draft or published. */
const NewPageForm = () => {
  const [products, setProducts] = useState([]);
  const [title, setTitle] = useState("");
  const [create, { isLoading, error, data }] = useCreateVersusMutation();

  const submit = async (status) => {
    const result = await create({
      product_ids: products.map((p) => p.id),
      title,
      status,
    });
    if (!result.error) {
      setProducts([]);
      setTitle("");
    }
  };

  return (
    <div className="ino:flex ino:flex-col ino:gap-3 ino:pb-5">
      <label htmlFor="pcfw-versus-products" className={LABEL}>
        {__("Products (2–4)", D)}
      </label>
      <ProductPicker
        id="pcfw-versus-products"
        value={products}
        onChange={setProducts}
        max={4}
      />
      <label htmlFor="pcfw-versus-title" className={LABEL}>
        {__("Title (optional)", D)}
      </label>
      <Input
        id="pcfw-versus-title"
        value={title}
        placeholder={
          products.length > 1
            ? products.map((p) => p.name).join(" vs ")
            : __("Product A vs Product B", D)
        }
        onChange={(event) => setTitle(event.target.value)}
      />
      <div className="ino:flex ino:flex-wrap ino:gap-2">
        <Button
          disabled={products.length < 2 || isLoading}
          onClick={() => submit("draft")}
        >
          {__("Create draft", D)}
        </Button>
        <Button
          variant="outline"
          disabled={products.length < 2 || isLoading}
          onClick={() => submit("publish")}
        >
          {__("Create and publish", D)}
        </Button>
      </div>
      <p role="status" className="ino:m-0 ino:text-sm">
        {error && (error.data?.message || __("Couldn’t create the page.", D))}
        {!error && data && (
          <a href={data.edit_link}>
            {__("Created. Add an intro in the editor →", D)}
          </a>
        )}
      </p>
    </div>
  );
};

export default NewPageForm;