import { jsxs, jsx } from "react/jsx-runtime";
import { C as Combobox } from "./combobox-BpeE9nB5.js";
import { I as InputError } from "./input-error-D1JIzedA.js";
import { B as Button } from "./button-CdJZJLGw.js";
import { C as Card, a as CardHeader, c as CardTitle, d as CardDescription, b as CardContent } from "./card-B-gBwpxd.js";
import { I as Input } from "./input-BsvJqbcd.js";
import { L as Label } from "./label-0rIIfpX0.js";
import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-BYx0MCUK.js";
import { o as onHandleChange } from "./inertia-BtwbgBI3.js";
import { usePage, useForm, Link } from "@inertiajs/react";
import { FileText, Image, Save } from "lucide-react";
import { useState } from "react";
import { Editor } from "richtor";
/* empty css                 */
import "cmdk";
import "./utils-DLCPGU0v.js";
import "clsx";
import "tailwind-merge";
import "./popover-Cv6Hz_y0.js";
import "@radix-ui/react-popover";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "@radix-ui/react-label";
import "@radix-ui/react-select";
const BlogForm = () => {
  const { props } = usePage();
  const { auth, blog, categories, statuses, translate } = props;
  const { dashboard, input, button } = translate;
  const [banner, setBanner] = useState((blog == null ? void 0 : blog.banner) || "/assets/images/blank-image.jpg");
  const [thumbnail, setThumbnail] = useState((blog == null ? void 0 : blog.thumbnail) || "/assets/images/blank-image.jpg");
  const { data, setData, post, processing, errors } = useForm({
    title: blog ? blog.title : "",
    slug: blog ? blog.slug : "",
    description: blog ? blog.description : "",
    keywords: blog ? blog.keywords || "" : "",
    status: blog ? blog.status : "draft",
    thumbnail: null,
    banner: null,
    user_id: blog ? blog.user_id : auth.user.id,
    blog_category_id: blog ? blog.blog_category_id : ""
  });
  const handleSubmit = (e) => {
    e.preventDefault();
    if (blog) {
      post(route("blogs.update", blog.id));
    } else {
      post(route("blogs.store"));
    }
  };
  const transformedCategories = categories == null ? void 0 : categories.map((category) => ({
    label: category.name,
    value: category.id
  }));
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5" }),
          dashboard.blog_information
        ] }),
        /* @__PURE__ */ jsx(CardDescription, { children: dashboard.provide_blog_details })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: dashboard.title_80_char }),
          /* @__PURE__ */ jsx(
            Input,
            {
              id: "title",
              value: data.title,
              onChange: (e) => setData("title", e.target.value),
              placeholder: dashboard.enter_blog_title,
              maxLength: 80
            }
          ),
          /* @__PURE__ */ jsx(InputError, { message: errors.title })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: "blog_category_id", children: [
              input.category,
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Combobox,
              {
                defaultValue: data.blog_category_id,
                data: transformedCategories || [],
                placeholder: dashboard.select_category,
                onSelect: (selected) => setData("blog_category_id", selected.value)
              }
            ),
            /* @__PURE__ */ jsx(InputError, { message: errors.blog_category_id })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: "status", children: [
              input.status,
              " *"
            ] }),
            /* @__PURE__ */ jsxs(Select, { value: data.status, onValueChange: (value) => setData("status", value), children: [
              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
              /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(statuses).map(([key, label]) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: label }, key)) })
            ] }),
            /* @__PURE__ */ jsx(InputError, { message: errors.status })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: "keywords", children: dashboard.keywords_80_char }),
          /* @__PURE__ */ jsx(
            Input,
            {
              id: "keywords",
              value: data.keywords,
              onChange: (e) => setData("keywords", e.target.value),
              placeholder: dashboard.enter_your_keywords,
              maxLength: 80
            }
          ),
          /* @__PURE__ */ jsx(InputError, { message: errors.keywords })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs(Label, { htmlFor: "description", children: [
            input.description,
            " *"
          ] }),
          /* @__PURE__ */ jsx(
            Editor,
            {
              ssr: true,
              output: "html",
              placeholder: {
                paragraph: dashboard.write_blog_content_here,
                imageCaption: dashboard.type_caption_optional
              },
              contentMinHeight: 256,
              contentMaxHeight: 640,
              initialContent: data.description,
              onContentChange: (value) => setData((prev) => ({
                ...prev,
                description: value
              }))
            }
          ),
          /* @__PURE__ */ jsx(InputError, { message: errors.description })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Image, { className: "h-5 w-5" }),
          dashboard.media_files
        ] }),
        /* @__PURE__ */ jsx(CardDescription, { children: dashboard.upload_banner_thumbnail_desc })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: "banner", children: dashboard.blog_banner }),
          /* @__PURE__ */ jsx(Input, { id: "banner", type: "file", accept: "image/*", name: "banner", onChange: (e) => onHandleChange(e, setData, setBanner) }),
          /* @__PURE__ */ jsx(InputError, { message: errors.banner }),
          /* @__PURE__ */ jsx("div", { className: "border-border mt-3 overflow-hidden rounded-lg border-2 border-dashed", children: /* @__PURE__ */ jsx("img", { src: banner, alt: "" }) })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: "thumbnail", children: dashboard.blog_thumbnail }),
          /* @__PURE__ */ jsx(Input, { id: "thumbnail", type: "file", accept: "image/*", name: "thumbnail", onChange: (e) => onHandleChange(e, setData, setThumbnail) }),
          /* @__PURE__ */ jsx(InputError, { message: errors.thumbnail }),
          /* @__PURE__ */ jsx("div", { className: "border-border mt-3 overflow-hidden rounded-lg border-2 border-dashed", children: /* @__PURE__ */ jsx("img", { src: thumbnail, alt: "" }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-4", children: [
      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: route("blogs.index"), children: button.cancel }) }),
      /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: processing, children: [
        /* @__PURE__ */ jsx(Save, { className: "mr-2 h-4 w-4" }),
        blog ? dashboard.update_blog : dashboard.add_blog
      ] })
    ] })
  ] });
};
export {
  BlogForm as default
};