mediahub-fe/components/form/content/image-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 { 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 { createTask } from "@/config/api";
import {
  createMedia,
  getTagsBySubCategoryId,
  listEnableCategory,
} from "@/service/content/content";

const taskSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
  description: z
    .string()
    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
  // tags: z.string().min(1, { message: "Judul diperlukan" }),
});

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

export default function FormImage() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  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, setCategories] = useState<Category[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<any>();
  const [tags, setTags] = useState<any[]>([]);

  const [selectedTarget, setSelectedTarget] = useState("");
  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 handleKeyDown = (e: any) => {
  //   const newTag = e.target.value.trim(); // Ambil nilai input
  //   if (e.key === "Enter" && newTag) {
  //     e.preventDefault(); // Hentikan submit form
  //     if (!tags.includes(newTag)) {
  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
  //       setValue("tags", ""); // Kosongkan input
  //     }
  //   }
  // };

  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() {
      getCategories();
      // setVideoActive(fileTypeId == '2');
      // getRoles();
    }

    initState();
  }, []);

  const getCategories = async () => {
    try {
      const category = await listEnableCategory(fileTypeId);
      const resCategory: Category[] = category.data.data.content;

      setCategories(resCategory);
      console.log("data category", resCategory);

      if (scheduleId && scheduleType === "3") {
        const findCategory = resCategory.find((o) =>
          o.name.toLowerCase().includes("pers rilis")
        );

        if (findCategory) {
          // setValue("categoryId", findCategory.id);
          setSelectedCategory(findCategory.id); // Set the selected category
          const response = await getTagsBySubCategoryId(findCategory.id);
          setTags(response?.data.data);
        }
      }
    } catch (error) {
      console.error("Failed to fetch categories:", error);
    }
  };

  const save = async (data: TaskSchema) => {
    const requestData = {
      ...data,
      title: data.title,
      description: data.description,
      htmlDescription: data.description,
      fileTypeId,
      categoryId: selectedTarget,
      subCategoryId: selectedTarget,
      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
      statusId: "1",
      publishedFor: 1,
      creatorName: data.creatorName,
      tags: "siap",
      isYoutube: false,
      isInternationalMedia: false,
    };

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

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

  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);
      }
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="flex 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">Form Konten Foto</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={field.value}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                />
                {errors.title?.message && (
                  <p className="text-red-400 text-sm">{errors.title.message}</p>
                )}
              </div>
              <div className="flex items-center">
                <div className="py-3 w-full">
                  <Label>Kategori</Label>
                  <Select
                    value={selectedTarget} // Ensure selectedTarget is updated correctly
                    onValueChange={(value) => {
                      console.log("Selected Category ID:", value);
                      setSelectedTarget(value);
                    }}
                  >
                    <SelectTrigger size="md">
                      <SelectValue placeholder="Pilih" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category.id} value={category.name}>
                          {category.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="py-3">
                <Label>Deskripsi</Label>
                <Controller
                  control={control}
                  name="description"
                  render={({ field: { onChange, value } }) => (
                    <JoditEditor
                      ref={editor}
                      value={value}
                      onChange={onChange}
                      className="dark:text-black"
                    />
                  )}
                />
                {errors.description?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.description.message}
                  </p>
                )}
              </div>
              <div className="py-3">
                <Label>Attachment</Label>
                <div className="flex items-center justify-center w-full pt-2">
                  <label
                    htmlFor="dropzone-file"
                    className="flex flex-col items-center justify-center w-full h-[155px] border-2 border-black border-dashed rounded-lg cursor-pointer dark:bg-black dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
                  >
                    <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
                      <svg
                        className="w-10 h-10 mb-3 text-gray-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth="2"
                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                        ></path>
                      </svg>
                      <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                        {/* or{" "} */}
                        <span className="font-semibold underline text-amber-800">
                          Click to upload
                        </span>
                      </p>
                    </div>
                    <input
                      id="dropzone-file"
                      type="file"
                      className="hidden"
                      onChange={handleImageChange}
                    />
                  </label>
                </div>
                <div className="flex flex-row items-center gap-3 py-3">
                  <Label>Gunakan Watermark</Label>
                  <div className="flex items-center gap-3">
                    <Switch defaultChecked color="primary" id="c2" />
                  </div>
                </div>
                {selectedFiles?.length > 0 ? (
                  <div className="pt-2">
                    <div className="flex gap-3">
                      {selectedFiles.map((image, index) => (
                        <div
                          key={index}
                          className="flex flex-row items-center justify-between gap-1"
                        >
                          <img
                            src={URL.createObjectURL(image)}
                            alt="Pratinjau Gambar"
                            style={{ maxWidth: "200px", maxHeight: "200px" }}
                            className="rounded-md"
                          />
                          <button
                            className="text-blue-600 hover:text-blue-800 focus:outline-none"
                            onClick={() => handleRemoveImage(index)}
                          >
                            X
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                ) : (
                  ""
                )}
              </div>
            </div>

            {/* Submit Button */}
          </div>
        </Card>
        <div className="w-4/12">
          <Card className=" h-[500px]">
            <div className="px-3 py-3">
              <div className="space-y-2">
                <Label>Kreator</Label>
                <Controller
                  control={control}
                  name="creatorName"
                  render={({ field }) => (
                    <Input
                      size="md"
                      type="text"
                      value={field.value}
                      onChange={field.onChange}
                      placeholder="Enter Title"
                    />
                  )}
                />
                {errors.creatorName?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.creatorName.message}
                  </p>
                )}
              </div>
            </div>
            <div className="px-3 py-3">
              <Label>Tags</Label>
              {/* <Controller
                control={control}
                name="tags"
                render={({ field }) => (
                  <Input
                    size="md"
                    type="text"
                    value={field.value}
                    onChange={field.onChange}
                    placeholder="Enter Title"
                    onKeyDown={handleKeyDown}
                  />
                )}
              /> */}
              <div className="text-sm text-red-500">
                {tags.length === 0 && "Please add at least one tag."}
              </div>
              <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
                {tags.map((tag, index) => (
                  <div
                    key={index}
                    className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
                  >
                    <span>{tag}</span>
                    <button
                      className="text-blue-600 hover:text-blue-800 focus:outline-none"
                      onClick={() => handleRemoveTag(index)}
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
            </div>
            <div className="px-3 py-3">
              <div className="flex flex-col gap-6">
                <Label>Target Publish</Label>
                <div className="flex gap-2 items-center">
                  <Checkbox id="all" />
                  <Label htmlFor="all">SEMUA</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="umum" />
                  <Label htmlFor="umum">UMUM</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="journalist" />
                  <Label htmlFor="journalist">JOURNALIS</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="polri" />
                  <Label htmlFor="polri">POLRI</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="ksp" />
                  <Label htmlFor="ksp">KSP</Label>
                </div>
              </div>
            </div>
          </Card>
          <div className="flex flex-row justify-end gap-3">
            <div className="mt-4">
              <Button type="submit" color="primary">
                Submit
              </Button>
            </div>
            <div className="mt-4">
              <Button type="submit" color="primary" variant="outline">
                Cancel
              </Button>
            </div>
          </div>
        </div>
      </div>
    </form>
  );
}