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 { A as AppLayout } 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 "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({
    alt: "",
    image_url: null
  });
  useEffect(() => {
    if (file) {
      setData("image_url", file.file);
    }
  }, [file, setData]);
  const handleSubmit = (e) => {
    e.preventDefault();
    post("/carousel", {
      forceFormData: true
    });
    if (wasSuccessful) {
      toast.success("Slider image successfully uploaded");
    }
  };
  return /* @__PURE__ */ jsxs(AppLayout, { children: [
    /* @__PURE__ */ jsx(Head, { title: "Add Carousel" }),
    /* @__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 Slider Image" }),
      /* @__PURE__ */ jsxs(
        "form",
        {
          onSubmit: handleSubmit,
          method: "POST",
          encType: "multipart/formdata",
          children: [
            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
              /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title" }),
              /* @__PURE__ */ jsx(
                Input,
                {
                  type: "text",
                  id: "title",
                  value: data.alt,
                  onChange: (e) => setData("alt", e.target.value),
                  className: "rounded border p-2"
                }
              ),
              errors.alt && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: errors.alt })
            ] }),
            /* @__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
};