import { jsxs, jsx } from "react/jsx-runtime";
import { B as Button } from "./index-CY6fYws-.js";
import { I as Input } from "./input-DfkIsvXR.js";
import { L as Label } from "./label-DrpjkvJN.js";
import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, e as SelectGroup, d as SelectItem } from "./select-CsRyyQUa.js";
import { A as AppLayout, d as dashboard } from "./app-layout-BFyUFda2.js";
import { useForm, Head } from "@inertiajs/react";
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
/* empty css                      */
import { useState, useEffect } from "react";
import { FilePond, registerPlugin } from "react-filepond";
import { toast } from "sonner";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "@radix-ui/react-label";
import "@radix-ui/react-select";
import "lucide-react";
import "./sheet-Bq2cyJmx.js";
import "@radix-ui/react-dialog";
import "@radix-ui/react-tooltip";
import "@radix-ui/react-dropdown-menu";
import "@radix-ui/react-avatar";
import "./app-logo-icon-kpljnLMz.js";
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
function CarouselAdd() {
  const [file, setFile] = useState(null);
  const { data, setData, post, processing, errors, wasSuccessful } = useForm({
    title: "",
    type: "traditional",
    image_url: null
  });
  useEffect(() => {
    if (file) {
      setData("image_url", file.file);
    }
  }, [file, setData]);
  const handleSubmit = (e) => {
    e.preventDefault();
    post(dashboard.product.add().url, {
      forceFormData: true
    });
    if (wasSuccessful) {
      toast.success("Product added successfully");
    }
  };
  return /* @__PURE__ */ jsxs(AppLayout, { children: [
    /* @__PURE__ */ jsx(Head, { title: "Add Product Image" }),
    /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-8 px-8 py-8", children: [
      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Add Product Image" }),
      /* @__PURE__ */ jsxs(
        "form",
        {
          onSubmit: handleSubmit,
          method: "POST",
          encType: "multipart/formdata",
          children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
                /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title" }),
                /* @__PURE__ */ jsx(
                  Input,
                  {
                    type: "text",
                    id: "title",
                    value: data.title,
                    onChange: (e) => setData("title", e.target.value),
                    className: "rounded border p-2"
                  }
                ),
                errors.title && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: errors.title })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
                /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Type" }),
                /* @__PURE__ */ jsxs(
                  Select,
                  {
                    value: data.type,
                    onValueChange: (e) => {
                      console.log(e);
                      setData("type", e);
                    },
                    children: [
                      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a type" }) }),
                      /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsxs(SelectGroup, { children: [
                        /* @__PURE__ */ jsx(SelectItem, { value: "traditional", children: "Traditional" }),
                        /* @__PURE__ */ jsx(SelectItem, { value: "modern", children: "Modern" }),
                        /* @__PURE__ */ jsx(SelectItem, { value: "bespoke", children: "Bespoke" }),
                        /* @__PURE__ */ jsx(SelectItem, { value: "abstract", children: "Abstract" }),
                        /* @__PURE__ */ jsx(SelectItem, { value: "art", children: "Art in carpet" })
                      ] }) })
                    ]
                  }
                )
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
              /* @__PURE__ */ jsx(Label, { children: "Image" }),
              /* @__PURE__ */ jsx(
                FilePond,
                {
                  files: file ? [file] : [],
                  onupdatefiles: (fileItems) => {
                    setFile(fileItems[0] || null);
                  },
                  allowMultiple: false,
                  maxFiles: 1,
                  name: "image_url",
                  instantUpload: false,
                  storeAsFile: true,
                  labelIdle: 'Drag & Drop your image or <span class="filepond--label-action">Browse</span>'
                }
              ),
              errors.image_url && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: errors.image_url })
            ] }),
            /* @__PURE__ */ jsx(
              Button,
              {
                type: "submit",
                disabled: processing,
                className: "cursor-pointer",
                children: processing ? "Uploading..." : "Submit"
              }
            )
          ]
        }
      )
    ] })
  ] });
}
export {
  CarouselAdd as default
};