mediahub-fe/components/form/blog/blog--detail-form.tsx

"use client";
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { useParams, useRouter } from "next/navigation";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import JoditEditor from "jodit-react";
import { register } from "module";
import { Switch } from "@/components/ui/switch";
import Cookies from "js-cookie";
import {
  createMedia,
  getTagsBySubCategoryId,
  listEnableCategory,
} from "@/service/content/content";
import { getBlog, postBlog } from "@/service/blog/blog";
import { Badge } from "@/components/ui/badge";
import dynamic from "next/dynamic";

const taskSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
  slug: z.string().min(1, { message: "Judul diperlukan" }),
  meta: z.string().min(1, { message: "Judul diperlukan" }),
  narration: z
    .string()
    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
  categoryName: z.string().min(1, { message: "Kategori diperlukan" }),
});

type Category = {
  id: string;
  categoryName: string;
};

type Detail = {
  id: string;
  title: string;
  narration: string;
  slug: string;
  metadata: string;
  categoryName: string;
  thumbnailLink: string;
  tags: string;
};

const initialCategories: Category[] = [
  {
    id: "1",
    categoryName: "Giat Polri",
  },
  {
    id: "2",
    categoryName: "Giat Pimpinan",
  },
  {
    id: "3",
    categoryName: "Liputan Kegiatan",
  },
  {
    id: "4",
    categoryName: "Seputar Prestasi",
  },
];

const ViewEditor = dynamic(
  () => {
    return import("@/components/editor/view-editor");
  },
  { ssr: false }
);

export default function FormBlogDetail() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const { id } = useParams() as { id: string };
  console.log(id);
  const editor = useRef(null);
  type TaskSchema = z.infer<typeof taskSchema>;

  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const taskId = Cookies.get("taskId");
  const scheduleId = Cookies.get("scheduleId");
  const scheduleType = Cookies.get("scheduleType");

  const [categories] = useState<Category[]>(initialCategories);
  const [selectedTarget, setSelectedTarget] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<any>();
  const [tags, setTags] = useState<any[]>([]);
  const [isDraft, setIsDraft] = useState(false);

  const [detail, setDetail] = useState<Detail>();
  const [refresh, setRefresh] = useState(false);

  const [unitSelection, setUnitSelection] = useState({
    allUnit: false,
    mabes: false,
    polda: false,
    polres: false,
  });

  let fileTypeId = "1";

  const {
    control,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<TaskSchema>({
    resolver: zodResolver(taskSchema),
  });

  const handleRemoveTag = (index: any) => {
    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
  };

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      const files = Array.from(event.target.files);
      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
      console.log("DATAFILE::", selectedFiles);
    }
  };

  const handleRemoveImage = (index: number) => {
    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
  };

  useEffect(() => {
    async function initState() {
      if (id) {
        const response = await getBlog(id);
        const details = response?.data?.data;

        setDetail(details);

        // Set categoryId dari API ke form dan Select
        setValue("categoryName", details.categoryName);
        setSelectedTarget(details.categoryId); // Untuk dropdown
      }
    }
    initState();
  }, [refresh, setValue]);

  const save = async (data: TaskSchema) => {
    const requestData = {
      ...data,
      title: data.title,
      description: data.narration,
      categoryId: selectedTarget,
      slug: data.slug,
      metadata: data.meta,
      // tags: data.tags,
      isDraft,
    };

    const response = await postBlog(requestData);
    console.log("Form Data Submitted:", requestData);
    console.log("response", response);

    MySwal.fire({
      title: "Sukses",
      text: "Data berhasil disimpan.",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then(() => {
      router.push("/en/contributor/blog");
    });
  };

  const onSubmit = (data: TaskSchema) => {
    MySwal.fire({
      title: "Simpan Data",
      text: "Apakah Anda yakin ingin menyimpan data ini?",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  };

  const handlePublish = () => {
    setIsDraft(false);
  };

  const handleSave = () => {
    setIsDraft(true);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {detail !== undefined ? (
        <div className="flex flex-col lg:flex-row gap-10">
          <Card className="w-full lg:w-8/12">
            <div className="px-6 py-6">
              <p className="text-lg font-semibold mb-3">Detail Indeks</p>
              <div className="gap-5 mb-5">
                {/* Input Title */}
                <div className="space-y-2 py-3">
                  <Label>Judul</Label>
                  <Controller
                    control={control}
                    name="title"
                    render={({ field }) => (
                      <Input
                        size="md"
                        type="text"
                        value={detail?.title}
                        onChange={field.onChange}
                        placeholder="Enter Title"
                      />
                    )}
                  />
                  {errors.title?.message && (
                    <p className="text-red-400 text-sm">
                      {errors.title.message}
                    </p>
                  )}
                </div>

                <div className="py-3">
                  <Label>Deskripsi</Label>
                  <Controller
                    control={control}
                    name="narration"
                    render={({ field: { onChange, value } }) => (
                      <ViewEditor initialData={detail?.narration} />
                    )}
                  />
                  {errors.narration?.message && (
                    <p className="text-red-400 text-sm">
                      {errors.narration.message}
                    </p>
                  )}
                </div>
                <div className=" py-3">
                  <div className="space-y-2">
                    <Label>Slug</Label>
                    <Controller
                      control={control}
                      name="slug"
                      render={({ field }) => (
                        <Input
                          size="md"
                          type="text"
                          value={detail?.slug}
                          onChange={field.onChange}
                          placeholder="Enter Slug"
                        />
                      )}
                    />
                    {errors.slug?.message && (
                      <p className="text-red-400 text-sm">
                        {errors.slug.message}
                      </p>
                    )}
                  </div>
                </div>
                <div className=" py-3">
                  <div className="space-y-2">
                    <Label>Meta</Label>
                    <Controller
                      control={control}
                      name="meta"
                      render={({ field }) => (
                        <Input
                          size="md"
                          type="text"
                          value={detail?.metadata}
                          onChange={field.onChange}
                          placeholder="Enter Meta"
                        />
                      )}
                    />
                    {errors.meta?.message && (
                      <p className="text-red-400 text-sm">
                        {errors.meta.message}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </Card>
          <div className="w-full lg:w-4/12">
            <Card className=" h-[650px] px-3 py-3">
              <div className="px-3 py-3">
                <Label htmlFor="fileInput">Gambar Utama</Label>
                <Input
                  id="fileInput"
                  type="file"
                  // onChange={(e) => {
                  //   const file = e.target.files[0];
                  //   if (file) {
                  //     console.log("Selected File:", file);
                  //     // Tambahkan logika jika diperlukan, misalnya upload file ke server
                  //   }
                  // }}
                  className=""
                />
              </div>
              <div className="mt-3 px-3">
                <Label>Pratinjau Gambar Utama</Label>
                <Card className="mt-2">
                  <img
                    src={detail.thumbnailLink}
                    alt="Thumbnail Gambar Utama"
                    className="w-full h-auto rounded"
                  />
                </Card>
              </div>
              <div className="px-3 py-3 mt-6">
                <label
                  htmlFor="kategori"
                  className="block text-sm font-medium text-gray-700"
                >
                  Kategori
                </label>
                <Controller
                  name="categoryName"
                  control={control}
                  render={({ field }) => (
                    <Select
                      value={detail?.categoryName}
                      onValueChange={(value) => {
                        setSelectedTarget(value);
                        field.onChange(value); // Sinkronisasi dengan react-hook-form
                      }}
                    >
                      <SelectTrigger size="md">
                        <SelectValue placeholder="Pilih" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((category) => (
                          <SelectItem
                            key={category.id}
                            value={category.categoryName}
                          >
                            {category.categoryName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                />
              </div>
              <div className="px-3 py-3">
                <div className="space-y-2">
                  <Label>Tag</Label>
                  <div className="flex flex-wrap gap-2">
                    {detail?.tags?.split(",").map((tag, index) => (
                      <Badge
                        key={index}
                        className="border rounded-md  px-2 py-2"
                      >
                        {tag.trim()}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </Card>
            {/* <div className="flex flex-row justify-end gap-3">
              <div className="mt-4">
                <Button
                  type="submit"
                  color="success"
                  onClick={() => handlePublish()}
                >
                  Publish
                </Button>
              </div>
              <div className="mt-4">
                <Button
                  type="submit"
                  color="primary"
                  onClick={() => handleSave()}
                >
                  Submit
                </Button>
              </div>
              <div className="mt-4">
                <Button type="submit" color="primary" variant="outline">
                  Cancel
                </Button>
              </div>
            </div> */}
          </div>
        </div>
      ) : (
        ""
      )}
    </form>
  );
}